Toolbar

Displays a horizontal bar containing a label and action items.

See Material Design Toolbars for examples of different usages.

Main features

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

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`

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`)

Toolbar is often composed from: