rc-toolbar
Toolbar that groups consumer-supplied controls into one tab stop with arrow-key navigation, following the WAI-ARIA Toolbar pattern.
- Package
@rcarls/rc-toolbar- Element
<rc-toolbar>- Native dependency
- Consumer supplies toolbar controls
- State model
- Roving focus only
- Main events
- None
- Related
- Theme previews
Installation
- npm
- Yarn
npm install @rcarls/rc-toolbar
yarn add @rcarls/rc-toolbar
import '@rcarls/rc-toolbar/define';
Live demo
Theming
The default demo mode shows the component without a package theme. Use the shared preview controls on this page to compare inherited, light, and dark color schemes or to apply the optional Material theme only inside the demo frames.
API
Properties
| Property | Markup | Type | Default | Description |
|---|---|---|---|---|
label | label | string | 'Toolbar' | Accessible label for this toolbar. Default label is 'Toolbar'. |
orientation | orientation | 'horizontal' | 'vertical' | 'horizontal' | Toolbar orientation, for keyboard navigation. |
Methods
No public methods are documented in the custom elements manifest.
Events
No custom events are documented in the custom elements manifest.
Slots
| Name | Description |
|---|---|
Takes | any number of child elements to display in the toolbar. Only focusable elements are navigable. |
CSS Custom Properties
| Property | Default | Description |
|---|---|---|
--rc-toolbar-gap-inline | 0.25em | Gap between toolbar items |
--rc-toolbar-padding-inline | calc(var(--rc-control-padding-inline) / 2) | Horizontal padding on the toolbar container |
--rc-toolbar-padding-block | calc(var(--rc-control-padding-block) / 2) | Vertical padding on the toolbar container |
--rc-toolbar-radius | var(--rc-control-radius) | Toolbar container border radius |
--rc-toolbar-vertical-radius | var(--rc-toolbar-radius) | Toolbar container border radius when orientation is vertical; falls back to `--rc-toolbar-radius` |
CSS Parts
| Part | Description |
|---|---|
root | The toolbar container element |