Drawer

Bir kenardan kayarak açılan modal bir yan panel (sheet). Dialog ile aynı davranışa ve parçalara sahiptir; Content'e ek olarak side ve size prop'ları gelir.

KararlıKaynak kodu gör

Import

tsx

import { Drawer } from "@merid/react";

<Drawer.Root>
<Drawer.Trigger asChild>
  <Button variant="secondary">Sağdan aç</Button>
</Drawer.Trigger>
<Drawer.Content side="right" closeLabel="Kapat">
  <Drawer.Title>Filtreler</Drawer.Title>
  <Drawer.Description>Fatura listesini daralt.</Drawer.Description>
  <Drawer.Footer>
    <Drawer.Close>Sıfırla</Drawer.Close>
    <Drawer.Close asChild>
      <Button variant="primary">Uygula</Button>
    </Drawer.Close>
  </Drawer.Footer>
</Drawer.Content>
</Drawer.Root>

Anatomi

tsx

<Drawer.Root>
  <Drawer.Trigger />
  <Drawer.Content side="right">
    <Drawer.Title />
    <Drawer.Description />
    <Drawer.Footer />
  </Drawer.Content>
</Drawer.Root>

Root, Trigger, Title, Description, Close ve Footer, Dialog parçalarıdır. Footer sheet'in en altına itilir.

Örnekler

Kenarlar

<Drawer.Content side="left">…</Drawer.Content>
<Drawer.Content side="right">…</Drawer.Content>

Boyutlar

size sheet'in genişliğini belirler: sm 320px, md 420px (varsayılan), lg 560px. Genişlik her zaman viewport'un 48px eksiğiyle sınırlıdır.

<Drawer.Content size="sm">…</Drawer.Content>
<Drawer.Content size="md">…</Drawer.Content>
<Drawer.Content size="lg">…</Drawer.Content>

Controlled

tsx

const [open, setOpen] = useState(false);

<Drawer.Root open={open} onOpenChange={setOpen}>
  <Drawer.Content>…</Drawer.Content>
</Drawer.Root>

API referansı

Drawer.Root

Prop	Tip	Varsayılan	Açıklama
`open`	`boolean`	–	Controlled açık/kapalı state'i.
`defaultOpen`	`boolean`	`false`	Uncontrolled kullanımda başlangıç state'i.
`onOpenChange`	`(open: boolean) => void`	–	Açık/kapalı state'i değişmesi gerektiğinde çağrılır.
`children`	`ReactNode`	–	Trigger, Content ve bu drawer'ın state'ini paylaşan diğer her şey.

Drawer.Content

role dışındaki tüm <div> attribute'larını kabul eder.

Prop	Tip	Varsayılan	Açıklama
`side`	`"left" \| "right"`	`"right"`	Sheet'in kayarak açıldığı kenar.
`size`	`DrawerSize`	`"md"`	Sheet genişliği: `sm` 320px, `md` 420px, `lg` 560px; viewport'un 48px eksiğiyle sınırlı. `DrawerSize` tipi `"sm" \| "md" \| "lg"`.
`closeOnOutsidePress`	`boolean`	`true`	Arka plana basıldığında kapanır.
`closeOnEscape`	`boolean`	`true`	Escape ile kapanır.
`initialFocus`	`RefObject<HTMLElement \| null>`	–	Açılınca focus alacak eleman. Verilmezse önce [data-autofocus], sonra ilk tab'lanabilir eleman.
`container`	`Element \| null`	`document.body`	Portal hedefi. `undefined` verilirse `document.body` kullanılır; `null` verilirse hedef oluşana kadar hiçbir şey render'lanmaz.
`showClose`	`boolean`	`true`	Sağ üstteki standart ikonlu kapatma butonunu otomatik render'lar. Kendi ikonlu `Close`'unu render'ladığında atlanır.
`closeLabel`	`string`	`"Close"`	Otomatik kapatma butonunun erişilebilir adı. Türkçe arayüzde `"Kapat"` ver.
`ref`	`Ref<HTMLDivElement>`	–	Drawer elemanına iletilen ref.

Trigger, Title, Description, Close ve Footer, Dialog'daki prop'ların aynısını alır.

Stil verme

Sınıf	Eleman
`.mrd-drawer__backdrop`	Sabit arka plan; sheet'i kendi kenarına hizalar
`.mrd-drawer`	Sheet: `data-size`'a göre 320 / 420 / 560px, `100vw - 48px` ile sınırlı, tam yükseklik

İkisi de data-side="left" | "right" ve data-state="open" taşır; sheet ayrıca data-size taşır. Title, description, footer ve close, .mrd-dialog__* sınıflarını kullanır. prefers-reduced-motion altında hareket kaldırılır.

Erişilebilirlik

WAI-ARIA Dialog (Modal) desenini izler: role="dialog", aria-modal="true", focus kapanı, scroll kilidi ve focus'un geri dönmesi.

Tuş	Ne yapar
`SpaceEnter`	Tetikleyicideyken drawer'ı açar.
`Tab`	Focus'u ileri taşır; drawer içinde sona gelince başa döner.
`ShiftTab`	Focus'u geri taşır; drawer içinde başa gelince sona döner.
`Esc`	Drawer'ı kapatır ve focus'u tetikleyiciye döndürür.

Kullanım ilkeleri

Yap

Drawer'ı, sayfayı görünür tutmanın işe yaradığı ikincil içerik için kullan: filtreler, detaylar, ayarlar.

Kaçın

Çok adımlı bir akışı drawer'a koymak. Bunun için bir sayfa kullan.

İlgili sayfalar

Dialog
SidebarNav: kalıcı navigasyon için.