NavigationBarNavigační lišta

Navigační lišta slouží k rychlému přepínání mezi několika hlavními stránkami na mobilních zařízeních.

Způsob použití

Importujte komponenty podle potřeby:

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

Importujte TypeScript typy komponent podle potřeby:

import type { NavigationBar } from 'mdui/components/navigation-bar.js';
import type { NavigationBarItem } from 'mdui/components/navigation-bar-item.js';

Příklad použití: (style="position: relative" v příkladu je jen pro ukázku; v ostrém použití tento styl odstraňte.)

Položka 1

Položka 2

Položka 3

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

Upozornění:

Ve výchozím nastavení používá position: fixed a automaticky přidá padding-bottom na body, aby obsah stránky nezakryla. V těchto dvou případech se však používá position: absolute:

Když je zadán atribut scroll-target. Pak se padding-bottom přidá na prvek scroll-target.
Když se komponenta nachází uvnitř <mdui-layout></mdui-layout>. Pak se padding-bottom nepřidává.

Příklady

Stav zobrazení textového štítku

Textový štítek v navigační liště se standardně zobrazuje vždy, když jsou 3 nebo méně položek; když je více než 3 položky, zobrazí se text pouze u vybrané položky.

Položka 1

Položka 2

Položka 3

Položka 1

Položka 2

Položka 3

Položka 4

<mdui-navigation-bar value="item-1" style="position: relative">
  <mdui-navigation-bar-item icon="place" value="item-1">Položka 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">Položka 2</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="people" value="item-3">Položka 3</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">Položka 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">Položka 2</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="directions_railway" value="item-3">Položka 3</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="people" value="item-4">Položka 4</mdui-navigation-bar-item>
</mdui-navigation-bar>

Zdrojový kód

Stav zobrazení textového štítku můžete upravit nastavením atributu label-visibility na komponentě <mdui-navigation-bar>. Možné hodnoty jsou:

selected: Zobrazí text pouze u vybrané položky
labeled: Zobrazí text vždy
unlabeled: Nikdy nezobrazí text

Položka 1

Položka 2

Položka 3

vybraná

označená

neoznačená

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

<mdui-segmented-button-group value="selected" selects="single" style="margin-top: 16px">
  <mdui-segmented-button value="selected">vybraná</mdui-segmented-button>
  <mdui-segmented-button value="labeled">označená</mdui-segmented-button>
  <mdui-segmented-button value="unlabeled">neoznačená</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>

Zdrojový kód

Umístění v určeném kontejneru

Ve výchozím nastavení se navigační lišta zobrazuje dole na stránce.

Pokud chcete umístit navigační lištu do určeného kontejneru, můžete na komponentě <mdui-navigation-bar> zadat atribut scroll-target. Hodnota tohoto atributu má být CSS selektor nebo DOM prvek kontejneru s rolovatelným obsahem. V takovém případě se navigační lišta umístí relativně k nadřazenému prvku; styl position: relative; overflow: hidden je nutné na nadřazený prvek přidat ručně.

Položka 1

Položka 2

Položka 3

Obsah stránky

<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">Položka 1</mdui-navigation-bar-item>
    <mdui-navigation-bar-item icon="commute" value="item-2">Položka 2</mdui-navigation-bar-item>
    <mdui-navigation-bar-item icon="people" value="item-3">Položka 3</mdui-navigation-bar-item>
  </mdui-navigation-bar>

  <div class="example-scroll-target" style="height: 160px;overflow: auto;">
    <div style="height: 1000px">Obsah stránky</div>
  </div>
</div>

Zdrojový kód

Skrytí při rolování

Nastavením atributu scroll-behavior na hide na komponentě <mdui-navigation-bar> dosáhnete toho, že se navigační lišta skryje při rolování stránky dolů a zobrazí se při rolování nahoru.

Pomocí atributu scroll-threshold můžete nastavit, po kolika pixelech rolování se má navigační lišta začít skrývat.

Položka 1

Položka 2

Položka 3

Obsah stránky

<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">Položka 1</mdui-navigation-bar-item>
    <mdui-navigation-bar-item icon="commute" value="item-2">Položka 2</mdui-navigation-bar-item>
    <mdui-navigation-bar-item icon="people" value="item-3">Položka 3</mdui-navigation-bar-item>
  </mdui-navigation-bar>

  <div class="example-scroll-behavior" style="height: 160px;overflow: auto;">
    <div style="height: 1000px">Obsah stránky</div>
  </div>
</div>

Zdrojový kód

Ikona

Na komponentě <mdui-navigation-bar-item> se atribut icon používá k nastavení ikony položky navigace v neaktivním stavu a atribut active-icon k nastavení ikony 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.

Položka 1

Položka 2

<mdui-navigation-bar value="item-1" style="position: relative">
  <mdui-navigation-bar-item
    icon="place--outlined"
    active-icon="place"
    value="item-1"
  >Položka 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item value="item-2">
    Položka 2
    <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>

Zdrojový kód

Odkaz

Nastavením atributu href na komponentě <mdui-navigation-bar-item> změníte položku navigace na odkaz. Pak můžete také použít atributy související s odkazy: download, target, rel.

Položka 1

Položka 2

<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">Položka 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">Položka 2</mdui-navigation-bar-item>
</mdui-navigation-bar>

Zdrojový kód

Odznak

V komponentě <mdui-navigation-bar-item> můžete přidat odznak pomocí slotu badge.

Položka 1 99+

Položka 2

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

Zdrojový kód

Atribut	Vlastnost	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.

Název
(výchozí)
Text navigační položky.
`icon`
Ikona.
`active-icon`
Prvek ikony pro aktivní stav.
`badge`
Odznak.

Název
`container`
Kontejner navigační položky.
`indicator`
Indikátor.
`badge`
Odznak.
`icon`
Ikona.
`active-icon`
Ikona pro aktivní stav.
`label`
Text navigační položky.

Název
`--shape-corner-indicator`
Velikost zaoblení rohů indikátoru. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.

Atribut	Vlastnost	Typ	Výchozí
`hide`	`hide`	`boolean`	`false`
Určuje, zda je lišta skrytá.
`label-visibility`	`labelVisibility`	`'auto' \| 'selected' \| 'labeled' \| 'unlabeled'`	`'auto'`
Viditelnost textu. Možné hodnoty: `auto`: Pokud je počet položek menší nebo roven 3, text se zobrazuje vždy; pokud je počet položek větší než 3, text se zobrazuje pouze u vybrané položky. `selected`: Text se zobrazuje pouze u vybrané položky. `labeled`: Text se zobrazuje vždy. `unlabeled`: Text se nezobrazuje nikdy.
`value`	`value`	`string`	-
Hodnota aktuálně vybraného prvku `<mdui-navigation-bar-item>`.
`scroll-behavior`	`scrollBehavior`	`'hide' \| 'shrink' \| 'elevate'`	-
Chování při posouvání. Možné hodnoty: `hide`: Při posouvání se lišta skryje.
`scroll-target`	`scrollTarget`	`string \| HTMLElement \| JQ<HTMLElement>`	-
Prvek, na kterém se sledují události posouvání. Hodnotou může být CSS selektor, DOM element nebo jQuery objekt. Výchozí hodnotou je `window` (okno).
`scroll-threshold`	`scrollThreshold`	`number`	-
Vzdálenost v pixelech, o kterou musí být obsah posunut, aby se chování aktivovalo.
`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.
`show`
Spustí se na začátku zobrazování. Zobrazení lze zabránit voláním `event.preventDefault()`.
`shown`
Spustí se po dokončení animace zobrazení.
`hide`
Spustí se na začátku skrývání. Skrytí lze zabránit voláním `event.preventDefault()`.
`hidden`
Spustí se po dokončení animace skrytí.

Název
(výchozí)
Komponenty `<mdui-navigation-bar-item>`.

Název
`--shape-corner`
Velikost zaoblení rohů komponenty. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.
`--z-index`
Hodnota CSS `z-index` komponenty.

Předchozí kapitola

Menu Nabídka

Další kapitola

NavigationDrawer Boční navigační panel

NavigationBarNavigační lišta

Způsob použití

Příklady

Stav zobrazení textového štítku

Umístění v určeném kontejneru

Skrytí při rolování

Ikona

Odkaz

Odznak

`mdui-navigation-bar-item` API

Vlastnosti

Metody

Události

Slots

CSS Parts

CSS Custom Properties

`mdui-navigation-bar` API

Vlastnosti

Události

Slots

CSS Custom Properties