Upgrade z 0.4.3 na 1.0.0
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.
Stačí napsat HTML kód, aby to fungovalo.
Designové zásady Material Design: Komponenty - Spodní navigační lišta
import { $ } from 'mdui';Základní styl
Zobrazit pouze ikony
Zobrazit pouze text
Zobrazit text pouze v aktivním stavu
Barva pozadí
Připevněno na spodní část stránky
Automaticky skrýt
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 <code>.mdui-bottom-nav-active</code> bude ve výchozím aktivním stavu.
Přidáním třídy <code>.mdui-bottom-nav-text-auto</code> na prvek <code><div class="mdui-bottom-nav"></div></code> 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.
Navigační položka obsahující třídu <code>.mdui-bottom-nav-active</code> bude ve výchozím aktivním stavu.
Přidáním třídy <code>.mdui-color-[<span mdui-tooltip="{content: 'název barvy'}">color</span>]</code> na prvek <code><div class="mdui-bottom-nav"></div></code> můžete nastavit barvu pozadí pro spodní navigační lištu.
Přidáním třídy <code>.mdui-bottom-nav-fixed</code> na prvek <code>body</code> 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.
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 <a href="/cs/docs/1/global#mutation"><code>mdui.mutation()</code></a>.