Material Design Lite. Tab

Рассмотрим использование вкладок в MDL.

Классы, которые могут пригодиться при работе с вкладками.

• mdl-tabs - Контейнер для вкладки.
• mdl-js-tabs - Задаёт поведение для вкладки.
• mdl-js-ripple-effect - Эффект ripple при переключении вкладок.
• mdl-tabs__tab-bar - Контейнер для заголовков вкладок (ссылки).
• mdl-tabs__tab - Ссылка для вкладки.
• is-active - Проверяет, является ли вкладка активной.
• mdl-tabs__panel - Контейнер для панели вкладки.

Сначала создаём общий контейнер для вкладок с классами mdl-tabs mdl-js-tabs mdl-js-ripple-effect.

Затем создаём отдельные контейнеры для каждой вкладки через класс mdl-tabs__tab-bar. Внутри создаём ссылку-заголовок mdl-tabs__tab с якорем на идентификатор. Для активной ссылки используем is-active.

Содержание вкладки размещается в контейнере mdl-tabs__panel с указанием идентификатора. Также указываем активную панель через is-active.

Пример для знакомства.

<!-- MDL Tab Container -->
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
  <!-- Tab Bars -->
  <div class="mdl-tabs__tab-bar">
    <a href="#first-panel" class="mdl-tabs__tab is-active">Первая вкладка</a>
    <a href="#second-panel" class="mdl-tabs__tab">Вторая вкладка</a>
    <a href="#third-panel" class="mdl-tabs__tab">Третья вкладка</a>
  </div>

  <!-- MDL tab panels, is-active to denote currently active -->
  <div class="mdl-tabs__panel is-active" id="first-panel">
    <ul>
      <li>Барсик</li>
      <li>Мурзик</li>
      <li>Рыжик</li>
      <li>Васька</li>
    </ul>
  </div>

  <!-- MDL Tab panel 2 -->
  <div class="mdl-tabs__panel" id="second-panel">
    <ul>
      <li>Мурка</li>
      <li>Дуся</li>
      <li>Машка</li>
    </ul>
  </div>

  <!-- MDL Tab panel 3 -->
  <div class="mdl-tabs__panel" id="third-panel">
    <ul>
      <li>Бобик</li>
      <li>Шарик</li>
    </ul>
  </div>

</div>

Посмотреть примеры с вкладками

Реклама