nili/ui
enfaartr
همه‌ی کامپوننت‌ها

Drawer

نمای کلی
۱۳ اکسپورت۵ محور واریانت۳۰ پراپ۴ فایل
import { Drawer, DrawerFooter, DrawerHeader, DrawerSide } from '@nili/ui';

این همان صفحه‌ی نمای کلیِ خود کتابخانه است که زنده رندر می‌شود. زبان یا تم را از هدر عوض کنید، همراهش می‌آید.

پایه

پنلی که از یک لبه می‌لغزد تو. مثل Modal با open و onOpenChange کنترل می‌شود — پرتال می‌شود، فوکوس را نگه می‌دارد و آن را به تریگر برمی‌گرداند.

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"
      …
    />
  )
}