Component
Toolbar
A labelled row of list controls — search, filters, view options — with an end cluster.
import { Toolbar } from '@loidolt/theme-svelte';
Example
24 sheets
Notes
- By default it is a labelled
group: Tab moves between controls. That is right when it holds a text field or a control that owns its arrow keys, such as aToggleGroup. rovingmakes it an ARIAtoolbarwith one tab stop; arrow keys move between the controls markeddata-roving-item.
Props
Generated from the component source, so it cannot drift from the implementation.
| Prop | Type | Default | Notes |
|---|---|---|---|
label required | string | — | Accessible name, e.g. "Sheet list tools". |
children | Snippet | — | Leading controls — search, filters, a result count. |
class | string | — | |
end | Snippet | — | Controls pushed to the far end — view toggles, a sort menu. |
orientation | Orientation | 'horizontal' | |
ref bindable | HTMLDivElement | null | null | |
roving | boolean | false | Make it an ARIA toolbar: one tab stop, arrow keys between the controls marked data-roving-item. Leave it off (a labelled group, Tab between controls) when the bar holds a text field or a control that owns its own arrow keys, like a ToggleGroup. |
Plus the attributes of HTMLAttributes<HTMLDivElement>, forwarded to the root element.