Zcela nové mdui 2 založené na Material Design 3 a Web Components bylo vydáno, přejděte na dokumentaci mdui 2.

Spodní navigační lišta

Spodní navigační lišta je připevněna na spodní část stránky a může obsahovat 3 až 5 možností. Obvykle se používá pouze na mobilních zařízeních. Každá stránka může mít pouze jednu spodní navigační lištu.

Způsob volání

Stačí napsat HTML kód, aby to fungovalo.

Související čtení

Designové zásady Material Design: Komponenty - Spodní navigační lišta

Styl

Základní styl

Níže uvedený příklad zobrazuje ikony i text zároveň; obvykle se používá, pokud jsou k dispozici pouze 3 navigační položky.

Navigační položka obsahující třídu .mdui-bottom-nav-active bude ve výchozím aktivním stavu.

Příklad

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

Zobrazit pouze ikony

Příklad

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

Zobrazit pouze text

Příklad

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

Zobrazit text pouze v aktivním stavu

Přidáním třídy .mdui-bottom-nav-text-auto na prvek <div class="mdui-bottom-nav"></div> můžete dosáhnout tohoto efektu.

Tato metoda se obvykle používá, když máte 4 až 5 navigačních položek. Ve výchozím nastavení se zobrazují pouze ikony; po aktivaci navigační položky se zobrazí i text.

Příklad

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

Barva pozadí

Přidáním třídy .mdui-color-[color] na prvek <div class="mdui-bottom-nav"></div> můžete nastavit barvu pozadí pro spodní navigační lištu.

Příklad

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

Připevněno na spodní část stránky

Přidáním třídy .mdui-bottom-nav-fixed na prvek body můžete spodní navigační lištu připevnit na spodní část stránky, aby se nepohybovala se scrollbarem.

Tuto třídu musíte přidat na prvek body, ne na prvek .mdui-bottom-nav, protože kromě přichycení spodní navigační lišty navíc přidá k body padding-bottom, aby spodní navigační lišta nepřekrývala obsah stránky.

Automaticky skrýt

Přidáním třídy .mdui-bottom-nav-scroll-hide můžete skrýt spodní navigační lištu při posouvání stránky dolů a zobrazit ji při posouvání nahoru.

Poznámka:

Pokud spodní navigační lišta není připevněna na spodní část stránky, tato funkce nebude fungovat.
Pokud je prvek dynamicky generován, musíte jej inicializovat voláním mdui.mutation().

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

Spustit

Událost

Název události	Cíl	Popis	Parametry
`change.mdui.bottomNav`	`<div class="mdui-bottom-nav"></div>`	Událost bude spuštěna při přepnutí navigační položky.	`event._detail.index`: Index aktivované navigační položky.

Seznam CSS tříd

Název třídy	Popis
`.mdui-bottom-nav`	Definuje komponentu spodní navigační lišty.
`.mdui-bottom-nav-active`	Aktivuje navigační položku.
`.mdui-bottom-nav-text-auto`	Zobrazí text na navigační liště pouze v aktivním stavu.
`.mdui-bottom-nav-fixed`	Připevní navigační lištu na spodní část stránky (musí se přidat k prvku `body`).
`.mdui-bottom-nav-scroll-hide`	Skryje spodní navigační lištu při posouvání stránky dolů a zobrazí ji při posouvání nahoru.

Boční navigační panel

Karta