Панель инструментов — это набор горизонтально расположенных элементов, который может содержать текст, ссылки, кнопки, кнопки с иконками и другие компоненты.
Компонент панели инструментов написан на чистом CSS, для его работы достаточно написать HTML-код.
По умолчанию фон прозрачен; добавление класса .mdui-color-[color] позволяет задать цвет фона.
В панели инструментов можно разместить:
<span>Title</span><a href="#">Link</a><a href="#" class="mdui-btn">button</a><a href="#" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">menu</i></a><i class="mdui-icon material-icons">menu</i>Добавление <div class="mdui-toolbar-spacer"></div> раздвинет содержимое по обе стороны от этого элемента.
<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><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>