Nowy mdui 2 oparty na Material Design 3 i Web Components jest już dostępny, przejdź do dokumentacji mdui 2.

Dolna nawigacja

Dolny pasek nawigacji jest unieruchomiony na dole strony i może zawierać od 3 do 5 opcji. Zazwyczaj jest używany tylko na telefonach komórkowych. Na stronie może znajdować się tylko jeden dolny pasek nawigacji.

Sposób użycia

Wystarczy napisać kod HTML, aby zadziałał.

Powiązane artykuły

Wytyczne projektowe Material Design: Komponenty - Dolny pasek nawigacji

Styl

Podstawowy styl

Poniższy przykład wyświetla jednocześnie ikony i tekst, co jest zazwyczaj stosowane przy posiadaniu 3 elementów nawigacji.

Elementy nawigacji z klasą .mdui-bottom-nav-active będą domyślnie w stanie aktywnym.

Przykład

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

Wyświetlaj tylko ikony

Przykład

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

Wyświetlaj tylko tekst

Przykład

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

Wyświetlaj tekst tylko w stanie aktywnym

Dodanie klasy .mdui-bottom-nav-text-auto do elementu <div class="mdui-bottom-nav"></div> pozwala uzyskać ten efekt.

Zazwyczaj ten sposób jest stosowany, gdy mamy od 4 do 5 elementów nawigacji. Domyślnie wyświetlane są tylko ikony, a tekst pojawia się po aktywacji elementu nawigacji.

Przykład

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

Kolor tła

Dodanie klasy .mdui-color-[color] do elementu <div class="mdui-bottom-nav"></div> pozwala nadać kolor tła dolnemu paskowi nawigacji.

Przykład

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

Unieruchomiony na dole strony

Dodanie klasy .mdui-bottom-nav-fixed do elementu body pozwala unieruchomić dolny pasek nawigacji na dole strony, dzięki czemu nie przesuwa się on wraz z paskiem przewijania.

Tę klasę należy dodać do elementu body, a nie do elementu .mdui-bottom-nav, ponieważ oprócz unieruchomienia dolnego paska nawigacji, dodaje ona również padding-bottom do body, aby dolny pasek nawigacji nie zasłaniał zawartości strony.

Automatyczne ukrywanie

Dodanie klasy .mdui-bottom-nav-scroll-hide ukrywa dolny pasek nawigacji przy przewijaniu strony w dół i pokazuje go przy przewijaniu w górę.

Uwaga:

Jeśli dolny pasek nawigacji nie jest unieruchomiony na dole strony, ta funkcja nie zadziała.
Jeśli elementy są generowane dynamicznie, należy wywołać mdui.mutation() w celu inicjalizacji.

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

Uruchom

Zdarzenie

Nazwa zdarzenia	Cel	Opis	Parametry
`change.mdui.bottomNav`	`<div class="mdui-bottom-nav"></div>`	Zdarzenie wyzwalane podczas przełączania elementów nawigacji.	`event._detail.index`: Numer indeksu aktywowanego elementu nawigacji.

Lista klas CSS

Nazwa klasy	Opis
`.mdui-bottom-nav`	Definiuje komponent dolnego paska nawigacji.
`.mdui-bottom-nav-active`	Powoduje, że element nawigacji jest w stanie aktywnym.
`.mdui-bottom-nav-text-auto`	Powoduje, że pasek nawigacji wyświetla tekst tylko w stanie aktywnym.
`.mdui-bottom-nav-fixed`	Unieruchamia pasek nawigacji na dole strony (należy dodać do elementu `body`).
`.mdui-bottom-nav-scroll-hide`	Ukrywa dolny pasek nawigacji przy przewijaniu w dół i pokazuje go przy przewijaniu w górę.

Wysuwany panel nawigacyjny

Karta