near_me
Getting Started
keyboard_arrow_downlayers
Style
keyboard_arrow_downwidgets
Components
keyboard_arrow_downlocal_mall
Resources
keyboard_arrow_downThe new mdui 2 based on Material Design 3 and Web Components is now available. Check out the mdui 2 documentation.
Toolbar
A toolbar is a collection of horizontally arranged components that can contain elements such as text, links, buttons, and icon buttons.
Usage
The toolbar component is written in pure CSS, and takes effect simply by writing HTML code.
Color
Default is a transparent background. Add the class .mdui-color-[color] to set the background color.
Style
Basic style
The toolbar can contain:
- Text:
<span>Title</span> - Links:
<a href="#">Link</a> - Buttons:
<a href="#" class="mdui-btn">button</a> - Icon buttons:
<a href="#" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">menu</i></a> - Icons:
<i class="mdui-icon material-icons">menu</i>
Adding <div class="mdui-toolbar-spacer"></div> will push the content on both sides of the element apart.
Example
<div class="mdui-toolbar">
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">menu</i>
</a>
<span class="mdui-typo-title">Title</span>
<div class="mdui-toolbar-spacer"></div>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">search</i>
</a>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">refresh</i>
</a>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">more_vert</i>
</a>
</div>Example
<div class="mdui-toolbar mdui-color-theme">
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">menu</i>
</a>
<span class="mdui-typo-title">Title</span>
<div class="mdui-toolbar-spacer"></div>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">search</i>
</a>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">refresh</i>
</a>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">more_vert</i>
</a>
</div>