SelectionBar
The floating bar at the foot of a list.
View code
<form id="monitors" method="post" action="/monitors/bulk">
{monitors.map((monitor) => (
<label>
<input type="checkbox" data-selection-item name="id" value={monitor.id} />
{monitor.name}
</label>
))}
</form>
<SelectionBar
target="monitors"
pagination={{ summary: "Viewing 1–5 of 1,213", next: "?page=2" }}
actions={[
{ label: "Pause", key: "p", icon: <PauseIcon />, name: "intent", value: "pause" },
{ label: "Archive", key: "a", icon: <ArchiveIcon />, name: "intent", value: "archive" },
{ label: "Delete", key: "x", icon: <Trash2Icon />, name: "intent", value: "delete", danger: true },
]}
labels={{
toolbar: "Monitors", clear: "Clear selection", selected: "{count} selected",
cleared: "Selection cleared", previous: "Previous page", next: "Next page",
}}
/>Demo apps
Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.
- CMSInkwellInkwell, a demo CMS built from @sdxc/ui/app: posts with count tabs and quick edit, an editor with a quiet save status and a loud Publish, media and settings./demo/apps/inkwell
- Ops dashboardPulsePulse, an invented ops dashboard: Northwind's services with live filters, a peek sheet and a bulk bar, metrics that switch one chart, incidents, deploys and settings./demo/apps/pulse
- Support inboxRelayRelay, an invented support inbox: mailboxes, conversations and the open conversation on one screen, with contacts, reports and settings./demo/apps/relay
Every demo, landings and docs sites alike, is listed in the demo gallery.
Installation
An ordinary dependency: install it, import the theme once, and import the component where it is used.
npm add @sdxc/ui remiximport "@sdxc/ui/theme.css";Usage
import { SelectionBar } from "@sdxc/ui/app";Renders the bar as the list's footer row, summary at the start and page links at the end, and
once rows are selected as a floating bar of actions stuck to the bottom of the scroll container.
Both layers share one grid cell so the morph cross-fades in place. The layers' text and links work without
script; the selection layer appears once the @sdxc/ui/app/selection-bar island loads.
Props
Read from the component's own types, so every prop, every default and every allowed value is listed.
| Prop | Type | Required | Description |
|---|---|---|---|
target | string | Yes | The id of the region holding the [data-selection-item] checkboxes. |
form | string | No | The id of the form those checkboxes submit with. Defaults to target. |
pagination | Pagination | No | Range and page links shown while nothing is selected; omitted hides the idle bar. |
actions | Action[] | No | The bulk actions, in order; put a destructive one last. |
locale | string | No | Locale for the count. Defaults to the runtime's. |
labels | Labels | Yes |
Also accepts everything in Omit<TagProps<"div">, "children">.