nili/ui
enfaartr
Tüm bileşenler

Drawer

Genel görünüm
13 export5 varyant ekseni30 prop4 dosya
import { Drawer, DrawerFooter, DrawerHeader, DrawerSide } from '@nili/ui';

Bu, kütüphanenin kendi genel görünüm sayfası — canlı olarak render ediliyor. Üstten dili veya temayı değiştirin, o da değişir.

Temel

Bir kenardan kayarak gelen panel. Modal gibi open ve onOpenChange ile denetlenir — taşınır, odağı hapseder ve odağı tetikleyiciye döndürür.

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

Yönler

side mantıksaldır: end, İngilizcede sağ, Farsçada soldur; böylece çekmece hep okuyucunun beklediği kenardan açılır. top ve bottom fizikseldir, çünkü o eksende okuma yönü yoktur.

import { Drawer } from "@nili/ui"

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

Boyutlar ve başlık yoğunluğu

Dört panel boyutu ve Figma’nın Small / Large başlığı için ayrı bir headerSize.

panel boyutu
import { Drawer } from "@nili/ui"

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

Genişletilmiş alt bilgi

stretchFooter eylemlerin genişliği doldurmasını sağlar — Figma’nın alt bilgi Stretch’i. İki bitişik düğmenin tuhaf bir boşluk bıraktığı dar bir çekmecede doğrudur.

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

Kapatmayı denetlemek

closeOnOutsideClick ve closeOnEscape varsayılan olarak açıktır. showClose ✕’i tutar — diğer ikisini kapatırken onu bırakın, yoksa çekmecenin çıkışı olmaz.

import { Drawer } from "@nili/ui"

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