Zakładka
Sposób użycia
- Wywołanie przez atrybuty niestandardowe (jeśli komponent jest generowany dynamicznie, należy wywołać
mdui.mutation()w celu inicjalizacji) - Wywołanie przez JavaScript
Powiązane artykuły
Styl
Podstawowy styl
Poniżej znajdują się standardowe zakładki. Na telefonach zajmują 100% szerokości, a każda opcja ma tę samą szerokość; na tabletach/PC są wyrównane do lewej.
<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>
Przewijalne
Dodaj klasę .mdui-tab-scrollable do <div class="mdui-tab">, aby umożliwić poziome przewijanie zakładek, co jest często używane na urządzeniach mobilnych przy dużej liczbie opcji.
<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>
Wyrównane do środka
Dodaj klasę .mdui-tab-centered do elementu <div class="mdui-tab"></div>, aby wyrównać zakładki do środka na tabletach/PC.
<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% szerokości
Dodaj klasę .mdui-tab-full-width do elementu <div class="mdui-tab"></div>, aby zakładki zawsze zajmowały 100% szerokości, a każda z nich miała tę samą szerokość.
<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>
Z kolorem tła
Dodaj klasę .mdui-color-[color] do elementu <div class="mdui-tab"></div>, aby nadać zakładkom kolor tła.
<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>
Domyślnie aktywne opcje
Dodaj klasę .mdui-tab-active do elementu <a>, aby ta opcja była domyślnie aktywna.
<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>
Sposób użycia
Wywołanie przez atrybuty
Korzystając z tej metody, nie trzeba pisać kodu JavaScript, wystarczy dodać atrybut mdui-tab="options" do elementu <div class="mdui-tab"></div>, aby aktywować komponent.
Jeśli komponent jest generowany dynamicznie, należy wywołać mdui.mutation() w celu inicjalizacji.
<div class="mdui-tab" mdui-tab>
...
</div>Wywołanie przez JavaScript
Instancjonowanie komponentu:
// selector to selektor CSS lub element DOM elementu .mdui-tab
// options to parametry wtyczki, zobacz listę parametrów poniżej
var inst = new mdui.Tab(selector, options);Parametr
| Nazwa parametru | Typ | Wartość domyślna | Opis |
|---|---|---|---|
trigger | string | click | Sposób wyzwalania przełączania zakładek.
|
loop | boolean | false | Czy włączyć przełączanie cykliczne. Jeśli ustawiono true, wywołanie metody next przy aktywnej ostatniej opcji spowoduje powrót do pierwszej opcji, a wywołanie prev przy aktywnej pierwszej opcji spowoduje powrót do ostatniej. |
Metoda
| Nazwa metody | Opis |
|---|---|
prev() | Przełącz do poprzedniej opcji |
next() | Przełącz do następnej opcji |
show(index) | Wyświetl określoną opcję.
|
handleUpdate() | Metodę tę należy wywołać w celu ponownego ustawienia pozycji wskaźnika, gdy zmieni się szerokość elementu nadrzędnego. Metodę tę należy również wywołać, aby nowe opcje zaczęły działać po ich dynamicznym dodaniu do zakładek. |
Zdarzenie
| Nazwa zdarzenia | Opis | Cel | Parametry |
|---|---|---|---|
change.mdui.tab | Zdarzenie wyzwalane podczas przełączania zakładek. | <div class="mdui-tab"></div> |
|
show.mdui.tab | Zdarzenie wyzwalane po przełączeniu na określoną opcję. | <a></a> | event._detail.inst: Instancja |