SplitButton

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

SplitButton.tsx

Storybook

SplitButton · Playground

SplitButton, @bigbang/ui paketindedir. Menü öğesi tipi SplitButtonAction olarak dışa aktarılır.

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

<SplitButton
  onClick={save}
  menuLabel="Diğer kaydetme seçenekleri"
  actions={[{ label: 'Taslak olarak kaydet', onSelect: saveDraft }]}
>
  Kaydet
</SplitButton>;

Özellikler

childrenZorunlu

Açıklama

Ana eylemin etiketi, "Kaydet" gibi kısa bir fiil.

Tür

string

onClick

Açıklama

Ana eylemi çalıştırır.

Tür

MouseEventHandler<HTMLButtonElement>

actionsZorunlu

Açıklama

Menüdeki ilgili eylemler; her biri label, onSelect, isteğe bağlı icon ve disabled alır.

Tür

readonly SplitButtonAction[]

menuLabelZorunlu

Açıklama

Menü düğmesinin erişilebilir adı, örneğin "Diğer kaydetme seçenekleri". Zorunludur: düğmede yalnızca ok ikonu vardır.

Tür

string

variant

Açıklama

Eylemin önemi. Bir alanda tek primary kullanın.

Tür

'primary' | 'secondary'

Varsayılan

'primary'

tone

Açıklama

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

Tür

'neutral' | 'danger'

Varsayılan

'neutral'

size

Açıklama

Button yükseklikleri: 32, 36 ya da 40 px.

Tür

'sm' | 'md' | 'lg'

Varsayılan

'md'

disabled

Açıklama

İki parçayı da devre dışı bırakır.

Tür

boolean

Varsayılan

false

type

Açıklama

Ana eylemin form davranışı. Formu gönderiyorsa 'submit' verin.

Tür

'button' | 'submit' | 'reset'

Varsayılan

'button'

className

Açıklama

Yalnızca yerleşim için: dış boşluk ve konum.

Tür

string

SplitButtonAction: label, onSelect, isteğe bağlı icon ve disabled.

Veri öznitelikleri

• data-component="button-group": kökte.
• data-part="main" ve data-part="menu-trigger": iki düğmede.
• data-popup-open: menü açıkken menü düğmesinde (Base UI).
• data-component="split-button-menu": açılan menüde.