Bileşenler

SplitButton

Ana eylemi, ilgili eylemleri listeleyen bir menü düğmesiyle birleştiren düğme.

Storybook: Storybook
Kaynak kod: Kaynak kod

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz. Menü düğmesini açarak okun dönüşüne ve menünün düğmeden büyüyerek açılmasına bakın.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

SplitButton ana eylemi ve ok ikonlu menü düğmesini bitişik bir grupta gösterir. menuLabel zorunludur.

import { SplitButton } from '@bigbang/ui';

export default function Default() {
  return (
    <SplitButton menuLabel="Diğer kaydetme seçenekleri" actions={[{ label: 'Taslak olarak kaydet', onSelect: () => {} }, { label: 'Kopya olarak kaydet', onSelect: () => {} }]}>
      Kaydet
    </SplitButton>
  );
}

İkincil

variant="secondary" kenarlıklı düğme verir; alanın ana eylemi değilse kullanın.

import { SplitButton } from '@bigbang/ui';

export default function Secondary() {
  return (
    <SplitButton variant="secondary" menuLabel="Diğer kaydetme seçenekleri" actions={[{ label: 'Taslak olarak kaydet', onSelect: () => {} }, { label: 'Kopya olarak kaydet', onSelect: () => {} }]}>
      Kaydet
    </SplitButton>
  );
}

Boyutlar

size Button yüksekliklerini kullanır: 32, 36 ya da 40 px.

import { SplitButton } from '@bigbang/ui';

export default function Sizes() {
  return (
    <div className="flex flex-wrap items-center gap-md">
      <SplitButton size="sm" menuLabel="Diğer kaydetme seçenekleri" actions={[{ label: 'Taslak olarak kaydet', onSelect: () => {} }, { label: 'Kopya olarak kaydet', onSelect: () => {} }]}>
        Kaydet
      </SplitButton>
      <SplitButton size="md" menuLabel="Diğer kaydetme seçenekleri" actions={[{ label: 'Taslak olarak kaydet', onSelect: () => {} }, { label: 'Kopya olarak kaydet', onSelect: () => {} }]}>
        Kaydet
      </SplitButton>
      <SplitButton size="lg" menuLabel="Diğer kaydetme seçenekleri" actions={[{ label: 'Taslak olarak kaydet', onSelect: () => {} }, { label: 'Kopya olarak kaydet', onSelect: () => {} }]}>
        Kaydet
      </SplitButton>
    </div>
  );
}

Tehlikeli

tone="danger" silen ya da geri alınamayan ana eylemi işaretler.

import { SplitButton } from '@bigbang/ui';

export default function Danger() {
  return (
    <SplitButton tone="danger" menuLabel="Diğer silme seçenekleri" actions={[{ label: 'Arşivle', onSelect: () => {} }, { label: 'Tümünü sil', onSelect: () => {} }]}>
      Sil
    </SplitButton>
  );
}

Devre dışı

disabled iki parçayı birlikte kapatır. Tek bir menü öğesi kendi disabled alanını alır.

import { SplitButton } from '@bigbang/ui';

export default function Disabled() {
  return (
    <SplitButton disabled menuLabel="Diğer kaydetme seçenekleri" actions={[{ label: 'Taslak olarak kaydet', onSelect: () => {} }, { label: 'Kopya olarak kaydet', onSelect: () => {} }]}>
      Kaydet
    </SplitButton>
  );
}

Açık ve koyu mod

Renkler semantik token’lardan gelir; iki modda ayrı ayar gerekmez.

import { SplitButton } from '@bigbang/ui';

export default function Default() {
  return (
    <SplitButton menuLabel="Diğer kaydetme seçenekleri" actions={[{ label: 'Taslak olarak kaydet', onSelect: () => {} }, { label: 'Kopya olarak kaydet', onSelect: () => {} }]}>
      Kaydet
    </SplitButton>
  );
}