SplitButton

Ne zaman kullanılır

SplitButton, sık kullanılan bir ana eylemin yanında aynı işin birkaç çeşidi olduğunda kullanılır: “Kaydet” ve “Taslak olarak kaydet”, “Dışa aktar” ve biçim seçenekleri. Ana eylem tek tıkla çalışır; çeşitler menüde bekler.

Ne zaman kullanılmaz

• İlgisiz eylemler için: Birbirinden farklı eylemleri bir menüde toplamayın; ayrı Button’lar ya da bir araç çubuğu kullanın.
• Ana eylem yoksa: Tüm seçenekler eşitse yalnızca menü açan bir düğme kullanın.
• Tek bir çeşit varsa: İki ayrı Button daha açıktır.

Anatomi

Kaydet

AçıkKoyu

Kodu kopyala

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>
  );
}

1. Ana düğme: Ana eylemi çalıştırır; etiket görünürdür.
2. Menü düğmesi: Yalnızca ok ikonu gösterir; adı menuLabel’dan gelir.
3. Menü: İlgili eylemlerin listesi; düğmenin altında sağa hizalı açılır.

Davranış

• Ana düğmeye tıklamak yalnızca ana eylemi çalıştırır; menü açılmaz.
• Menü düğmesi tıklama, Enter, Space ya da Aşağı ok ile açılır. Odak ilk öğeye gider.
• Bir öğe seçilince menü kapanır ve odak menü düğmesine döner. Escape ya da dışarı tıklama da menüyü kapatır.
• Menü açıkken menü düğmesi üzerine gelme dolgusunu korur ve ok sabit kalır; menü düğmeden büyüyerek ve solarak açılır, daha hızlı kapanır. Hareketi azaltma tercihinde yalnızca saydamlık değişir.
• disabled iki parçayı birlikte kapatır.

Yönergeler

• Ana eylem en sık kullanılan seçenek olsun.
• Menüde iki ile beş öğe tutun.
• Menü öğeleri ana eylemin çeşitleri olsun.
• Bir alanda tek primary düğme kullanın.

İçerik

• Ana etiket kısa bir fiildir. Menü öğeleri fiille başlar.
• menuLabel menünün ne içerdiğini söyler: “Diğer kaydetme seçenekleri”.

Türkçe	İngilizce
Kaydet	Save
Taslak olarak kaydet	Save as draft
Kopya olarak kaydet	Save as copy
Diğer kaydetme seçenekleri	More save options

İlgili bileşenler

• Button: Tek eylem.
• ButtonGroup: İlgili düğmeleri bitişik gösterir.
• IconButton: Yalnızca ikonlu eylem.