Тулбар

Панель инструментов — это набор горизонтально расположенных элементов, который может содержать текст, ссылки, кнопки, кнопки с иконками и другие компоненты.

Использование

Компонент панели инструментов написан на чистом 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>

Список CSS-классов

Имя класса	Описание
`.mdui-toolbar`	Определяет панель инструментов.
`.mdui-toolbar-spacer`	Элементы по обе стороны от этого элемента будут раздвинуты в разные стороны.

Вкладки

Панель приложения