È disponibile il nuovo mdui 2 basato su Material Design 3 e Web Components, vai alla documentazione di mdui 2.

Navigazione inferiore

La barra di navigazione inferiore è fissata nella parte inferiore della pagina e può avere da 3 a 5 opzioni. Solitamente viene utilizzata solo su dispositivi mobili. Ogni pagina può avere una sola barra di navigazione inferiore.

Modalità d'uso

Basta scrivere l'HTML per renderla effettiva.

Letture correlate

Linee guida di Material Design: Componenti - Navigation bar

Stile

Stile di base

L'esempio seguente mostra sia icone che testo, solitamente utilizzato quando ci sono solo 3 voci di navigazione.

La voce di navigazione con la classe .mdui-bottom-nav-active sarà attiva per impostazione predefinita.

Esempio

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

Mostra solo icone

Esempio

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

Mostra solo testo

Esempio

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

Mostra il testo solo nello stato attivo

All'elemento <div class="mdui-bottom-nav"></div> aggiungendo la classe .mdui-bottom-nav-text-auto, è possibile ottenere questo effetto.

Di solito questo metodo viene utilizzato quando ci sono da 4 a 5 voci di navigazione. Per impostazione predefinita vengono mostrate solo le icone e il testo viene mostrato dopo aver attivato la voce di navigazione.

Esempio

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

Colore di sfondo

All'elemento <div class="mdui-bottom-nav"></div> aggiungendo la classe .mdui-color-[colore], è possibile assegnare un colore di sfondo alla barra di navigazione inferiore.

Esempio

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

Fissato nella parte inferiore della pagina

Aggiungendo la classe .mdui-bottom-nav-fixed all'elemento body, è possibile fissare la barra di navigazione inferiore nella parte inferiore della pagina, senza che scorra con la barra di scorrimento.

Questa classe deve essere aggiunta all'elemento body, non all'elemento .mdui-bottom-nav, perché oltre a fissare la barra di navigazione inferiore, aggiunge anche un padding-bottom al body per evitare che la barra di navigazione inferiore copra il contenuto della pagina.

Nascondi automaticamente

Aggiungendo la classe .mdui-bottom-nav-scroll-hide, la barra di navigazione inferiore verrà nascosta quando la pagina scorre verso il basso e mostrata quando la pagina scorre verso l'alto.

Nota:

Se la barra di navigazione inferiore non è fissata nella parte inferiore della pagina, questa funzione non avrà effetto.
Se l'elemento è generato dinamicamente, è necessario chiamare mdui.mutation() per l'inizializzazione.

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

Esegui

Evento

Nome evento	Target	Descrizione	Parametri
`change.mdui.bottomNav`	`<div class="mdui-bottom-nav"></div>`	Questo evento viene attivato quando si cambia voce di navigazione.	`event._detail.index`: l'indice della voce di navigazione attivata.

Elenco classi CSS

Nome classe	Descrizione
`.mdui-bottom-nav`	Definisce il componente della barra di navigazione inferiore.
`.mdui-bottom-nav-active`	Rende attiva la voce di navigazione.
`.mdui-bottom-nav-text-auto`	Fa sì che la barra di navigazione mostri il testo solo nello stato attivo.
`.mdui-bottom-nav-fixed`	Fissa la barra di navigazione nella parte inferiore della pagina (deve essere aggiunta all'elemento `body`).
`.mdui-bottom-nav-scroll-hide`	Nasconde la barra di navigazione inferiore quando la pagina scorre verso il basso e la mostra quando scorre verso l'alto.

Navigation Drawer

Card