Toolbar
July 31, 2019 ยท View on GitHub
Displays a horizontal bar containing a label and action items.
See Material Design Toolbars for examples of different usages.
Main features
- Flexibly composable with labels and icon buttons
- Optional compact display
- RTL (right-to-left) support
Usage
Options
Toolbar options
| Parameter | Required | Type | Default | Description |
|---|---|---|---|---|
| border | optional | Boolean | false | Set to true to add a bottom border |
| compact | optional | Boolean | false | Set to true to create a more compact Toolbar |
| fullbleed | optional | Boolean | false | Set to true to remove side padding |
| shadowDepth | optional | Number 0-5 | No shadow | Depth of the shadow |
ToolbarTitle options
| Parameter | Required | Type | Default | Description |
|---|---|---|---|---|
| center | optional | Boolean | false | Set to true to center the text |
| indent | optional | Boolean | false | Set to true to indent the text as if it would be next to an icon |
| text | either text or children | Boolean | Title text | |
| url | optional | Object with href, optionally oncreate (for Mithril 1.x) or onClick (for React) or to (for React Router) | URL location; Mithril 2.x: for in-app route linking set only use url.href and set element to m.route.Link; Mithril 1.x: for in-app route linking set oncreate : m.route.link; React: for in-app route linking use onClick and a router such as react-router-dom |
Common component options
| Parameter | Required | Type | Default | Description |
|---|---|---|---|---|
| after | optional | String, hyperscript or component | Extra content after main content; note that this content is placed right of preceding elements with a higher stacking depth | |
| before | optional | String, hyperscript or component | Extra content before main content; note that this content is placed left of subsequent elements with a lower stacking depth | |
| className | optional | String | Extra CSS class appended to pe-toolbar | |
| content | either a bar or content must be passed | String, hyperscript or component | Alternative content; replaces children | |
| element | optional | String | "div" | HTML element tag |
| events | optional | Object | Options object containing one or more standard events such as onclick (React: onClick) | |
| id | optional | String | HTML element id | |
| style | optional | Object | For setting simple style attributes | |
| tone | optional | String: "dark" or "light" | Renders the component light on dark (sets class pe-dark-tone); use "light" to locally inverse (sets class pe-light-tone) |
Composition
Toolbar is often composed from:
- Icon Button
- ToolbarTitle (see usage examples)