NavigationBarNavigációs sáv

A navigációs sáv megkönnyíti a mobilnézetű oldalak fő részei közötti váltást.

Használat

A komponensek importálása:

import 'mdui/components/navigation-bar.js';
import 'mdui/components/navigation-bar-item.js';

A komponensek TypeScript-típusainak importálása:

import type { NavigationBar } from 'mdui/components/navigation-bar.js';
import type { NavigationBarItem } from 'mdui/components/navigation-bar-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.)

1. elem

2. elem

3. elem

<mdui-navigation-bar value="item-1" style="position: relative">
  <mdui-navigation-bar-item icon="place" value="item-1">1. elem</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">2. elem</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="people" value="item-3">3. elem</mdui-navigation-bar-item>
</mdui-navigation-bar>

Figyelmeztetések:

A komponens alapértelmezés szerint position: fixed pozicionálást használ, és automatikusan padding-bottom stílust ad a body elemhez, hogy a tartalmat ne takarja el a komponens. Viszont a következő két esetben alapértelmezés szerint position: absolute pozicionálást használ:

Ha meg van adva a scroll-target attribútum. Ekkor a padding-bottom stílust a scroll-target elemre kell alkalmaznia.
Ha a komponens a <mdui-layout></mdui-layout> komponensen belül található. Ekkor nem ad hozzá padding-bottom stílust.

Példák

Szövegcímke láthatósága

A navigációs sávban a szövegcímke alapértelmezés szerint mindig megjelenik, ha a navigációs sávelemek száma legfeljebb 3; ha a navigációs sávelemek száma meghaladja a 3-at, akkor csak a kijelölt állapotú szöveg jelenik meg.

1. elem

2. elem

3. elem

1. elem

2. elem

3. elem

4. elem

<mdui-navigation-bar value="item-1" style="position: relative">
  <mdui-navigation-bar-item icon="place" value="item-1">1. elem</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">2. elem</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="people" value="item-3">3. elem</mdui-navigation-bar-item>
</mdui-navigation-bar>

<br/>

<mdui-navigation-bar value="item-1" style="position: relative">
  <mdui-navigation-bar-item icon="place" value="item-1">1. elem</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">2. elem</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="directions_railway" value="item-3">3. elem</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="people" value="item-4">4. elem</mdui-navigation-bar-item>
</mdui-navigation-bar>

Forrás

A <mdui-navigation-bar> komponensen a label-visibility attribútummal módosíthatja a szövegcímke láthatóságát. Az elérhető értékek:

selected: Csak a kijelölt állapotú szöveg jelenik meg
labeled: A szöveg mindig megjelenik
unlabeled: A szöveg soha nem jelenik meg

1. elem

2. elem

3. elem

selected

labeled

unlabeled

<mdui-navigation-bar value="item-1" label-visibility="selected" style="position: relative" class="example-label">
  <mdui-navigation-bar-item icon="place" value="item-1">1. elem</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">2. elem</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="people" value="item-3">3. elem</mdui-navigation-bar-item>
</mdui-navigation-bar>

<mdui-segmented-button-group value="selected" selects="single" style="margin-top: 16px">
  <mdui-segmented-button value="selected">selected</mdui-segmented-button>
  <mdui-segmented-button value="labeled">labeled</mdui-segmented-button>
  <mdui-segmented-button value="unlabeled">unlabeled</mdui-segmented-button>
</mdui-segmented-button-group>

<script>
  const navigationBar = document.querySelector(".example-label");
  const segmentedButtonGroup = navigationBar.nextElementSibling;

  segmentedButtonGroup.addEventListener("change", (event) => {
    navigationBar.labelVisibility = event.target.value;
  });
</script>

Forrás

Megadott tárolóban való megjelenítés

Alapértelmezés szerint a navigációs sáv alapértelmezés szerint az oldal alján jelenik meg.

Ha azt szeretné, hogy a navigációs sáv egy megadott tárolóban jelenjen meg, adja meg a scroll-target attribútumot a <mdui-navigation-bar> komponensen. Az attribútum értéke a görgethető tartalom tárolójának CSS szelektora vagy DOM eleme. Ekkor a navigációs sáv a szülőelemhez igazodva jelenik meg (a szülőelemen Önnek kell beállítania a position: relative; overflow: hidden stílust).

1. elem

2. elem

3. elem

Oldal tartalma

<div style="position: relative;overflow: hidden">
  <mdui-navigation-bar scroll-target=".example-scroll-target" value="item-1">
    <mdui-navigation-bar-item icon="place" value="item-1">1. elem</mdui-navigation-bar-item>
    <mdui-navigation-bar-item icon="commute" value="item-2">2. elem</mdui-navigation-bar-item>
    <mdui-navigation-bar-item icon="people" value="item-3">3. elem</mdui-navigation-bar-item>
  </mdui-navigation-bar>

  <div class="example-scroll-target" style="height: 160px;overflow: auto;">
    <div style="height: 1000px">Oldal tartalma</div>
  </div>
</div>

Forrás

Görgetéskor történő elrejtés

A <mdui-navigation-bar> komponensen a scroll-behavior attribútum hide értékre állításával elérheti, hogy az oldal lefelé görgetésekor a navigációs sáv elrejtődjön, felfelé görgetésekor pedig megjelenjen.

A scroll-threshold attribútummal beállíthatja, hogy hány pixel görgetése után kezdődjön el a navigációs sáv elrejtése.

1. elem

2. elem

3. elem

Oldal tartalma

<div style="position: relative;overflow: hidden">
  <mdui-navigation-bar
    scroll-behavior="hide"
    scroll-threshold="30"
    scroll-target=".example-scroll-behavior"
    value="item-1"
  >
    <mdui-navigation-bar-item icon="place" value="item-1">1. elem</mdui-navigation-bar-item>
    <mdui-navigation-bar-item icon="commute" value="item-2">2. elem</mdui-navigation-bar-item>
    <mdui-navigation-bar-item icon="people" value="item-3">3. elem</mdui-navigation-bar-item>
  </mdui-navigation-bar>

  <div class="example-scroll-behavior" style="height: 160px;overflow: auto;">
    <div style="height: 1000px">Oldal tartalma</div>
  </div>
</div>

Forrás

Ikon

A <mdui-navigation-bar-item> komponensben az icon attribútum a nem aktivált állapotú navigációs sávelem ikonjának beállítására szolgál, az active-icon attribútum pedig az aktivált állapotú navigációs sávelem 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.

1. elem

2. elem

<mdui-navigation-bar value="item-1" style="position: relative">
  <mdui-navigation-bar-item
    icon="place--outlined"
    active-icon="place"
    value="item-1"
  >1. elem</mdui-navigation-bar-item>
  <mdui-navigation-bar-item value="item-2">
    2. elem
    <mdui-icon slot="icon" name="people--outlined"></mdui-icon>
    <mdui-icon slot="active-icon" name="people"></mdui-icon>
  </mdui-navigation-bar-item>
</mdui-navigation-bar>

Forrás

Link

A <mdui-navigation-bar-item> komponensben a href attribútum beállításával a navigációs sávelem linkként is használható, és a linkhez kapcsolódó további attribútumokat is használhatja: download, target, rel.

1. elem

2. elem

<mdui-navigation-bar value="item-1" style="position: relative">
  <mdui-navigation-bar-item icon="place" href="https://www.mdui.org" target="_blank" value="item-1">1. elem</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">2. elem</mdui-navigation-bar-item>
</mdui-navigation-bar>

Forrás

Badge

A <mdui-navigation-bar-item> komponensben a badge slotban adhat hozzá badge-et.

1. elem 99+

2. elem

<mdui-navigation-bar value="item-1" style="position: relative">
  <mdui-navigation-bar-item icon="place" value="item-1">
    1. elem
    <mdui-badge slot="badge">99+</mdui-badge>
  </mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">2. elem</mdui-navigation-bar-item>
</mdui-navigation-bar>

Forrás

Attribútum	Tulajdonság	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ója `author`: Az aktuális dokumentum vagy cikk szerzője `bookmark`: Állandó hivatkozás a legközelebbi ős szakaszra `external`: A hivatkozott dokumentum nem ugyanazon a webhelyen található, mint az aktuális dokumentum `help`: Hivatkozás egy kapcsolódó súgó dokumentumra `license`: Az aktuális dokumentum fő tartalmára a hivatkozott fájl szerzői jogi licenc vonatkozik `me`: Az aktuális dokumentum a hivatkozott tartalom tulajdonosát képviseli `next`: Az aktuális dokumentum egy sorozat része, a hivatkozott dokumentum a sorozat következő dokumentuma `nofollow`: Az aktuális dokumentum szerzője vagy kiadója nem vállal felelősséget a hivatkozott fájl tartalmáért `noreferrer`: Nem tartalmaz `Referer` fejlécet. Hasonló a `noopener` hatásához `opener`: 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 kontextust `prev`: Az aktuális dokumentum egy sorozat része, a hivatkozott dokumentum a sorozat előző dokumentuma `search`: 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.

Név
(alapértelmezett)
A navigációs elem szövege.
`icon`
Ikon.
`active-icon`
Az aktív állapot ikonja.
`badge`
Jelvény.

Név
`container`
A navigációs elem konténere.
`indicator`
Jelző.
`badge`
Jelvény.
`icon`
Ikon.
`active-icon`
Az aktív állapot ikonja.
`label`
A navigációs elem szövege.

Név
`--shape-corner-indicator`
A jelző sarok lekerekítésének mérete. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.

Attribútum	Tulajdonság	Típus	Alapértelmezett
`hide`	`hide`	`boolean`	`false`
Rejtett állapotban van-e.
`label-visibility`	`labelVisibility`	`'auto' \| 'selected' \| 'labeled' \| 'unlabeled'`	`'auto'`
A szöveg láthatósági állapota. Lehetséges értékek: `auto`: Ha 3 vagy kevesebb opció van, a szöveg mindig látható; ha több mint 3 opció van, csak a kiválasztott állapot szövege látható `selected`: Csak kiválasztott állapotban látható a szöveg `labeled`: A szöveg mindig látható `unlabeled`: A szöveg soha nem látható
`value`	`value`	`string`	-
Az aktuálisan kiválasztott `<mdui-navigation-bar-item>` értéke.
`scroll-behavior`	`scrollBehavior`	`'hide' \| 'shrink' \| 'elevate'`	-
Görgetési viselkedés. Lehetséges értékek: `hide`: Elrejtés görgetéskor.
`scroll-target`	`scrollTarget`	`string \| HTMLElement \| JQ<HTMLElement>`	-
Az elem, amelynek a görgetési eseményeit figyelni kell. Az érték lehet CSS-szelektor, DOM-elem vagy JQ objektum. Alapértelmezés szerint a `window` görgetési eseményeit figyeli.
`scroll-threshold`	`scrollThreshold`	`number`	-
A görgetési művelet kiváltásához szükséges küszöbérték `px`-ben.
`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.
`show`
A megjelenítés kezdetekor aktiválódik az esemény. Az `event.preventDefault()` meghívásával megakadályozható a megjelenítés.
`shown`
A megjelenítési animáció befejezésekor aktiválódik az esemény.
`hide`
Az elrejtés kezdetekor aktiválódik az esemény. Az `event.preventDefault()` meghívásával megakadályozható az elrejtés.
`hidden`
Az elrejtési animáció befejezésekor aktiválódik az esemény.

Név
(alapértelmezett)
A `<mdui-navigation-bar-item>` komponens.

Név
`--shape-corner`
A komponens sarok lekerekítésének mérete. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.
`--z-index`
A komponens CSS `z-index` értéke.

Előző fejezet

Menu Menü

Következő fejezet

NavigationDrawer Navigációs fiók

NavigationBarNavigációs sáv

Használat

Példák

Szövegcímke láthatósága

Megadott tárolóban való megjelenítés

Görgetéskor történő elrejtés

Ikon

Link

Badge

`mdui-navigation-bar-item` API

Tulajdonságok

Metódusok

Események

Slots

CSS Parts

CSS egyéni tulajdonságok

`mdui-navigation-bar` API

Tulajdonságok

Események

Slots

CSS egyéni tulajdonságok