Вкладки
Использование
- Вызов через пользовательские атрибуты (если компонент создается динамически, необходимо вызвать
mdui.mutation()для инициализации) - Вызов через JavaScript
Связанное чтение
Рекомендации по дизайну Material Design: Компоненты — Вкладки
Стиль
Базовый стиль
Ниже приведены стандартные вкладки. На мобильных устройствах они занимают 100% ширины, и каждая вкладка имеет одинаковую ширину; на планшетах и ПК они выравниваются по левому краю.
<div class="mdui-tab" mdui-tab>
<a href="#example1-tab1" class="mdui-ripple">web</a>
<a href="#example1-tab2" class="mdui-ripple">shopping</a>
<a href="#example1-tab3" class="mdui-ripple">images</a>
</div>
<div id="example1-tab1" class="mdui-p-a-2">web content</div>
<div id="example1-tab2" class="mdui-p-a-2">shopping content</div>
<div id="example1-tab3" class="mdui-p-a-2">images content</div>
Прокручиваемый
Добавьте класс .mdui-tab-scrollable к <div class="mdui-tab">, чтобы сделать вкладки прокручиваемыми по горизонтали. Это часто используется на мобильных устройствах при большом количестве вкладок.
<div class="mdui-tab mdui-tab-scrollable" mdui-tab>
<a href="#example2-tab1" class="mdui-ripple">web</a>
<a href="#example2-tab2" class="mdui-ripple">shopping</a>
<a href="#example2-tab3" class="mdui-ripple">videos</a>
<a href="#example2-tab4" class="mdui-ripple">images</a>
<a href="#example2-tab5" class="mdui-ripple">news</a>
<a href="#example2-tab6" class="mdui-ripple">maps</a>
<a href="#example2-tab7" class="mdui-ripple">books</a>
<a href="#example2-tab8" class="mdui-ripple">flights</a>
<a href="#example2-tab9" class="mdui-ripple">apps</a>
<a href="#example2-tab10" class="mdui-ripple">dictionary</a>
</div>
Выравнивание по центру
Добавьте класс .mdui-tab-centered к элементу <div class="mdui-tab"></div>, чтобы выровнять вкладки по центру на планшетах и ПК.
<div class="mdui-tab mdui-tab-centered" mdui-tab>
<a href="#example3-tab1" class="mdui-ripple">web</a>
<a href="#example3-tab2" class="mdui-ripple">shopping</a>
<a href="#example3-tab3" class="mdui-ripple">videos</a>
</div>
100% ширины
Добавьте класс .mdui-tab-full-width к элементу <div class="mdui-tab"></div>, чтобы вкладки всегда занимали 100% ширины, при этом каждая вкладка будет иметь одинаковую ширину.
<div class="mdui-tab mdui-tab-full-width" mdui-tab>
<a href="#example4-tab1" class="mdui-ripple">web</a>
<a href="#example4-tab2" class="mdui-ripple">shopping</a>
<a href="#example4-tab3" class="mdui-ripple">videos</a>
</div>
<div class="mdui-tab" mdui-tab>
<a href="#example5-tab1" class="mdui-ripple">
<i class="mdui-icon material-icons">phone</i>
</a>
<a href="#example5-tab2" class="mdui-ripple">
<i class="mdui-icon material-icons">favorite</i>
</a>
<a href="#example5-tab3" class="mdui-ripple">
<i class="mdui-icon material-icons">perm_contact_calendar</i>
</a>
</div>
<div class="mdui-tab" mdui-tab>
<a href="#example6-tab1" class="mdui-ripple">
<i class="mdui-icon material-icons">phone</i>
<label>recents</label>
</a>
<a href="#example6-tab2" class="mdui-ripple">
<i class="mdui-icon material-icons">favorite</i>
<label>favorites</label>
</a>
<a href="#example6-tab3" class="mdui-ripple">
<i class="mdui-icon material-icons">perm_contact_calendar</i>
<label>nearby</label>
</a>
</div>
С фоновым цветом
Добавьте класс .mdui-color-[color] к элементу <div class="mdui-tab"></div>, чтобы задать фоновый цвет для вкладок.
<div class="mdui-tab mdui-color-theme" mdui-tab>
<a href="#example7-tab1" class="mdui-ripple mdui-ripple-white">
<i class="mdui-icon material-icons">phone</i>
<label>recents</label>
</a>
<a href="#example7-tab2" class="mdui-ripple mdui-ripple-white">
<i class="mdui-icon material-icons">favorite</i>
<label>favorites</label>
</a>
<a href="#example7-tab3" class="mdui-ripple mdui-ripple-white">
<i class="mdui-icon material-icons">perm_contact_calendar</i>
<label>nearby</label>
</a>
</div>
Вкладка, активная по умолчанию
Добавьте класс .mdui-tab-active к элементу <a>, чтобы сделать эту вкладку активной по умолчанию.
<div class="mdui-tab" mdui-tab>
<a href="#example8-tab1" class="mdui-ripple">web</a>
<a href="#example8-tab2" class="mdui-tab-active mdui-ripple"
>shopping</a
>
<a href="#example8-tab3" class="mdui-ripple">images</a>
</div>
<div class="mdui-tab" mdui-tab>
<a href="#example9-tab1" class="mdui-ripple">web</a>
<a href="#example9-tab2" class="mdui-ripple" disabled>shopping</a>
<a href="#example9-tab3" class="mdui-ripple">images</a>
</div>
Использование
Вызов через атрибуты
При таком подходе не нужно писать JavaScript-код, достаточно добавить атрибут mdui-tab="options" к элементу <div class="mdui-tab"></div>, чтобы активировать компонент.
Если компонент создается динамически, необходимо вызвать mdui.mutation() для инициализации.
<div class="mdui-tab" mdui-tab>
...
</div>Вызов через JavaScript
Инициализация компонента:
// selector — это CSS-селектор или DOM-элемент для элемента .mdui-tab
// options — это параметры плагина, см. список параметров ниже
var inst = new mdui.Tab(selector, options);Параметр
| Имя параметра | Тип | По умолчанию | Описание |
|---|---|---|---|
trigger | string | click | Способ переключения вкладок.
|
loop | boolean | false | Включить ли циклическое переключение. Если true, то при вызове метода next, когда активна последняя вкладка, произойдет переход к первой, а при вызове prev, когда активна первая — к последней. |
Метод
| Имя метода | Описание |
|---|---|
prev() | Переключиться на предыдущую вкладку |
next() | Переключиться на следующую вкладку |
show(index) | Показать указанную вкладку.
|
handleUpdate() | Этот метод необходимо вызывать для пересчета положения индикатора при изменении ширины родительского элемента. Этот метод также необходимо вызывать при динамическом добавлении новых вкладок, чтобы они вступили в силу. |
Событие
| Имя события | Описание | Цель | Параметры |
|---|---|---|---|
change.mdui.tab | Событие срабатывает при переключении вкладок. | <div class="mdui-tab"></div> |
|
show.mdui.tab | Событие срабатывает при переключении на указанную вкладку. | <a></a> | event._detail.inst: Экземпляр |