ActionBar
A floating bottom bar for bulk actions on selected items
Divergence from Blok
Composition-first API instead of Blok's declarative prop arrays. Blok accepts buttons[] and menuItems[] prop arrays plus a hardcoded set of named callbacks (onPublish, onUnpublish, onDuplicate, onArchive, onDelete). We use ChildContent + Open + SelectedCount + OnCancel and let the consumer compose whatever buttons and menus they need. More flexible, but users migrating a Blok usage will need to flatten their prop arrays into inline <Button> children.
Examples
Default
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| ActionBar | Floating bar fixed to the bottom of the viewport that fades in when Open is true. Shows a cancel button, selection count, and a right-aligned slot for consumer-composed action buttons. |
ActionBar
Floating bar fixed to the bottom of the viewport that fades in when Open is true. Shows a cancel button, selection count, and a right-aligned slot for consumer-composed action buttons.
| Property | Type | Required | Description |
|---|---|---|---|
| Open | bool | Controls visibility via opacity and pointer-events (avoids transforms that would break child popovers). Default: false. | |
| OpenChanged | EventCallback<bool> | Fires when Open changes. Supports @bind-Open. | |
| SelectedCount | int | Number shown next to the cancel button (e.g. "3 selected"). Default: 0. | |
| OnCancel | EventCallback | Invoked when the left-hand close icon is clicked. Consumer typically sets Open to false here. | |
| Align | ActionBarAlign | Horizontal alignment of the bar within the viewport. Default: ActionBarAlign.Center. Other values: Left, Right. | |
| ClassName | string? | Extra CSS classes appended to the outer fixed container. | |
| ChildContent | RenderFragment? | Action buttons / menus shown on the right side of the bar. |