Bileşenler

DropdownMenu

Bir butonun arkasındaki eylem listesi; seçim öğeleri, gruplar, alt menüler ve kısayollarla.

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

Öğeler ikon, kısayol ve ton alabilir. Kısayollar Kbd ile gösterilir ve aria-keyshortcuts ile bildirilir. Devre dışı öğe nedenini ikinci satırda söyler. Tehlikeli öğe ayırıcıdan sonra en sonda durur.

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

export default function Default() {
  return (
    <DropdownMenu trigger={<Button variant="secondary">İşlemler</Button>}>
      <DropdownMenu.Item icon="pencil" shortcut={['mod', 'E']}>
        Düzenle
      </DropdownMenu.Item>
      <DropdownMenu.Item icon="copy" shortcut={['mod', 'D']}>
        Çoğalt
      </DropdownMenu.Item>
      <DropdownMenu.Item icon="download" disabled disabledReason="Dışa aktarma bu öğe için kapalı.">
        Dışa aktar
      </DropdownMenu.Item>
      <DropdownMenu.Separator />
      <DropdownMenu.Item icon="trash" tone="danger">
        Sil
      </DropdownMenu.Item>
    </DropdownMenu>
  );
}

İkon butonunda

Satır sonundaki “Diğer işlemler” menüsü sona hizalanır. description ikinci bir satır ekler.

import { DropdownMenu, IconButton } from '@bigbang/ui';

export default function OnIconButton() {
  return (
    <DropdownMenu align="end" trigger={<IconButton icon="ellipsis" label="Diğer işlemler" variant="secondary" />}>
      <DropdownMenu.Item icon="pencil">Düzenle</DropdownMenu.Item>
      <DropdownMenu.Item icon="copy" description="Öğenin bir kopyasını oluşturur.">
        Çoğalt
      </DropdownMenu.Item>
    </DropdownMenu>
  );
}

Onay ve radyo öğeleri

Seçim öğeleri menüyü açık tutar; onay işareti ve nokta etiketin sonunda büyüyerek belirir. İkonsuz bir öğeyi ikonlu öğelerle hizalamak için inset kullanın. Grup etiketleri grupları adlandırır.

import { Button, DropdownMenu } from '@bigbang/ui';
import { useState } from 'react';

export default function Selection() {
  const [sort, setSort] = useState('name');
  return (
    <DropdownMenu trigger={<Button variant="secondary">Görünüm</Button>}>
      <DropdownMenu.Group label="Sütunlar">
        <DropdownMenu.CheckboxItem defaultChecked>Birinci öğe</DropdownMenu.CheckboxItem>
        <DropdownMenu.CheckboxItem>İkinci öğe</DropdownMenu.CheckboxItem>
      </DropdownMenu.Group>
      <DropdownMenu.Separator />
      <DropdownMenu.RadioGroup label="Sıralama" value={sort} onValueChange={setSort}>
        <DropdownMenu.RadioItem value="name">Ada göre</DropdownMenu.RadioItem>
        <DropdownMenu.RadioItem value="date">Tarihe göre</DropdownMenu.RadioItem>
      </DropdownMenu.RadioGroup>
    </DropdownMenu>
  );
}

Alt menü

Alt menü yazı yönündeki sona doğru açılır; üzerine gelince, basınca ya da içe ok tuşuyla açılır, dışa ok tuşuyla kapanır.

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

export default function Submenu() {
  return (
    <DropdownMenu trigger={<Button variant="secondary">İşlemler</Button>}>
      <DropdownMenu.Item icon="pencil">Düzenle</DropdownMenu.Item>
      <DropdownMenu.Submenu label="Paylaş" icon="external-link">
        <DropdownMenu.Item icon="mail">E-posta ile</DropdownMenu.Item>
        <DropdownMenu.Item icon="copy">Bağlantıyı kopyala</DropdownMenu.Item>
      </DropdownMenu.Submenu>
    </DropdownMenu>
  );
}

Açık ve koyu mod

Menü color-surface-raised, vurgulanan öğe color-action-subtle-hovered kullanır.

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

export default function Default() {
  return (
    <DropdownMenu trigger={<Button variant="secondary">İşlemler</Button>}>
      <DropdownMenu.Item icon="pencil" shortcut={['mod', 'E']}>
        Düzenle
      </DropdownMenu.Item>
      <DropdownMenu.Item icon="copy" shortcut={['mod', 'D']}>
        Çoğalt
      </DropdownMenu.Item>
      <DropdownMenu.Item icon="download" disabled disabledReason="Dışa aktarma bu öğe için kapalı.">
        Dışa aktar
      </DropdownMenu.Item>
      <DropdownMenu.Separator />
      <DropdownMenu.Item icon="trash" tone="danger">
        Sil
      </DropdownMenu.Item>
    </DropdownMenu>
  );
}