Bulk Action Bar

Панель действий над выбранными строками с горячими клавишами. Pro · Данные и показатели › Таблицы

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add bulk-action-bar

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { BulkActionBar } from 'valyro-ui-pro';

Пропсы

Prop	Type	Default
`count` *	`number`		Number of selected items; the bar shows while it is above zero.
`total`	`number`		Items available, for "3 of 120" and the Select all button.
`actions` *	`BulkAction[]`		Shown as buttons up to `maxVisible`; the rest go into the ⋯ menu.
`maxVisible`	`number`	`3`	Buttons before the overflow menu. Default 3.
`onClearSelection` *	`() => void`		Clears the selection: the ✕ button and the Escape key.
`onSelectAll`	`() => void`		Adds "Select all {total}" while only part is selected.
`position`	`'sticky' \| 'fixed' \| 'static'`	`'sticky'`	`sticky` (default) floats at the bottom of the scroll container the bar is placed in, e.g. right after a table; `fixed` floats at the bottom of the viewport; `static` stays in the flow where it is placed and takes its own height (embedded in a panel, a card or a docs example).
`shortcuts`	`boolean`	`true`	Keyboard shortcuts of the actions and Escape to clear. Default true.
`shortcutScope`	`RefObject<HTMLElement \| null>`		Area whose focus turns the shortcuts on, usually the table the selection belongs to. They also work from the bar itself and while nothing has focus; elsewhere on the page the keys do what they normally do.
`locale`	`string`		BCP 47 locale for numbers and dates; defaults to the ThemeProvider's, then the browser's.
`animation`	`'default' \| 'spring'`	`'default'`	`spring`: the selected count rolls to each new value (up as it grows, down as it shrinks). `default`: it just changes.
`labels`	`Partial<BulkActionBarLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Bulk Action Bar

Установка

Пропсы

Похожие компоненты