Fül
Használat
- Hívás egyéni attribútumokon keresztül (ha a komponens dinamikusan jön létre, az inicializáláshoz hívni kell a
mdui.mutation()metódust) - JavaScript segítségével történő hívás
Kapcsolódó olvasmányok
Stílus
Alapstílus
Alább egy szabványos fül látható. Mobilon a szélesség 100%-át elfoglalja, és minden fül egyenlő szélességű; táblagépen/PC-n balra igazodik.
<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>
Gördíthető
Adja hozzá a .mdui-tab-scrollable osztályt a <div class="mdui-tab"> elemhez a fül vízszintes görgetésének engedélyezéséhez. Ezt gyakran használják mobil eszközökön, ha sok fül van.
<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>
Középre igazított
Adja hozzá a .mdui-tab-centered osztályt a <div class="mdui-tab"></div> elemhez a fül középre igazításához táblagépen/PC-n.
<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% szélesség
Adja hozzá a .mdui-tab-full-width osztályt a <div class="mdui-tab"></div> elemhez, hogy a fül mindig a szélesség 100%-át elfoglalja, és minden fül egyenlő szélességű legyen.
<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>
Háttérszínnel
Adja hozzá a .mdui-color-[color] osztályt a <div class="mdui-tab"></div> elemhez a fül háttérszínének beállításához.
<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>
Alapértelmezés szerint aktív fül
Adja hozzá a .mdui-tab-active osztályt az <a> elemhez, hogy az adott fül alapértelmezés szerint aktív legyen.
<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>
Használat
Hívás egyéni attribútumokkal
Ezzel a módszerrel nem kell JavaScript kódot írnia, csak adja hozzá az mdui-tab="options" attribútumot a <div class="mdui-tab"></div> elemhez a komponens aktiválásához.
Ha a komponens dinamikusan jön létre, hívni kell a mdui.mutation() metódust az inicializáláshoz.
<div class="mdui-tab" mdui-tab>
...
</div>JavaScript segítségével történő hívás
Komponens példányosítása:
// a selector egy .mdui-tab elem CSS szelektorja vagy DOM eleme
// az options a bővítmény paraméterei, lásd az alábbi paraméterlistát
var inst = new mdui.Tab(selector, options);Paraméter
| Paraméter neve | Típus | Alapértelmezett | Leírás |
|---|---|---|---|
trigger | string | click | A fülváltás kiváltásának módja.
|
loop | boolean | false | Engedélyezze-e a ciklikus váltást. Ha true, az utolsó fül aktiválásakor a next metódus meghívása visszatér az első fülhöz, az első fül aktiválásakor pedig a prev hívása az utolsó fülhöz ugrik. |
Metódus
| Metódus neve | Leírás |
|---|---|
prev() | Váltás az előző fülre |
next() | Váltás a következő fülre |
show(index) | A megadott fül megjelenítése.
|
handleUpdate() | Amikor a szülőelem szélessége megváltozik, ezt a metódust meg kell hívni az indikátor pozíciójának újraszámításához. Ha dinamikusan ad hozzá új füleket, ezt a metódust is meg kell hívni az új fülek érvénybe léptetéséhez. |
Esemény
| Esemény neve | Leírás | Célpont | Paraméterek |
|---|---|---|---|
change.mdui.tab | Az esemény a fülváltáskor váltódik ki. | <div class="mdui-tab"></div> |
|
show.mdui.tab | Az esemény akkor váltódik ki, amikor egy adott fülre váltunk. | <a></a> | event._detail.inst: példány |