mdui 2 est arrivé, basé sur Material Design 3 et les Web Components. Consultez la documentation de mdui 2 ici.

Onglet

Utilisation

Le plugin Headroom peut réagir au défilement de la page, par exemple en faisant disparaître la Top App Bar lorsque la page défile vers le bas, et en l'affichant lorsque la page défile vers le haut.
Appel via JavaScript

Lecture associée

Les fonctions d'<a href="/fr/docs/1/appbar#hide">auto-masquage de la Top App Bar</a> et d'<a href="/fr/docs/1/bottom_nav#auto-hide">auto-masquage de la Navigation inférieure</a> présentées précédemment sont implémentées à l'aide de ce plugin.

Style

Appel via des attributs personnalisés (si le composant est généré dynamiquement, vous devez appeler <a href="/fr/docs/1/global#mutation"><code>mdui.mutation()</code></a> pour l'initialiser)

À quelle distance depuis le haut de la page le défilement doit-il commencer à masquer l'élément.

Exemple


        <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>

Cette méthode ne nécessite pas d'écrire de JavaScript. Il suffit d'ajouter l'attribut <code>mdui-headroom="<a href="#option">options</a>"</code> à l'élément pour activer le plugin.

Classe CSS ajoutée à l'élément après l'initialisation du plugin.

Exemple


        <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>

Si le composant est généré dynamiquement, il faut appeler <a href="/fr/docs/1/global#mutation"><code>mdui.mutation()</code></a> pour l'initialiser.

Classe CSS ajoutée après fixation de l'élément.

Exemple


        <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>

Instancier le plugin :

Classe CSS ajoutée après suppression de la fixation.

Exemple


        <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>

selector est un sélecteur CSS ou un élément DOM

Exemple


        <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>

options sont les paramètres du plugin, voir la liste des paramètres ci-dessous

Exemple


        <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>

À quelle distance de défilement déclencher la disparition de l'élément.

Rendre l'élément fixe.

Exemple


        <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>

Si la valeur est un nombre, la distance de déclenchement est identique pour le défilement vers le haut et vers le bas.

Masquer l'élément.

Exemple


        <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>

Peut aussi être un objet, spécifiant respectivement les distances de déclenchement pour le défilement vers le haut et vers le bas. Exemple <code>{ down: 10, up: 5 }</code>.

Activer le plugin Headroom.

Exemple


        <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

Désactiver le plugin Headroom.

Obtenir l'état actuel de l'élément. Il existe quatre états au total (pinning, pinned, unpinning, unpinned).

<div class="mdui-tab" mdui-tab>
...
</div>

Appel via JavaScript

Déclenché au début de la fixation.

// <code>event._detail.inst</code> : instance
// Déclenché à la fin de la fixation.
var inst = new mdui.Tab(selector, options);

Exécuter

Paramètre

Nom	Type	Défaut	Description
`trigger`	`string`	`click`	Déclenché au début du masquage. Déclenché après le masquage. Retourner l’état d’ouverture actuel du menu de composition rapide. Il existe quatre états au total : `opening`, `opened`, `closing` et `closed`.
`loop`	`boolean`	`false`	L’événement est déclenché lorsque l’animation d’ouverture du menu de composition rapide commence.

Méthode

Nom de méthode	Description
`prev()`	<code>event._detail.inst</code> : instance
`next()`	L’événement est déclenché lorsque l’animation d’ouverture du menu de composition rapide est terminée.
`show(index)`	L’événement est déclenché lorsque l’animation de fermeture du menu de composition rapide commence. L’événement est déclenché lorsque l’animation de fermeture du menu de composition rapide est terminée.
`handleUpdate()`	Définir un Floating Action Button. Définir un Floating Action Button mini.

Événement

Nom de l'événement	Description	Cible	Paramètres
`change.mdui.tab`	Masquer le Floating Action Button avec une animation.	`<div class="mdui-tab"></div>`	Fixer le Floating Action Button en bas à droite. Élément externe du bouton d’action flottant avec menu de composition rapide. Icône à afficher lorsque le menu de composition rapide du bouton d’action flottant est ouvert.
`show.mdui.tab`	Élément externe du menu du bouton d’action flottant avec menu de composition rapide.	`<a></a>`	Décalage des colonnes

Classes CSS

Nom de classe	Description
`.mdui-tab`	Colonnes égales
`.mdui-tab-scrollable`	Définir la zone de saisie du champ de texte.
`.mdui-tab-centered`	Définir le message d’erreur de validation du formulaire.
`.mdui-tab-full-width`	Définir le texte d’aide du champ de texte.
`.mdui-tab-active`	<code>event._detail.inst</code> : instance

Liste en grille

Barre d’outils