Bottom Navigation
Navigation Bars sind am unteren Rand der Seite fixiert und können 3 bis 5 Optionen haben. Sie werden normalerweise nur auf Mobiltelefonen verwendet. Jede Seite kann nur eine Navigation Bar haben.
Verwendung
Nur HTML ist erforderlich, damit sie wirksam wird.
Verwandte Themen
Stil
Basis-Stil
Das folgende Beispiel zeigt sowohl Icon als auch Text, was normalerweise verwendet wird, wenn nur 3 Navigationselemente vorhanden sind.
Navigationselemente mit der Klasse .mdui-bottom-nav-active sind standardmäßig aktiv.
<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><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><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>Text nur im aktiven Zustand anzeigen
Fügen Sie die Klasse .mdui-bottom-nav-text-auto zum Element <div class="mdui-bottom-nav"></div> hinzu, um diesen Effekt zu erzielen.
Wird normalerweise verwendet, wenn 4 bis 5 Navigationselemente vorhanden sind. Standardmäßig werden nur Icons angezeigt, und der Text wird angezeigt, nachdem das Navigationselement aktiv ist.
<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>Hintergrundfarbe
Fügen Sie die Klasse .mdui-color-[color] zum Element <div class="mdui-bottom-nav"></div> hinzu, um der Navigation Bar eine Hintergrundfarbe zu geben.
<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>Unten fixiert
Fügen Sie die Klasse .mdui-bottom-nav-fixed zum body-Element hinzu, um die Navigation Bar am unteren Rand der Seite zu fixieren, sodass sie nicht mit der Scrollleiste scrollt.
Diese Klasse sollte dem body-Element hinzugefügt werden, nicht dem .mdui-bottom-nav-Element, da sie zusätzlich zur Fixierung der Navigation Bar auch padding-bottom zum body hinzufügt, damit die Navigation Bar den Seiteninhalt nicht verdeckt.
Automatisch ausblenden
Fügen Sie die Klasse .mdui-bottom-nav-scroll-hide hinzu, um die Navigation Bar beim Herunterscrollen auszublenden und beim Heraufscrollen einzublenden.
- Diese Funktion funktioniert nicht, wenn die Navigation Bar nicht am unteren Rand der Seite fixiert ist.
- Wenn Elemente dynamisch generiert werden, müssen Sie
mdui.mutation()aufrufen, um sie zu initialisieren.
<body class="mdui-bottom-nav-fixed">
<div class="mdui-bottom-nav mdui-bottom-nav-scroll-hide">
......
</div>
</body>Ereignis
| Ereignisname | Ziel | Beschreibung | Parameter |
|---|---|---|---|
change.mdui.bottomNav | <div class="mdui-bottom-nav"></div> | Dieses Ereignis wird beim Wechseln der Navigationselemente ausgelöst. | event._detail.index: Index des aktivierten Navigationselements. |
CSS-Klassenliste
| Klassenname | Beschreibung |
|---|---|
.mdui-bottom-nav | Definieren Sie die Navigation Bar-Komponente. |
.mdui-bottom-nav-active | Aktivieren Sie das Navigationselement. |
.mdui-bottom-nav-text-auto | Text nur anzeigen, wenn das Navigationselement aktiv ist. |
.mdui-bottom-nav-fixed | Fixieren Sie die Navigation Bar am unteren Rand der Seite (muss dem body-Element hinzugefügt werden). |
.mdui-bottom-nav-scroll-hide | Blenden Sie die Navigation Bar beim Herunterscrollen aus und beim Heraufscrollen ein. |