NavigationRailPostranní navigační lišta
Postranní navigační lišta slouží k přístupu k hlavním stránkám na tabletech a stolních počítačích.
Importujte komponenty podle potřeby:
import 'mdui/components/navigation-rail.js';
import 'mdui/components/navigation-rail-item.js';
Importujte TypeScript typy komponent podle potřeby:
import type { NavigationRail } from 'mdui/components/navigation-rail.js';
import type { NavigationRailItem } from 'mdui/components/navigation-rail-item.js';
Příklad použití: (style="position: relative" v příkladu je jen pro ukázku, při skutečném použití tento styl odstraňte.)
Nedávné
Obrázky
Knihovna
<mdui-navigation-rail value="recent" style="position: relative">
<mdui-navigation-rail-item icon="watch_later--outlined" value="recent">Nedávné</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined" value="images">Obrázky</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined" value="library">Knihovna</mdui-navigation-rail-item>
</mdui-navigation-rail>
Upozornění:
Ve výchozím nastavení používá position: fixed a automaticky přidá padding-left nebo padding-right na body, aby obsah stránky nezakryla.
V těchto dvou případech se však používá position: absolute:
- Když je atribut
contained komponenty <mdui-navigation-rail> true. Pak se padding-left nebo padding-right přidá na nadřazený prvek.
- Když se komponenta nachází uvnitř
<mdui-layout></mdui-layout>. Pak se padding-left nebo padding-right nepřidává.
Ve výchozím nastavení se postranní navigační lišta zobrazuje vlevo nebo vpravo na stránce. Pokud chcete umístit postranní navigační lištu do určeného kontejneru, můžete na komponentě <mdui-navigation-rail> přidat atribut contained. V takovém případě se postranní navigační lišta umístí relativně k nadřazenému prvku; styl position: relative je nutné na nadřazený prvek přidat ručně.
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Nedávné</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Obrázky</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Knihovna</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Obsah stránky</div>
</div>
</div>
Zdrojový kód
Nastavením atributu placement na right na komponentě <mdui-navigation-rail> zobrazíte postranní navigační lištu na pravé straně.
<div style="position: relative">
<mdui-navigation-rail placement="right" contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Nedávné</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Obrázky</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Knihovna</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Obsah stránky</div>
</div>
</div>
Zdrojový kód
Přidáním atributu divider na komponentu <mdui-navigation-rail> přidáte na postranní navigační lištu oddělovač pro odlišení od obsahu stránky.
<div style="position: relative">
<mdui-navigation-rail divider contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Nedávné</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Obrázky</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Knihovna</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Obsah stránky</div>
</div>
</div>
Zdrojový kód
Do komponenty <mdui-navigation-rail> můžete pomocí slotů top a bottom přidat prvky nahoru a dolů.
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-button-icon icon="menu" slot="top"></mdui-button-icon>
<mdui-fab lowered icon="edit--outlined" slot="top"></mdui-fab>
<mdui-button-icon icon="settings" slot="bottom"></mdui-button-icon>
<mdui-navigation-rail-item icon="watch_later--outlined">Nedávné</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Obrázky</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Knihovna</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 600px;overflow: auto">
<div style="height: 1000px">Obsah stránky</div>
</div>
</div>
Zdrojový kód
Nastavením atributu alignment komponenty <mdui-navigation-rail> můžete upravit vertikální zarovnání položek navigace.
Nedávné
Obrázky
Knihovna
začátek
střed
konec
<div class="example-alignment" style="position: relative">
<mdui-navigation-rail alignment="start" contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Nedávné</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Obrázky</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Knihovna</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 360px;overflow: auto">
<mdui-segmented-button-group value="start" selects="single">
<mdui-segmented-button value="start">začátek</mdui-segmented-button>
<mdui-segmented-button value="center">střed</mdui-segmented-button>
<mdui-segmented-button value="end">konec</mdui-segmented-button>
</mdui-segmented-button-group>
</div>
</div>
<script>
const example = document.querySelector(".example-alignment");
const navigationRail = example.querySelector("mdui-navigation-rail");
const segmentedButtonGroup = example.querySelector("mdui-segmented-button-group");
segmentedButtonGroup.addEventListener("change", (event) => {
navigationRail.alignment = event.target.value;
});
</script>
Zdrojový kód
Na komponentě <mdui-navigation-rail-item> můžete pomocí atributu icon nastavit ikonu položky navigace v neaktivním stavu a pomocí atributu active-icon nastavit ikonu položky navigace v aktivním stavu. Lze také použít sloty icon a active-icon k nastavení prvků ikony v neaktivním a aktivním stavu.
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Nedávné</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined" active-icon="image--filled">Obrázky</mdui-navigation-rail-item>
<mdui-navigation-rail-item>
Knihovna
<mdui-icon slot="icon" name="library_music--outlined"></mdui-icon>
<mdui-icon slot="active-icon" name="library_music--filled"></mdui-icon>
</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Obsah stránky</div>
</div>
</div>
Zdrojový kód
<mdui-navigation-rail-item> může používat pouze ikonu bez textu.
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-navigation-rail-item icon="watch_later--outlined"></mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined"></mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined"></mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Obsah stránky</div>
</div>
</div>
Zdrojový kód
Nastavením atributu href na komponentě <mdui-navigation-rail-item> změníte položku navigace na odkaz. Pak můžete také použít atributy související s odkazy: download, target, rel.
<div style="position: relative">
<mdui-navigation-rail divider contained>
<mdui-navigation-rail-item
href="https://www.mdui.org"
target="_blank"
icon="watch_later--outlined"
>Nedávné</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Obrázky</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Knihovna</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Obsah stránky</div>
</div>
</div>
Zdrojový kód
V komponentě <mdui-navigation-rail-item> můžete přidat odznak pomocí slotu badge.
Nedávné
99+
Obrázky
Knihovna
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-navigation-rail-item icon="watch_later--outlined">
Nedávné
<mdui-badge slot="badge">99+</mdui-badge>
</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Obrázky</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Knihovna</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Obsah stránky</div>
</div>
</div>
Zdrojový kód| Atribut | Vlastnost | Reflect | Typ | Výchozí |
|---|
icon | icon | | string | - |
Název ikony z knihovny Material Icons pro neaktivní stav. Lze také nastavit pomocí slot="icon".
|
active-icon | activeIcon | | string | - |
Název ikony z knihovny Material Icons pro aktivní stav. Lze také nastavit pomocí slot="active-icon".
|
value | value | | string | - |
Hodnota navigační položky.
|
href | href | | string | - |
Cílová URL odkazu.
Pokud je tato vlastnost nastavena, komponenta se interně vykreslí jako prvek <a> a zpřístupní se vlastnosti pro odkazy.
|
download | download | | string | - |
Soubor ke stažení.
Poznámka: Platí pouze, pokud je nastaven atribut href.
|
target | target | | '_blank' | '_parent' | '_self' | '_top' | - |
Způsob otevření odkazu. Možné hodnoty:
_blank: Otevře odkaz v novém okně nebo kartě._parent: Otevře odkaz v nadřazeném okně._self: Výchozí možnost. Otevře odkaz ve stejném okně._top: Otevře odkaz v celém okně.
Poznámka: Platí pouze, pokud je nastaven atribut href.
|
rel | rel | | 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag' | - |
Vztah mezi aktuálním dokumentem a odkazovaným dokumentem. Možné hodnoty:
alternate: Alternativní verze aktuálního dokumentu.author: Autor aktuálního dokumentu nebo článku.bookmark: Trvalý odkaz na konkrétní část dokumentu.external: Odkaz vede na externí zdroj (mimo aktuální web/doménu).help: Odkaz na související nápovědu.license: Hlavní obsah aktuálního dokumentu je pokryt licencí odkazovaného dokumentu.me: Odkaz směřuje na profil vlastníka (rel="me").next: Aktuální dokument je součástí série a odkazovaný dokument je následující v sérii.nofollow: Autor nebo vydavatel aktuálního dokumentu neschvaluje odkazovaný dokument.noreferrer: Neodesílá HTTP hlavičku Referer. Má podobný účinek jako noopener.opener: Pokud má odkaz atribut target="_blank", atribut rel="opener" určuje, zda nové okno nebo karta bude mít přístup k původnímu oknu přes window.opener.prev: Aktuální dokument je součástí série a odkazovaný dokument je předchozí v sérii.search: Odkazuje na vyhledávací zdroj pro aktuální dokument a související stránky.tag: Poskytuje štítek vhodný pro aktuální dokument (identifikovaný danou adresou).
Poznámka: Dostupné pouze při zadání atributu href.
|
autofocus | autofocus | | boolean | false |
Určuje, zda prvek získá automaticky fokus po dokončení načítání stránky.
|
tabindex | tabIndex | | number | - |
Pořadí prvku při přepínání fokusu pomocí klávesy Tab.
|
| Název | Parametry | Vrací |
|---|
click | | void |
Simuluje kliknutí myší na prvek.
|
focus | options: FocusOptions (Volitelné)
| void |
Nastaví fokus na aktuální prvek.
Lze předat objekt jako parametr s vlastnostmi:
preventScroll: Ve výchozím nastavení se po získání fokusu stránka posune tak, aby byl prvek viditelný. Pokud nechcete, aby se stránka posouvala, nastavte tuto vlastnost na true.
|
blur | | void |
Odebere fokus z aktuálního prvku.
|
| Název |
|---|
focus |
Spustí se při získání fokusu.
|
blur |
Spustí se při ztrátě fokusu.
|
| Atribut | Vlastnost | Reflect | Typ | Výchozí |
|---|
value | value | | string | - |
Hodnota aktuálně vybraného prvku <mdui-navigation-rail-item>.
|
placement | placement | | 'left' | 'right' | 'left' |
Umístění navigační lišty. Možné hodnoty:
left: Vlevo.right: Vpravo.
|
alignment | alignment | | 'start' | 'center' | 'end' | 'start' |
Způsob zarovnání prvků <mdui-navigation-rail-item>. Možné hodnoty:
start: Zarovnání nahoru.center: Zarovnání na střed.end: Zarovnání dolů.
|
contained | contained | | boolean | false |
Ve výchozím nastavení se navigační lišta zobrazuje vzhledem k prvku body. Pokud je tento atribut nastaven na true, bude se navigační lišta zobrazovat vzhledem ke svému rodičovskému prvku.
Poznámka: Při nastavení tohoto atributu je nutné na rodičovském prvku ručně nastavit styl position: relative;.
|
divider | divider | | boolean | false |
Určuje, zda se má přidat oddělovač mezi navigační lištu a obsah stránky.
|
order | order | | number | - |
Pořadí této komponenty v rámci rozvržení <mdui-layout>. Řadí se vzestupně (nižší hodnoty mají přednost). Výchozí hodnota je 0.
|
| Název |
|---|
change |
Spustí se při změně hodnoty.
|
| Název |
|---|
top |
Kontejner pro prvky nahoře.
|
bottom |
Kontejner pro prvky dole.
|
items |
Kontejner pro komponenty <mdui-navigation-rail-item>.
|
Předchozí kapitola
NavigationDrawer Boční navigační panel
Další kapitola
Radio Přepínač
