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

Navigation basse

La barre de navigation inférieure est fixée au bas de la page et peut comporter 3 à 5 options. Elle est généralement utilisée uniquement sur les téléphones. Une page ne peut avoir qu’une seule barre de navigation inférieure.

Utilisation

Il suffit d’écrire du HTML pour qu’elle fonctionne.

Lecture associée

Spécifications Material Design : Composant - Navigation inférieure

Style

Style de base

L’exemple ci-dessous affiche à la fois des icônes et du texte ; il est généralement utilisé lorsqu’il n’y a que 3 éléments de navigation.

Les éléments de navigation contenant la classe .mdui-bottom-nav-active seront activés par défaut.

Exemple

<div class="mdui-bottom-nav">
  <a href="javascript:;" class="mdui-ripple mdui-bottom-nav-active">
    <i class="mdui-icon material-icons">history</i>
    <label>Recents</label>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">favorite</i>
    <label>Favorites</label>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">location_on</i>
    <label>Nearby</label>
  </a>
</div>

Afficher uniquement les icônes

Exemple

<div class="mdui-bottom-nav">
  <a href="javascript:;" class="mdui-ripple mdui-bottom-nav-active">
    <i class="mdui-icon material-icons">history</i>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">favorite</i>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">location_on</i>
  </a>
</div>

Afficher uniquement le texte

Exemple

<div class="mdui-bottom-nav">
  <a href="javascript:;" class="mdui-ripple mdui-bottom-nav-active">Recents</a>
  <a href="javascript:;" class="mdui-ripple">Favorites</a>
  <a href="javascript:;" class="mdui-ripple">Nearby</a>
</div>

Afficher le texte uniquement à l’état actif

Ajoutez la classe .mdui-bottom-nav-text-auto à l’élément <div class="mdui-bottom-nav"></div> pour obtenir cet effet.

Cette approche est généralement utilisée lorsque le nombre d’éléments de navigation est compris entre 4 et 5. Par défaut, seules les icônes sont affichées ; le texte apparaît lorsqu’un élément de navigation est activé.

Exemple

<div class="mdui-bottom-nav mdui-bottom-nav-text-auto">
  <a href="javascript:;" class="mdui-ripple mdui-bottom-nav-active">
    <i class="mdui-icon material-icons">live_tv</i>
    <label>Movies</label>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">music_note</i>
    <label>Music</label>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">book</i>
    <label>Books</label>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">library_books</i>
    <label>Newsstand</label>
  </a>
</div>

Couleur d’arrière-plan

Ajoutez la classe .mdui-color-[color] à <div class="mdui-bottom-nav"></div> pour donner une couleur d’arrière-plan à la Navigation inférieure.

Exemple

<div class="mdui-bottom-nav mdui-bottom-nav-text-auto mdui-color-brown">
  <a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white mdui-bottom-nav-active">
    <i class="mdui-icon material-icons">live_tv</i>
    <label>Movies</label>
  </a>
  <a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white">
    <i class="mdui-icon material-icons">music_note</i>
    <label>Music</label>
  </a>
  <a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white">
    <i class="mdui-icon material-icons">book</i>
    <label>Books</label>
  </a>
  <a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white">
    <i class="mdui-icon material-icons">library_books</i>
    <label>Newsstand</label>
  </a>
</div>

Épingler en bas de la page

Ajoutez la classe .mdui-bottom-nav-fixed à l’élément body pour fixer la navigation inférieure en bas de la page, sans qu’elle suive le défilement.

Cette classe doit être ajoutée à l’élément body et non à l’élément .mdui-bottom-nav, car elle ne sert pas seulement à fixer la navigation inférieure, mais aussi à ajouter un padding-bottom à body afin d’éviter qu’elle ne recouvre le contenu de la page.

Masquer automatiquement

Ajoutez la classe .mdui-bottom-nav-scroll-hide pour masquer la navigation inférieure lorsque la page défile vers le bas et l’afficher lorsque la page défile vers le haut.

Remarque :

Si la barre de navigation inférieure n’est pas fixée au bas de la page, cette fonctionnalité ne fonctionnera pas.
Si l’élément est généré dynamiquement, vous devez appeler mdui.mutation() pour l’initialiser.

<body class="mdui-bottom-nav-fixed">
  <div class="mdui-bottom-nav mdui-bottom-nav-scroll-hide">
    ......
  </div>
</body>

Exécuter

Événement

Nom de l'événement	Cible	Description	Paramètres
`change.mdui.bottomNav`	`<div class="mdui-bottom-nav"></div>`	L’événement est déclenché lorsque l’élément de navigation change.	`event._detail.index` : l’index de l’élément de navigation activé.

Classes CSS

Nom de classe	Description
`.mdui-bottom-nav`	Définir le composant de barre de navigation inférieure.
`.mdui-bottom-nav-active`	Activer un élément de navigation.
`.mdui-bottom-nav-text-auto`	Afficher le texte de la barre de navigation inférieure uniquement à l’état actif.
`.mdui-bottom-nav-fixed`	Épingler la barre de navigation inférieure en bas de la page (à ajouter à l’élément `body`).
`.mdui-bottom-nav-scroll-hide`	Masquer la barre de navigation inférieure au défilement vers le bas et l’afficher au défilement vers le haut.

Tiroir de navigation

Carte