A Material Design 3 és Web Components alapú új mdui 2 már elérhető, tekintse meg az mdui 2 dokumentációját.

Alsó navigáció

Az alsó navigációs sáv az oldal alján van rögzítve, és 3–5 opciót tartalmazhat. Jellemzően csak mobiltelefonokon használják. Egy oldalon csak egy alsó navigációs sáv lehet.

Használat

A hatás eléréséhez csak HTML kódot kell írni.

Kapcsolódó olvasmányok

Material Design tervezési irányelvek: Komponensek - Alsó navigációs sáv

Stílus

Alapstílus

Az alábbi példa egyszerre jeleníti meg az ikont és a szöveget, és általában akkor használatos, ha csak 3 navigációs elem van.

A .mdui-bottom-nav-active osztályt tartalmazó navigációs elem alapértelmezés szerint aktív lesz.

Példa

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

Csak ikonok megjelenítése

Példa

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

Csak szöveg megjelenítése

Példa

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

Szöveg megjelenítése csak aktív állapotban

A hatás eléréséhez adja hozzá a .mdui-bottom-nav-text-auto osztályt a <div class="mdui-bottom-nav"></div> elemhez.

Ezt a módszert általában akkor használják, ha 4-5 navigációs elem van. Alapértelmezés szerint csak az ikonok jelennek meg, a szöveg pedig a navigációs elem aktiválása után látható.

Példa

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

Háttérszín

A .mdui-color-[color] osztály hozzáadásával a <div class="mdui-bottom-nav"></div> elemhez háttérszínt adhat az alsó navigációs sávnak.

Példa

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

Rögzítés az oldal aljához

A .mdui-bottom-nav-fixed osztály hozzáadása a body elemhez rögzíti az alsó navigációs sávot az oldal alján, így az nem gördül az oldallal együtt.

Ezt az osztályt a body elemhez kell adni, nem pedig a .mdui-bottom-nav elemhez, mert az alsó navigációs sáv rögzítése mellett padding-bottom értéket is ad a body elemnek, így az alsó navigációs sáv nem takarja el az oldal tartalmát.

Automatikus elrejtés

A .mdui-bottom-nav-scroll-hide osztály hozzáadásával elrejtheti az alsó navigációs sávot lefelé görgetéskor, és megjelenítheti felfelé görgetéskor.

Megjegyzés:

Ha az alsó navigációs sáv nincs rögzítve az oldal alján, ez a funkció nem fog működni.
Ha az elemek dinamikusan jönnek létre, a mdui.mutation() függvényt kell meghívni az inicializáláshoz.

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

Futtatás

Esemény

Esemény neve	Célpont	Leírás	Paraméterek
`change.mdui.bottomNav`	`<div class="mdui-bottom-nav"></div>`	Ez az esemény a navigációs elemek váltásakor váltódik ki.	`event._detail.index`: Az aktivált navigációs elem indexe.

CSS osztályok listája

Osztálynév	Leírás
`.mdui-bottom-nav`	Alsó navigációs sáv komponens definiálása.
`.mdui-bottom-nav-active`	Navigációs elem aktív állapotba helyezése.
`.mdui-bottom-nav-text-auto`	Szöveg megjelenítése a navigációs sávban csak aktív állapotban.
`.mdui-bottom-nav-fixed`	Az alsó navigációs sáv rögzítése az oldal aljához (a `body` elemhez kell adni).
`.mdui-bottom-nav-scroll-hide`	Alsó navigációs sáv elrejtése lefelé görgetéskor, megjelenítése felfelé görgetéskor.

Navigációs fiók

Kártya