nili/ui
enfaartr
كل المكوّنات

Drawer

عرض شامل
١٣ تصدير٥ محور تنويع٣٠ خاصيّة٤ ملف
import { Drawer, DrawerFooter, DrawerHeader, DrawerSide } from '@nili/ui';

هذه صفحة العرض الشامل الخاصة بالمكتبة، معروضة حيّة. غيّر اللغة أو السمة من الأعلى وسَتتبعك.

أساسي

لوحة تنزلق من إحدى الحواف. يُتحكّم بها عبر open وonOpenChange مثل Modal — تُنقل وتحبس التركيز وتعيده إلى المُشغِّل.

import { Drawer, Button, TextInput } from "@nili/ui"

export function Example() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open drawer</Button>

      <Drawer
        open={open}
        onOpenChange={setOpen}
        title="Filters"
        description="Narrow the list down."
        closeLabel="Close"
        footer={
          <>
            <Button appearance="stroke" onClick={() => setOpen(false)}>Reset</Button>
            <Button onClick={() => setOpen(false)}>Apply</Button>
          </>
        }
      >
        <TextInput
              label={t('filters.search')}
              placeholder={t('filters.searchPlaceholder')}
            />
      </Drawer>
    </>
  )
}

الجهات

side منطقي: فـend يمين في الإنجليزية ويسار في الفارسية، فتنفتح اللوحة دائمًا من الحافة التي يتوقّعها القارئ. أما top وbottom فماديّان، إذ لا اتجاه قراءة على ذلك المحور.

import { Drawer } from "@nili/ui"

export function Example() {
  return (
    <>
      <Drawer side="end" … />
      <Drawer side="start" … />
      <Drawer side="top" … />
      <Drawer side="bottom" … />
    </>
  )
}

الأحجام وكثافة الترويسة

أربعة أحجام للوحة، وheaderSize منفصلة لترويسة Small / Large في فيجما.

حجم اللوحة
import { Drawer } from "@nili/ui"

export function Example() {
  return (
    <>
      <Drawer size="sm" headerSize="sm" … />
      <Drawer size="lg" headerSize="lg" … />
      <Drawer size="full" … />
    </>
  )
}

تذييل ممتد

يجعل stretchFooter الإجراءات تملأ العرض — وهو Stretch للتذييل في فيجما. مناسب للوحة ضيّقة، حيث يترك زرّان ملتصقان فجوة قبيحة.

import { Drawer, Button } from "@nili/ui"

export function Example() {
  return (
    <Drawer
      open={open}
      onOpenChange={setOpen}
      title="Settings"
      stretchFooter
      footer={
        <>
          <Button appearance="stroke" onClick={close}>Cancel</Button>
          <Button onClick={close}>Save</Button>
        </>
      }
    />
  )
}

التحكّم في الإغلاق

closeOnOutsideClick وcloseOnEscape مفعّلتان افتراضيًا. ويُبقي showClose علامة ✕ — أبقِها حين تطفئ الأخريين، وإلا فلا مخرج للوحة.

import { Drawer } from "@nili/ui"

export function Example() {
  return (
    <Drawer
      open={open}
      onOpenChange={setOpen}
      closeOnOutsideClick={false}
      closeOnEscape={false}
      showClose
      closeLabel="Close"
      title="Editing"
      …
    />
  )
}