Toolbar component that is positioned at the bottom of the page. Since bottom toolbars are very versatile elements, ons-bottom-toolbar does not provide any specific layout syntax for its children. Modifiers or custom CSS must be used.
<ons-bottom-toolbar>
Content
</ons-bottom-toolbar>Attributes are added directly to the element. You can do this in HTML or JS.
HTML: <ons-bottom-toolbar someAttribute="true" anotherAttribute><ons-bottom-toolbar>
JS: document.querySelector('ons-bottom-toolbar').setAttribute('someAttribute', 'true')
| Name | Type | Description |
|---|---|---|
| modifier | String | The appearance of the toolbar. Optional. |
Modifiers are set in the modifier attribute. To use more than one, separate them by spaces. For example:
<ons-bottom-toolbar modifier="transparent
aligned"><ons-bottom-toolbar>.
| Name | Description |
|---|---|
| transparent | Make the toolbar transparent. |
| aligned |
Vertically aligns its children and applies flexbox for block elements. justify-content CSS rule can be used to change horizontal align.
|
If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.
For bug reports and feature requests use our GitHub Issues page.