RMWC Toolbar component
npm install @rmwc/toolbar> Toolbar actions appear above the view affected by their actions.
- Module @rmwc/toolbar
- Import styles:
- import '@material/toolbar/dist/mdc.toolbar.css'
- MDC Docs: https://material.io/develop/web/components/toolbar/
Attention Toolbars are technically deprecated by material-components-web (although they continue to get updates?) but they remain useful until TopAppBar can catch up and contain all of the same behaviors.
``jsx`
`jsx`
`jsx`
When using the fixed prop, you can optionally add the ToolbarFixedAdjust component to fill in the appropriate space.
`jsx
<>
`jsx
<>
Toolbar
Another Row
Scroll Me
>
`Flexible
`jsx
<>
Toolbar
Scroll Me
>
`Toolbar
$3
| Name | Type | Description |
|------|------|-------------|
|
fixed | undefined \| false \| true | Makes the toolbar fixed |
| fixedLastrowOnly | undefined \| false \| true | Fixes the last row of a multi-row toolbar |
| flexible | undefined \| false \| true | makes the toolbar flexible |
| flexibleDefaultBehavior | undefined \| false \| true | further defines the background and title movement behavior, use in conjunction with flexible. |
| waterfall | undefined \| false \| true | Adds a waterfall effect on scroll |
ToolbarRow
A Toolbar rowToolbarSection
A section of the Toolbar$3
| Name | Type | Description |
|------|------|-------------|
|
alignEnd | undefined \| false \| true | Aligns the ToolbarSection at the end. |
| alignStart | undefined \| false \| true | Aligns the ToolbarSection at the start. |
| shrinkToFit | undefined \| false \| true | Makes the ToolbarSection shrink to fit. |
ToolbarTitle
A Toolbar titleToolbarMenuIcon
A Menu Icon For the Toolbar. This is an instance of the Icon component.$3
| Name | Type | Description |
|------|------|-------------|
|
icon | RMWC.IconPropT | The icon to use. This can be a string for a font icon, a url, or whatever the selected strategy needs. |
ToolbarIcon
A standard Icon for toolbar actions. This is an instance of the Icon component.$3
| Name | Type | Description |
|------|------|-------------|
|
icon | RMWC.IconPropT` | The icon to use. This can be a string for a font icon, a url, or whatever the selected strategy needs. |