Bileşenler

Popover

Bir butona bağlı açılan, etkileşimli içerik taşıyan kalıcı olmayan 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 tetikleyicinin altında, ortasına hizalı açılır; odak ilk denetime gider. Başlık panele ad verir.

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

export default function Default() {
  return (
    <Popover trigger={<Button variant="secondary">Görünümü düzenle</Button>} title="Görünüm" description="Gösterilecek sütunları seçin.">
      <div className="flex flex-col gap-md">
        <Checkbox label="Birinci öğe" defaultChecked />
        <Checkbox label="İkinci öğe" />
        <div className="flex justify-end">
          <Popover.Close>
            <Button size="sm">Uygula</Button>
          </Popover.Close>
        </div>
      </div>
    </Popover>
  );
}

Oklu

arrow paneli tetikleyiciye bağlayan bir ok çizer; yakın duran birden çok tetikleyicide kullanın.

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

export default function WithArrow() {
  return (
    <Popover arrow align="center" size="sm" trigger={<Button variant="secondary">Görünümü düzenle</Button>} title="Görünüm">
      Açılır panel içeriği burada yer alır.
    </Popover>
  );
}

Açık ve koyu mod

Panel color-surface-raised, color-border-subtle halka ve shadow-popup kullanır.

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

export default function Default() {
  return (
    <Popover trigger={<Button variant="secondary">Görünümü düzenle</Button>} title="Görünüm" description="Gösterilecek sütunları seçin.">
      <div className="flex flex-col gap-md">
        <Checkbox label="Birinci öğe" defaultChecked />
        <Checkbox label="İkinci öğe" />
        <div className="flex justify-end">
          <Popover.Close>
            <Button size="sm">Uygula</Button>
          </Popover.Close>
        </div>
      </div>
    </Popover>
  );
}