ButtonGroup

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

ButtonGroup.tsx

Storybook

ButtonGroup · Playground

ButtonGroup, @bigbang/ui paketindedir.

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

<ButtonGroup attached label="Sayfalar">
  <Button variant="secondary">Önceki</Button>
  <Button variant="secondary">Sonraki</Button>
</ButtonGroup>;

Özellikler

label

Açıklama

Ekran okuyucu için grubun adı, örneğin "Metin biçimi". Butonlar yalnızca birlikte anlam taşıyorsa verin; verilmezse grubun adı olmaz.

Tür

string

orientation

Açıklama

Butonların yönü. Ok tuşları kullanılmaz; her buton ayrı bir sekme durağıdır.

Tür

'horizontal' | 'vertical'

Varsayılan

'horizontal'

attached

Açıklama

Butonları ortak kenarlıklı tek denetim olarak birleştirir; bölünmüş işlem ya da sayfalama gibi ilişkili işlemler içindir. İçinde secondary Button kullanın.

Tür

boolean

Varsayılan

false

className

Açıklama

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

Tür

string

childrenZorunlu

Açıklama

Aynı boyutta Button ya da IconButton öğeleri.

Tür

ReactNode

Veri öznitelikleri

• data-component="button-group": kök öğe üzerinde.
• data-orientation: horizontal ya da vertical.
• data-attached: attached verildiğinde.
• data-part="text" ve data-part="separator": ButtonGroup.Text ve ButtonGroup.Separator üzerinde.

Parçalar

• ButtonGroup.Text: grubun içinde birim ya da değer gibi durağan metin; butonların yüksekliğine uzar.
• ButtonGroup.Separator: birleşik gruptaki dolgulu butonlar arasında dekoratif 1 px çizgi.
• ButtonGroup içinde ButtonGroup: iç gruplar 8 px aralıkla durur.