Toolbar
Material Design 3-styled toolbar web components (lit-material-toolbar, lit-material-toolbar-spacer).
- 754 B gzipped
- @lit-material/toolbar 0.1.0
- Renders on the server
Example
Toolbar
A row of grouped controls above a piece of content, with a spacer to push trailing items to the far end.
<lit-material-toolbar> <lit-material-chip>Active</lit-material-chip> <lit-material-chip>Archived</lit-material-chip> <lit-material-toolbar-spacer></lit-material-toolbar-spacer> <lit-material-button variant="filled">Save</lit-material-button> </lit-material-toolbar>
Install
npm install @lit-material/toolbar @lit-material/tokensimport "@lit-material/toolbar";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-toolbar-spacer>
A flexible spacer for lit-material-toolbar: place one between two groups
of items to push everything after it to the far end of the toolbar. Has no
content of its own — it's purely a flex: 1 1 auto sizing hint.
<lit-material-toolbar>
A row of grouped controls — search fields, filter chips, buttons — above a
piece of content (a data table, a list). Lays out its slotted children
directly as flex items (wrapping by default) rather than wrapping them in
its own shadow DOM structure, so any element works as a child without a
lit-material-toolbar-item wrapper being required. Pair with
lit-material-toolbar-spacer to push trailing items to the far end.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
dense | dense | boolean | false | Tighter gap/padding, for toolbars nested inside already-dense contexts. |
Slots
| Slot | Description |
|---|---|
| default | Toolbar content: buttons, chips, text fields, lit-material-toolbar-spacer, in order. |