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

Верхняя панель приложения обычно располагается в верхней части страницы и может содержать такие компоненты, как панели инструментов и вкладки. На странице может быть только одна верхняя панель приложения.

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

Компонент верхней панели приложения написан на чистом CSS, для его работы достаточно написать HTML-код.

Цвет

Сама верхняя панель приложения не имеет цвета фона. Вы можете установить цвет фона для дочерних элементов верхней панели приложения (панелей инструментов, вкладок и т. д.).

Связанное чтение

Стиль

Только панель инструментов

Пример

<div class="mdui-appbar">
  <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>
    <a href="javascript:;" class="mdui-typo-headline">MDUI</a>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <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>

Только вкладки

Пример

<div class="mdui-appbar">
  <div class="mdui-tab mdui-color-theme" mdui-tab>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">web</a>
    <a href="#example3-tab2" class="mdui-ripple mdui-ripple-white">shopping</a>
    <a href="#example3-tab3" class="mdui-ripple mdui-ripple-white">videos</a>
  </div>
</div>

Панель инструментов и вкладки

Пример

<div class="mdui-appbar">
  <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>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <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-tab mdui-color-theme" mdui-tab>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">web</a>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">shopping</a>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">videos</a>
  </div>
</div>

Пример

<div class="mdui-appbar">
  <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>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <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-tab mdui-color-theme" mdui-tab>
    <a href="#example6-tab1" class="mdui-ripple mdui-ripple-white">
      <i class="mdui-icon material-icons">phone</i>
      <label>recents</label>
    </a>
    <a href="#example6-tab2" class="mdui-ripple mdui-ripple-white">
      <i class="mdui-icon material-icons">favorite</i>
      <label>favorites</label>
    </a>
    <a href="#example6-tab3" class="mdui-ripple mdui-ripple-white">
      <i class="mdui-icon material-icons">perm_contact_calendar</i>
      <label>nearby</label>
    </a>
  </div>
</div>

Прозрачный фон

Необходимо добавить класс .mdui-shadow-0, чтобы убрать тень верхней панели приложения.

Пример

<div class="mdui-appbar mdui-shadow-0">
  <div class="mdui-toolbar">
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">menu</i>
    </a>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <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>

Фиксация в верхней части страницы

Добавление класса .mdui-appbar-fixed к <div class="mdui-appbar"></div> зафиксирует верхнюю панель приложения в верхней части страницы, и она не будет прокручиваться вместе со страницей.

Чтобы верхняя панель приложения не перекрывала содержимое страницы, необходимо добавить класс к body, который добавит padding-top для body:

.mdui-appbar-with-toolbar: этот класс необходим, если верхняя панель приложения содержит панель инструментов.
.mdui-appbar-with-tab: этот класс необходим, если верхняя панель приложения содержит вкладки.
.mdui-appbar-with-tab-larger: этот класс необходим, если верхняя панель приложения содержит вкладки с иконками и текстом одновременно.

Если в верхней панели приложения есть другие элементы, кроме панелей инструментов и вкладок, вам необходимо самостоятельно добавить соответствующий padding-top для body.

Пример 1 Пример 2 Пример 3

Автоматическое скрытие верхней панели приложения

Добавление класса .mdui-appbar-scroll-hide к <div class="mdui-appbar"></div> позволяет скрывать верхнюю панель приложения при прокрутке страницы вниз и показывать её при прокрутке вверх.

Если элементы генерируются динамически, необходимо вызвать mdui.mutation() для их инициализации.

<body class="mdui-appbar-with-toolbar">
  <div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-hide">
    <div class="mdui-toolbar">
      ......
    </div>
  </div>
</body>

Запуск

Автоматическое скрытие панели инструментов в верхней панели приложения

Добавление класса .mdui-appbar-scroll-toolbar-hide к <div class="mdui-appbar"></div> позволяет скрывать панель инструментов при прокрутке страницы вниз и показывать её при прокрутке вверх, если в верхней панели приложения есть и панель инструментов, и вкладки.

Если элементы генерируются динамически, необходимо вызвать mdui.mutation() для их инициализации.

<body class="mdui-appbar-with-toolbar mdui-appbar-with-tab">
  <div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-toolbar-hide">
    <div class="mdui-toolbar">
      ......
    </div>
    <div class="mdui-tab">
      ......
    </div>
  </div>
</body>

Запуск

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

Имя класса	Описание
`.mdui-appbar`	Определяет верхнюю панель приложения.
`.mdui-appbar-fixed`	Фиксирует верхнюю панель приложения в верхней части страницы.
`.mdui-appbar-with-toolbar`	Этот класс следует добавить к `body`, если верхняя панель приложения содержит панель инструментов.
`.mdui-appbar-with-tab`	Этот класс следует добавить к `body`, если верхняя панель приложения содержит вкладки.
`.mdui-appbar-with-tab-larger`	Этот класс следует добавить к `body`, если верхняя панель приложения содержит вкладки с иконками и текстом.
`.mdui-appbar-scroll-hide`	Скрывает верхнюю панель приложения при прокрутке вниз и показывает при прокрутке вверх.
`.mdui-appbar-scroll-toolbar-hide`	Скрывает панель инструментов при прокрутке вниз и показывает при прокрутке вверх, если присутствуют и панель инструментов, и вкладки.

Тулбар

Боковая панель (Drawer)