Bileşenler

Drawer

Sayfanın kenarından ya da altından kayarak açılan, sayfayı bırakmadan ayrıntı, filtre ya da alt form gösteren panel.

Storybook: Storybook
Kaynak kod: Kaynak kod

Kurulum

Paket: @bigbang/ui
İçe aktarma: import { Drawer } from '@bigbang/ui';
Kaynak: Drawer.tsx
Storybook: Drawer · Playground

Drawer, @bigbang/ui paketindedir.

import { Button, Drawer } from '@bigbang/ui';

<Drawer
  trigger={<Button variant="secondary">Paneli aç</Button>}
  title="Panel başlığı"
  footer={
    <Drawer.Close>
      <Button>Uygula</Button>
    </Drawer.Close>
  }
>
  Panel içeriği
</Drawer>;

Parça prop tipleri de dışa açılır: DrawerCloseProps.

Özellikler

titleZorunlu

Açıklama: Panelin başlığı; ekran okuyucu için panele ad verir. Zorunlu.
Tür: ReactNode

description

Açıklama: Başlığın altında bir cümle; başlıkla birlikte okunur.
Tür: ReactNode

children

Açıklama: Panel gövdesinin içeriği. Kendi içinde kayar; başlık ve eylemler yerinde kalır.
Tür: ReactNode

trigger

Açıklama: Paneli açan öğe, genellikle bir Button. Paneli open ile yönetecekseniz vermeyin.
Tür: ReactElement

side

Açıklama: Panelin geldiği kenar. start ve end yazı yönünü izler; 640 px'ten dar ekranda kendiliğinden bottom olur.
Tür: DrawerSide
Varsayılan: 'end'

size

Açıklama: start ya da end panelin genişliği: 360, 480 ya da 640 px. top ve bottom sayfa ekran genişliğindedir ve içeriğiyle en çok 320 px (sm) ya da 560 px (md) yüksekliğe büyür; lg tüm yüksekliği alır.
Tür: 'sm' | 'md' | 'lg'
Varsayılan: 'md'

open

Açıklama: Kontrollü açık durum. onOpenChange ile birlikte verin.
Tür: boolean

defaultOpen

Açıklama: Panel kontrolsüz kullanıldığında ilk çizimdeki açık durum.
Tür: boolean
Varsayılan: false

onOpenChange

Açıklama: Tetikleyici, Escape, dışarı tıklama, kaydırma ya da kapat butonu durumu değiştirdiğinde yeni açık durumla çağrılır.
Tür: (open: boolean) => void

closeLabel

Açıklama: Kapat butonunun erişilebilir adı. Varsayılanı ui.dialog.close kütüphane metnidir ("Kapat" ya da "Close").
Tür: string

handle

Açıklama: Alt sayfanın üstüne bir tutamaç çizer. Süstür: sayfa her yerinden kaydırılır ve her zaman bir kapat butonu vardır. Verilmezse sayfanın tutunma noktaları varsa, yani sürüklemek boyutunu değiştiriyorsa görünür.
Tür: boolean

snapPoints

Açıklama: Alttan açılan sayfanın durduğu yükseklikler: ekranın oranı (0-1) ya da '320px' gibi CSS uzunlukları; kaydırma aralarında geçirir. Diğer kenarlar yok sayar.
Tür: DrawerSnapPoint[]

Parçalar

Drawer.Close: tek bir Button’ı sarar ve basılınca paneli kapatır.
Proplarla kurulamayan bir düzen için parçalar: Drawer.Root (Drawer ile aynı proplar; title, description, footer yerine çocuklar), Drawer.Header, Drawer.Title, Drawer.Description, Drawer.Body, Drawer.Footer. Her panelde bir Drawer.Title olur.

Veri öznitelikleri

data-component="drawer", data-side (end, start, top ya da bottom), data-size: panel üzerinde.
data-part: backdrop, handle, header, body, footer.
data-swiping, data-swipe-direction, data-starting-style, data-ending-style: Base UI’dan.