Onglet
Utilisation
- Utilisation via des attributs personnalisés (si le composant est généré dynamiquement, vous devez appeler
mdui.mutation()pour l’initialiser) - Appel via JavaScript
Lecture associée
Style
Style de base
Voici un onglet standard. Sur les téléphones, il occupe 100 % de la largeur ; sur tablette/PC, il est aligné à gauche.
<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>
Défilement
Ajoutez la classe .mdui-tab-scrollable à <div class="mdui-tab"> pour permettre le défilement horizontal des onglets, utile lorsqu’il y a beaucoup d’options sur mobile.
<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>
Alignement au centre
Ajoutez la classe .mdui-tab-centered à l’élément <div class="mdui-tab"></div> pour centrer les onglets sur tablette/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>
Largeur 100 %
Ajoutez la classe .mdui-tab-full-width à l’élément <div class="mdui-tab"></div> pour faire en sorte que les onglets occupent toujours 100 % de la largeur, avec chaque onglet de même largeur.
<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>
Avec couleur d’arrière-plan
Ajoutez la classe .mdui-color-[color] à l’élément <div class="mdui-tab"></div> pour donner aux onglets une couleur d’arrière-plan.
<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>
Option active par défaut
Ajoutez la classe .mdui-tab-active à l’élément <a> pour que cette option soit active par défaut.
<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>
Utilisation
Appel via attributs
Avec cette approche, vous n’avez pas besoin d’écrire de JavaScript. Il suffit d’ajouter l’attribut mdui-tab="options" à l’élément <div class="mdui-tab"></div> pour activer le composant.
Si le composant est généré dynamiquement, vous devez appeler mdui.mutation() pour l’initialiser.
<div class="mdui-tab" mdui-tab>
...
</div>Appel via JavaScript
Instancier le composant :
// selector est le sélecteur CSS de l’élément .mdui-tab ou un élément DOM
// options sont les paramètres du plugin, voir la liste des paramètres ci-dessous
var inst = new mdui.Tab(selector, options);Paramètre
| Nom | Type | Défaut | Description |
|---|---|---|---|
trigger | string | click | Le déclenchement du changement d’onglet.
|
loop | boolean | false | Active la navigation circulaire. Si la valeur est true, lorsque le dernier onglet est actif, la méthode next reviendra au premier ; lorsque le premier onglet est actif, la méthode prev reviendra au dernier. |
Méthode
| Nom de méthode | Description |
|---|---|
prev() | Afficher l’onglet précédent. |
next() | Afficher l’onglet suivant. |
show(index) | Afficher l’onglet spécifié.
|
handleUpdate() | Lorsque la largeur du parent change, appelez cette méthode pour réajuster la position de l’indicateur. Lorsque de nouveaux onglets sont ajoutés dynamiquement, appelez cette méthode pour les prendre en compte. |
Événement
| Nom de l'événement | Description | Cible | Paramètres |
|---|---|---|---|
change.mdui.tab | Un événement est déclenché lors du changement d’onglet. | <div class="mdui-tab"></div> |
|
show.mdui.tab | Un événement est déclenché lors du passage à un onglet spécifique. | <a></a> | event._detail.inst : instance |