ActionBar

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

ActionBar.tsx

Storybook

ActionBar · Playground

ActionBar @bigbang/ui paketindedir. Eylemler için Toolbar parçalarını kullanır.

import { ActionBar, ToolbarButton } from '@bigbang/ui';

<ActionBar count={selected.length} onClear={() => setSelected([])}>
  <ToolbarButton label="Arşivle" icon="download" onClick={archiveSelected} />
</ActionBar>;

Özellikler

countZorunlu

Açıklama

Kaç öğenin seçili olduğu. Çubuk 0'dan büyükken görünür ve her değişikliği duyurur.

Tür

number

onClearZorunlu

Açıklama

Seçimi temizler. Çubuğun ilk düğmesi olarak gösterilir; çubuk içindeyken Escape de onu çağırır.

Tür

() => void

childrenZorunlu

Açıklama

Seçili öğeler için eylemler: ToolbarButton ve ToolbarSeparator. Üç ile beş arası tutun.

Tür

ReactNode

placement

Açıklama

floating çubuğu ekranın altına sabitler; inline onu koyduğunuz yerde, örneğin bir tablonun üstünde gösterir.

Tür

'floating' | 'inline'

Varsayılan

'floating'

label

Açıklama

Ekran okuyucu için eylem grubunun adı. Varsayılanı Provider'dan "Toplu eylemler" ya da "Bulk actions".

Tür

string

countLabel

Açıklama

Sayı metni, örneğin (n) => n + ' dosya seçildi'. Varsayılanı "{count} öğe seçildi" ya da "{count} selected".

Tür

(count: number) => string

material

Açıklama

'solid', cam bir Provider altında çubuğu 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

Veri öznitelikleri

• data-component="action-bar": içerikleri sarmalayan display: contents kökte.
• data-part="bar" ve data-part="count": çubukta ve sayı metninde.