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

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

Panel yazı yönündeki son kenardan gelir: soldan sağa yazımda sağdan, sağdan sola yazımda soldan. Kenara doğru kaydırılarak, Escape ile ya da arka plana tıklayarak kapanır.

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

export default function Default() {
  return (
    <Drawer
      trigger={<Button variant="secondary">Paneli aç</Button>}
      title="Panel başlığı"
      description="Panel açıklaması burada yer alır."
      footer={
        <Drawer.Close>
          <Button>Uygula</Button>
        </Drawer.Close>
      }
    >
      Panel içeriği burada yer alır. Sayfa arkada görünür kalır.
    </Drawer>
  );
}

Alttan

side="bottom" bir alt sayfa açar (tutamaç için handle, durma noktaları için snapPoints); aşağı kaydırılarak kapanır. Görünüm 640 px’ten darsa her panel alt sayfaya dönüşür.

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

export default function Bottom() {
  return (
    <Drawer
      side="bottom"
      handle
      trigger={<Button variant="secondary">Alttan aç</Button>}
      title="Panel başlığı"
      footer={
        <Drawer.Close>
          <Button>Uygula</Button>
        </Drawer.Close>
      }
    >
      Panel içeriği burada yer alır. Sayfa arkada görünür kalır.
    </Drawer>
  );
}

Kalıcı olmayan

modal={false}: arka plan yoktur, odak tutulmaz ve sayfa kullanılabilir kalır. Filtreler gibi sayfayla birlikte kullanılan paneller içindir.

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

export default function NonModal() {
  return (
    <Drawer
      modal={false}
      size="sm"
      trigger={<Button variant="secondary">Kalıcı olmayan panel</Button>}
      title="Panel başlığı"
      footer={
        <Drawer.Close>
          <Button>Uygula</Button>
        </Drawer.Close>
      }
    >
      <div className="flex flex-col gap-md">
        <Checkbox label="Birinci öğe" />
        <Checkbox label="İkinci öğe" />
      </div>
    </Drawer>
  );
}

Kenarlar

start ve end yazı yönünü izler ve 640 px’ten dar ekranda alttan açılan sayfaya dönüşür; top üst kenardan iner.

Canlı örnek, StorybookStorybook'ta aç

Parçalarla

Drawer.Root aynı paneli çizer; başlık, gövde ve işlemleri Drawer.Header, Drawer.Title, Drawer.Description, Drawer.Body ve Drawer.Footer ile siz yerleştirirsiniz.

Canlı örnek, StorybookStorybook'ta aç

Açık ve koyu mod

Panel color-surface-raised ve color-border-subtle çizgi kullanır; uç panel shadow-panel gölgesi alır. Alt sayfa tutamacı color-surface-layer-2.

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

export default function Default() {
  return (
    <Drawer
      trigger={<Button variant="secondary">Paneli aç</Button>}
      title="Panel başlığı"
      description="Panel açıklaması burada yer alır."
      footer={
        <Drawer.Close>
          <Button>Uygula</Button>
        </Drawer.Close>
      }
    >
      Panel içeriği burada yer alır. Sayfa arkada görünür kalır.
    </Drawer>
  );
}