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
- rc-chipTheme previews
Installation
- npm
- Yarn
npm install @rcarls/rc-toolbar
yarn add @rcarls/rc-toolbar
import '@rcarls/rc-toolbar/define';
Live demo
Direct rc-button and rc-chip children participate through their native child
buttons, so themed controls keep the toolbar's single roving tab stop. Icon-only
buttons should use data-rc-button-icon inside the native button so button and
theme geometry remain synchronized.
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 controls, `rc-button`, or `rc-chip` elements to display in the toolbar. Direct native controls and the native buttons inside supported wrappers 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-flex-wrap | nowrap | Whether toolbar items wrap onto multiple lines |
--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 |