Нижняя навигация

Нижняя панель навигации фиксируется в нижней части страницы и может содержать от 3 до 5 вариантов выбора. Обычно она используется только на мобильных устройствах. На странице может быть только одна нижняя панель навигации.

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

Для использования достаточно просто написать HTML-код.

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

Стиль

Базовый стиль

В следующем примере одновременно отображаются и иконки, и текст. Обычно это используется, когда есть только 3 элемента навигации.

Элемент навигации с классом .mdui-bottom-nav-active будет активен по умолчанию.

Пример

<div class="mdui-bottom-nav">
  <a href="javascript:;" class="mdui-ripple mdui-bottom-nav-active">
    <i class="mdui-icon material-icons">history</i>
    <label>Recents</label>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">favorite</i>
    <label>Favorites</label>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">location_on</i>
    <label>Nearby</label>
  </a>
</div>

Только иконки

Пример

<div class="mdui-bottom-nav">
  <a href="javascript:;" class="mdui-ripple mdui-bottom-nav-active">
    <i class="mdui-icon material-icons">history</i>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">favorite</i>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">location_on</i>
  </a>
</div>

Только текст

Пример

<div class="mdui-bottom-nav">
  <a href="javascript:;" class="mdui-ripple mdui-bottom-nav-active">Recents</a>
  <a href="javascript:;" class="mdui-ripple">Favorites</a>
  <a href="javascript:;" class="mdui-ripple">Nearby</a>
</div>

Текст только в активном состоянии

Этот эффект достигается путем добавления класса .mdui-bottom-nav-text-auto к элементу <div class="mdui-bottom-nav"></div>.

Такой подход обычно используется при наличии 4–5 элементов навигации. По умолчанию отображаются только иконки, а текст появляется после активации элемента.

Пример

<div class="mdui-bottom-nav mdui-bottom-nav-text-auto">
  <a href="javascript:;" class="mdui-ripple mdui-bottom-nav-active">
    <i class="mdui-icon material-icons">live_tv</i>
    <label>Movies</label>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">music_note</i>
    <label>Music</label>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">book</i>
    <label>Books</label>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">library_books</i>
    <label>Newsstand</label>
  </a>
</div>

Цвет фона

Вы можете задать цвет фона нижней панели навигации, добавив класс .mdui-color-[color] к элементу <div class="mdui-bottom-nav"></div>.

Пример

<div class="mdui-bottom-nav mdui-bottom-nav-text-auto mdui-color-brown">
  <a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white mdui-bottom-nav-active">
    <i class="mdui-icon material-icons">live_tv</i>
    <label>Movies</label>
  </a>
  <a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white">
    <i class="mdui-icon material-icons">music_note</i>
    <label>Music</label>
  </a>
  <a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white">
    <i class="mdui-icon material-icons">book</i>
    <label>Books</label>
  </a>
  <a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white">
    <i class="mdui-icon material-icons">library_books</i>
    <label>Newsstand</label>
  </a>
</div>

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

Добавление класса .mdui-bottom-nav-fixed к элементу body зафиксирует нижнюю панель навигации внизу страницы, и она не будет прокручиваться.

Этот класс нужно добавлять к элементу body, а не к .mdui-bottom-nav, потому что помимо фиксации панели, он также добавляет padding-bottom для body, чтобы панель навигации не перекрывала содержимое страницы.

Автоматическое скрытие

Добавьте класс .mdui-bottom-nav-scroll-hide, чтобы скрывать нижнюю панель навигации при прокрутке страницы вниз и показывать её при прокрутке вверх.

Примечание:

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

<body class="mdui-bottom-nav-fixed">
  <div class="mdui-bottom-nav mdui-bottom-nav-scroll-hide">
    ......
  </div>
</body>

Запуск

Событие

Имя события	Цель	Описание	Параметры
`change.mdui.bottomNav`	`<div class="mdui-bottom-nav"></div>`	Это событие срабатывает при переключении элементов навигации.	`event._detail.index`: Индекс активированного элемента навигации.

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

Имя класса	Описание
`.mdui-bottom-nav`	Определяет компонент нижней панели навигации.
`.mdui-bottom-nav-active`	Делает элемент навигации активным.
`.mdui-bottom-nav-text-auto`	Заставляет панель навигации отображать текст только в активном состоянии.
`.mdui-bottom-nav-fixed`	Фиксирует панель навигации в нижней части страницы (необходимо добавить к элементу `body`).
`.mdui-bottom-nav-scroll-hide`	Скрывает нижнюю панель навигации при прокрутке страницы вниз и показывает при прокрутке вверх.

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

Карточки