Toolbar

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

Toolbar.tsx

Storybook

Toolbar · Playground

Toolbar ve parçaları @bigbang/ui paketindedir.

import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarSeparator } from '@bigbang/ui';

<Toolbar label="Metin biçimi">
  <ToolbarGroup label="Stil">
    <ToolbarButton label="Kalın" icon="bold" iconOnly pressed={bold} onClick={() => setBold(!bold)} />
  </ToolbarGroup>
  <ToolbarSeparator />
  <ToolbarButton label="Temizle" />
</Toolbar>;

Özellikler

Toolbar

labelZorunlu

Açıklama

Ekran okuyucu için araç çubuğunun adı, örneğin "Metin biçimi". Zorunludur: araç çubuğunun görünür başlığı yoktur.

Tür

string

orientation

Açıklama

Düğmelerin dizilişi. Ok tuşları buna uyar: horizontal için sol ve sağ, vertical için yukarı ve aşağı.

Tür

'horizontal' | 'vertical'

Varsayılan

'horizontal'

size

Açıklama

Araç çubuğu çerçevesinin yüksekliği: 32 ya da 36 px, yanındaki küçük ya da orta boy bir girdinin yüksekliği. İçindeki düğmeler 6 px daha kısadır.

Tür

'sm' | 'md'

Varsayılan

'md'

disabled

Açıklama

Araç çubuğundaki tüm denetimleri devre dışı bırakır.

Tür

boolean

Varsayılan

false

material

Açıklama

'solid', cam bir Provider altında araç çubuğunu opak tutar.

Tür

'auto' | 'solid'

Varsayılan

'auto'

className

Açıklama

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

Tür

string

childrenZorunlu

Açıklama

ToolbarButton, ToolbarGroup ve ToolbarSeparator parçaları.

Tür

ReactNode

ToolbarButton

labelZorunlu

Açıklama

Görünür etiket; iconOnly verildiğinde erişilebilir ad.

Tür

string

icon

Açıklama

Kayıtlı ikon adı. Süstür; düğmeyi etiket adlandırır.

Tür

IconName

iconOnly

Açıklama

Yalnızca ikonu gösterir; etiket erişilebilir ad olur. icon gerekir.

Tür

boolean

Varsayılan

false

pressed

Açıklama

Düğmeyi açma-kapama düğmesi yapar: true ya da false aria-pressed verir. Düz eylem için vermeyin.

Tür

boolean

onClick

Açıklama

Eylemi çalıştırır ya da durumunuzdaki pressed değerini çevirir.

Tür

MouseEventHandler<HTMLButtonElement>

disabled

Açıklama

Düğmeyi devre dışı bırakır. Yeri duyurulsun diye ok tuşu sırasında kalır.

Tür

boolean

Varsayılan

false

ToolbarGroup

label

Açıklama

Ekran okuyucu için grubun adı, örneğin "Hizalama". Verildiğinde odak gruba girerken okunur.

Tür

string

childrenZorunlu

Açıklama

Grubun düğmeleri.

Tür

ReactNode

ToolbarSeparator özellik almaz.

Veri öznitelikleri

• data-component="toolbar" ve data-orientation: kökte.
• data-component="toolbar-button", data-disabled, data-focusable: düğmelerde (Base UI).