Toolbar is a fixed (with Fixed and Through layout types) area at the bottom of a screen that contains navigation elements. Toolbar does not have any parts, just plain links inside
Toolbar React component represents Toolbar component.
<Toolbar>
<Link>Left Link</Link>
<Link>Right Link</Link>
</Toolbar>
Renders to:
<div class="toolbar">
<div class="toolbar-inner">
<a href="#" class="link">Left Link</a>
<a href="#" class="link">Right Link</a>
</div>
</div>
<Toolbar bottom>
<Link>Left Link</Link>
<Link>Right Link</Link>
</Toolbar>
Renders to:
<div class="toolbar toolbar-bottom">
<div class="toolbar-inner">
<a href="#" class="link">Left Link</a>
<a href="#" class="link">Right Link</a>
</div>
</div>
<Toolbar tabbar>
<Link tabLink="#tab1">Tab 1</Link>
<Link tabLink="#tab2">Tab 2</Link>
</Toolbar>
Renders to:
<div class="toolbar tabbar">
<div class="toolbar-inner">
<a href="#" class="tab-link" data-tab="#tab1">Tab 1</a>
<a href="#" class="tab-link" data-tab="#tab2">Tab 2</a>
</div>
</div>
<Toolbar tabbar labels>
<Link icon="icon-1" text="Tab 1" tabLink="#tab1"></Link>
<Link icon="icon-2" text="Tab 2" tabLink="#tab2"></Link>
</Toolbar>
Renders to:
<div class="toolbar tabbar tabbar-labels">
<div class="toolbar-inner">
<a href="#" class="tab-link" data-tab="#tab1">
<i class="icon icon-1"></i>
<span class="tabbar-label">Tab 1</span>
</a>
<a href="#" class="tab-link" data-tab="#tab1">
<i class="icon icon-2"></i>
<span class="tabbar-label">Tab 2</span>
</a>
</div>
</div>
<Toolbar tabbar scrollable>
<Link tabLink="#tab1">Tab 1</Link>
<Link tabLink="#tab2">Tab 2</Link>
</Toolbar>
Renders to:
<div class="toolbar tabbar tabbar-scrollable">
<div class="toolbar-inner">
<a href="#" class="tab-link" data-tab="#tab1">Tab 1</a>
<a href="#" class="tab-link" data-tab="#tab2">Tab 2</a>
</div>
</div>
Toolbar React component (<Toolbar>) has additional slots for custom elements:
<Toolbar
beforeInnerSlot={<div>Before Inner</div>}
afterInnerSlot={<div>After Inner</div>}
>
<Link>Left Link</Link>
<Link>Right Link</Link>
</Toolbar>
Renders to:
<div class="toolbar">
<div>Before Inner</div>
<div class="toolbar-inner">
<a href="#" class="link">Left Link</a>
<a href="#" class="link">Right Link</a>
</div>
<div>After Inner</div>
</div>
Prop | Type | Description |
---|---|---|
bottom | boolean | Defines whether the Toolbar should be on bottom or not (Material theme only) |
tabbar | boolean | Defines whether the Toolbar is also a Tab Bar |
labels | boolean | Enables Tab Bar with labels (affects only when tabbar: true ) |
scrollable | boolean | Enables scrollable Tab Bar (affects only when tabbar: true ) |
theme | string | Toolbar theme color. One of default colors |
layout | string | Toolbar layout theme. One of default layout themes |