NavigationRailNavigációs sín
A navigációs sín táblagépen és asztali nézetben biztosít hozzáférést a fő oldalakhoz.
A komponensek importálása:
import 'mdui/components/navigation-rail.js';
import 'mdui/components/navigation-rail-item.js';
A komponensek TypeScript-típusainak importálása:
import type { NavigationRail } from 'mdui/components/navigation-rail.js';
import type { NavigationRailItem } from 'mdui/components/navigation-rail-item.js';
Példa: (A példában szereplő style="position: relative" csak a bemutatás miatt szükséges, valós használatkor távolítsa el ezt a stílust.)
Legutóbbi
Képek
Könyvtár
<mdui-navigation-rail value="recent" style="position: relative">
<mdui-navigation-rail-item icon="watch_later--outlined" value="recent">Legutóbbi</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined" value="images">Képek</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined" value="library">Könyvtár</mdui-navigation-rail-item>
</mdui-navigation-rail>
Figyelmeztetések:
A komponens alapértelmezés szerint position: fixed pozicionálást használ, és automatikusan padding-left vagy padding-right stílust ad a body elemhez, hogy a tartalmat ne takarja el ez a komponens.
Viszont a következő két esetben alapértelmezés szerint position: absolute pozicionálást használ:
- Ha a
<mdui-navigation-rail> komponens contained attribútumának értéke true. Ekkor a szülőelemhez adja hozzá a padding-left vagy padding-right stílust.
- Ha a
<mdui-layout></mdui-layout> komponensen belül található. Ekkor nem ad hozzá padding-left vagy padding-right stílust.
Alapértelmezés szerint a navigációs sín az aktuális ablak méretéhez igazodva jelenik meg az oldal bal vagy jobb oldalán. Ha azt szeretné, hogy a navigációs sín egy megadott tárolóban jelenjen meg, adja hozzá a contained attribútumot a <mdui-navigation-rail> komponenshez, ekkor a navigációs sín a szülőeleméhez igazodva jelenik meg (a szülőelemen position: relative stílust kell beállítani).
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Legutóbbi</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Képek</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Könyvtár</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Oldal tartalma</div>
</div>
</div>
Forrás
A <mdui-navigation-rail> komponensen a placement attribútum right értékre állításával a navigációs sín a jobb oldalon jelenik meg.
<div style="position: relative">
<mdui-navigation-rail placement="right" contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Legutóbbi</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Képek</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Könyvtár</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Oldal tartalma</div>
</div>
</div>
Forrás
A divider attribútummal elválasztó vonalat jeleníthet meg a navigációs sín mellett, így jobban elkülönül az oldal tartalmától.
<div style="position: relative">
<mdui-navigation-rail divider contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Legutóbbi</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Képek</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Könyvtár</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Oldal tartalma</div>
</div>
</div>
Forrás
A <mdui-navigation-rail> komponensen belül a top és bottom slot-ok segítségével adhat hozzá elemeket a tetejéhez és aljához.
<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">Legutóbbi</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Képek</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Könyvtár</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 600px;overflow: auto">
<div style="height: 1000px">Oldal tartalma</div>
</div>
</div>
Forrás
A <mdui-navigation-rail> komponens alignment attribútumával módosíthatja a navigációs elemek függőleges igazítását.
Legutóbbi
Képek
Könyvtár
start
center
end
<div class="example-alignment" style="position: relative">
<mdui-navigation-rail alignment="start" contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Legutóbbi</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Képek</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Könyvtár</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">start</mdui-segmented-button>
<mdui-segmented-button value="center">center</mdui-segmented-button>
<mdui-segmented-button value="end">end</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>
Forrás
A <mdui-navigation-rail-item> komponensben az icon attribútum a nem aktivált állapotú navigációs sínelem ikonjának beállítására szolgál, az active-icon attribútum pedig az aktivált állapotú navigációs sínelem ikonjának beállítására. Az icon és active-icon slotokon keresztül is beállíthatja a nem aktivált és aktivált állapot ikonelemeit.
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Legutóbbi</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined" active-icon="image--filled">Képek</mdui-navigation-rail-item>
<mdui-navigation-rail-item>
Könyvtár
<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">Oldal tartalma</div>
</div>
</div>
Forrás
A <mdui-navigation-rail-item> komponens használható csak ikonnal, szöveg nélkül is.
<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">Oldal tartalma</div>
</div>
</div>
Forrás
A <mdui-navigation-rail-item> komponensben a href attribútum beállításával a navigációs sínelem linkként is használható, és a linkhez kapcsolódó további attribútumokat is használhatja: 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"
>Legutóbbi</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Képek</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Könyvtár</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Oldal tartalma</div>
</div>
</div>
Forrás
A <mdui-navigation-rail-item> komponensben a badge slotban adhat hozzá badge-et.
Legutóbbi
99+
Képek
Könyvtár
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-navigation-rail-item icon="watch_later--outlined">
Legutóbbi
<mdui-badge slot="badge">99+</mdui-badge>
</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Képek</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Könyvtár</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Oldal tartalma</div>
</div>
</div>
Forrás| Attribútum | Tulajdonság | Reflect | Típus | Alapértelmezett |
|---|
icon | icon | | string | - |
A nem aktív állapot Material Icons ikonjának neve. Beállítható a slot="icon" segítségével is.
|
active-icon | activeIcon | | string | - |
Az aktív állapot Material Icons ikonjának neve. Beállítható a slot="active-icon" segítségével is.
|
value | value | | string | - |
A navigációs elem értéke.
|
href | href | | string | - |
A hivatkozás cél URL-je.
Ha ez a tulajdonság meg van adva, a komponens belsőleg <a> elemként renderelődik, és használhatók lesznek a hivatkozásokhoz kapcsolódó attribútumok.
|
download | download | | string | - |
A letöltési hivatkozás célja.
Megjegyzés: Csak akkor érvényes, ha a href attribútum meg van adva.
|
target | target | | '_blank' | '_parent' | '_self' | '_top' | - |
A hivatkozás megnyitásának módja. A lehetséges értékek:
_blank: Új ablakban nyitja meg a hivatkozást_parent: A szülő keretben nyitja meg a hivatkozást_self: Alapértelmezett. Az aktuális keretben nyitja meg a hivatkozást_top: A teljes ablakban nyitja meg a hivatkozást
Megjegyzés: Csak akkor érvényes, ha a href attribútum meg van adva.
|
rel | rel | | 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag' | - |
Az aktuális dokumentum és a hivatkozott dokumentum közötti kapcsolat. Lehetséges értékek:
alternate: Az aktuális dokumentum alternatív verziójaauthor: Az aktuális dokumentum vagy cikk szerzőjebookmark: Állandó hivatkozás a legközelebbi ős szakaszraexternal: A hivatkozott dokumentum nem ugyanazon a webhelyen található, mint az aktuális dokumentumhelp: Hivatkozás egy kapcsolódó súgó dokumentumralicense: Az aktuális dokumentum fő tartalmára a hivatkozott fájl szerzői jogi licenc vonatkozikme: Az aktuális dokumentum a hivatkozott tartalom tulajdonosát képviselinext: Az aktuális dokumentum egy sorozat része, a hivatkozott dokumentum a sorozat következő dokumentumanofollow: Az aktuális dokumentum szerzője vagy kiadója nem vállal felelősséget a hivatkozott fájl tartalmáértnoreferrer: Nem tartalmaz Referer fejlécet. Hasonló a noopener hatásáhozopener: Ha a hiperhivatkozás egy legfelső szintű böngészési kontextust hoz létre (azaz a target attribútum értéke _blank), akkor létrehoz egy segéd böngészési kontextustprev: Az aktuális dokumentum egy sorozat része, a hivatkozott dokumentum a sorozat előző dokumentumasearch: Erőforrás-hivatkozást biztosít, amely az aktuális fájl és kapcsolódó oldalainak keresésére használhatótag: Az aktuális dokumentumra alkalmazható címkét biztosít (amelyet a megadott cím azonosít)
Megjegyzés: Csak akkor használható, ha a href attribútum meg van adva.
|
autofocus | autofocus | | boolean | false |
Automatikusan fókuszt kapjon-e betöltődés után.
|
tabindex | tabIndex | | number | - |
Az elem sorszáma a Tab billentyűvel történő navigálás során.
|
| Név | Paraméterek | Visszatérési érték |
|---|
click | | void |
Egérkattintás szimulálása az elemen.
|
focus | options: FocusOptions (Opcionális)
| void |
Fókusz állítása az aktuális elemre.
Egy objektum is átadható paraméterként, a következő tulajdonságokkal:
preventScroll: Alapértelmezés szerint a fókusz elnyerése után a böngésző az elemre görget. Ha ezt a tulajdonságot true-ra állítja, a görgetés elmarad.
|
blur | | void |
Fókusz eltávolítása az aktuális elemről.
|
| Név |
|---|
focus |
Fókusz elnyerésekor aktiválódik.
|
blur |
Fókusz elvesztésekor aktiválódik.
|
| Attribútum | Tulajdonság | Reflect | Típus | Alapértelmezett |
|---|
value | value | | string | - |
Az aktuálisan kiválasztott <mdui-navigation-rail-item> értéke.
|
placement | placement | | 'left' | 'right' | 'left' |
A navigációs sín pozíciója. Lehetséges értékek:
left: Bal oldalright: Jobb oldal
|
alignment | alignment | | 'start' | 'center' | 'end' | 'start' |
A <mdui-navigation-rail-item> elemek igazítása. Lehetséges értékek:
start: Felülre igazítvacenter: Középre igazítvaend: Alulra igazítva
|
contained | contained | | boolean | false |
Alapértelmezés szerint a navigációs sín a body elemhez képest jelenik meg. Ha ez az attribútum true-ra van állítva, a navigációs sín a szülőeleméhez képest jelenik meg.
Megjegyzés: Az attribútum beállításakor manuálisan be kell állítani a szülőelemen a position: relative; stílust.
|
divider | divider | | boolean | false |
Elválasztó legyen-e a navigációs sín és az oldal tartalma között.
|
order | order | | number | - |
A komponens sorrendje a <mdui-layout> elemen belül, növekvő sorrendben. Alapértelmezett érték: 0.
|
| Név |
|---|
change |
Az érték változásakor aktiválódik.
|
| Név |
|---|
top |
A felső elemek konténere.
|
bottom |
Az alsó elemek konténere.
|
items |
A <mdui-navigation-rail-item> komponensek konténere.
|
Előző fejezet
NavigationDrawer Navigációs fiók
Következő fejezet
Radio Rádiógomb
