NavigationBarPasek nawigacji

Pasek nawigacji umożliwia szybkie przechodzenie między kilkoma głównymi stronami na urządzeniach mobilnych.

Sposób użycia

Zaimportuj komponenty:

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

Zaimportuj typy TypeScript komponentów:

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

Przykład użycia: (Uwaga: style="position: relative" w przykładzie służy tylko do demonstracji; w produkcji usuń ten styl.)

Pozycja 1

Pozycja 2

Pozycja 3

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

Uwagi:

Ten komponent domyślnie używa pozycjonowania position: fixed i automatycznie dodaje styl padding-bottom do body, aby zapobiec zasłanianiu treści strony przez komponent. Jednak w następujących dwóch przypadkach domyślnie używane jest pozycjonowanie position: absolute:

Gdy określony jest atrybut scroll-target, styl padding-bottom jest dodawany do elementu scroll-target.
Gdy komponent znajduje się wewnątrz komponentu <mdui-layout></mdui-layout>. Wtedy styl padding-bottom nie jest dodawany.

Przykłady

Widoczność etykiety tekstowej

Etykieta tekstowa na pasku nawigacji jest domyślnie zawsze widoczna, gdy liczba elementów nawigacji jest mniejsza lub równa 3; gdy jest większa niż 3, etykieta jest widoczna tylko dla zaznaczonego stanu.

Pozycja 1

Pozycja 2

Pozycja 3

Pozycja 1

Pozycja 2

Pozycja 3

Pozycja 4

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

Źródło

Możesz dostosować widoczność etykiety tekstowej, ustawiając atrybut label-visibility na komponencie <mdui-navigation-bar>. Dozwolone wartości:

selected: Tylko dla zaznaczonego stanu
labeled: Zawsze widoczna
unlabeled: Zawsze niewidoczna

Pozycja 1

Pozycja 2

Pozycja 3

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

Źródło

Umieszczenie w określonym kontenerze

Domyślnie pasek nawigacji jest wyświetlany na dole strony względem bieżącego okna.

Jeśli chcesz umieścić pasek nawigacji w określonym kontenerze, możesz określić atrybut scroll-target na komponencie <mdui-navigation-bar>. Wartością atrybutu powinien być selektor CSS lub element DOM kontenera z przewijaną treścią. W tym przypadku pasek nawigacji będzie wyświetlany względem elementu nadrzędnego (musisz samodzielnie dodać do elementu nadrzędnego style position: relative; overflow: hidden).

Pozycja 1

Pozycja 2

Pozycja 3

Treść strony

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

  <div class="example-scroll-target" style="height: 160px;overflow: auto;">
    <div style="height: 1000px">Treść strony</div>
  </div>
</div>

Źródło

Ukrywanie podczas przewijania

Ustawienie atrybutu scroll-behavior na hide na komponencie <mdui-navigation-bar> spowoduje ukrycie paska nawigacji podczas przewijania strony w dół i pokazanie go podczas przewijania w górę.

Atrybut scroll-threshold ustawia, po przewinięciu ilu pikseli zaczyna się ukrywanie paska nawigacji.

Pozycja 1

Pozycja 2

Pozycja 3

Treść strony

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

  <div class="example-scroll-behavior" style="height: 160px;overflow: auto;">
    <div style="height: 1000px">Treść strony</div>
  </div>
</div>

Źródło

Ikona

Na komponencie <mdui-navigation-bar-item> atrybut icon służy do ustawienia ikony dla nieaktywnego stanu, a active-icon dla aktywnego stanu. Możesz również użyć slotów icon i active-icon do ustawienia elementów ikony dla stanu nieaktywnego i aktywnego.

Pozycja 1

Pozycja 2

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

Źródło

Link

Ustawienie atrybutu href na komponencie <mdui-navigation-bar-item> zmienia element nawigacji w link. Dodatkowo możesz użyć atrybutów związanych z linkami: download, target, rel.

Pozycja 1

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

Źródło

Badge

W komponencie <mdui-navigation-bar-item> możesz dodać badge za pomocą slotu badge.

Pozycja 1 99+

Pozycja 2

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

Źródło

Atrybut HTML	Właściwość JavaScript	Typ	Domyślne
`icon`	`icon`	`string`	-
Nazwa ikony Material Icons dla stanu nieaktywnego. Można również ustawić za pomocą `slot="icon"`
`active-icon`	`activeIcon`	`string`	-
Nazwa ikony Material Icons dla stanu aktywnego. Można również ustawić za pomocą `slot="active-icon"`
`value`	`value`	`string`	-
Wartość elementu nawigacyjnego
`href`	`href`	`string`	-
Docelowy adres URL łącza. Jeśli atrybut jest ustawiony, komponent jest renderowany jako element `<a>`, co umożliwia korzystanie z atrybutów dotyczących łączy.
`download`	`download`	`string`	-
Nazwa pliku do pobrania. Uwaga: Ten atrybut działa tylko wtedy, gdy ustawiono atrybut `href`.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Sposób otwarcia łącza. Dozwolone wartości: `_blank`: Otwiera w nowym oknie `_parent`: Otwiera w oknie nadrzędnym `_self`: Otwiera w bieżącej ramce `_top`: Otwiera w całym oknie Uwaga: Ten atrybut działa tylko wtedy, gdy ustawiono atrybut `href`.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Relacja między bieżącym dokumentem a dokumentem, do którego prowadzi łącze. Dozwolone wartości: `alternate`: Alternatywna wersja bieżącego dokumentu `author`: Autor bieżącego dokumentu lub artykułu `bookmark`: Stałe łącze do najbliższej sekcji nadrzędnej `external`: Dokument, do którego prowadzi łącze, nie znajduje się w tej samej witrynie co bieżący dokument `help`: Łącze do powiązanej dokumentacji pomocy `license`: Główna treść bieżącego dokumentu jest objęta prawami autorskimi dołączonego pliku `me`: Bieżący dokument reprezentuje właściciela treści, do której prowadzi łącze `next`: Bieżący dokument jest częścią sekwencji, a dokument, do którego prowadzi łącze, jest następnym dokumentem w tej sekwencji `nofollow`: Autor lub wydawca bieżącego dokumentu nie rekomenduje dokumentu, do którego prowadzi łącze `noreferrer`: Pomija nagłówek `Referer`. Efekt podobny do `noopener` `opener`: Jeśli hiperłącze utworzy kontekst przeglądania najwyższego poziomu (tj. wartość atrybutu `target` to `_blank`), tworzy podrzędny kontekst przeglądania `prev`: Bieżący dokument jest częścią sekwencji, a dokument, do którego prowadzi łącze, jest poprzednim dokumentem w tej sekwencji `search`: Zawiera łącze do zasobu umożliwiającego przeszukiwanie bieżącego pliku i powiązanych z nim stron `tag`: Zawiera znacznik (identyfikowany przez podany adres) mający zastosowanie do bieżącego dokumentu Uwaga: Dostępne tylko wtedy, gdy określono atrybut `href`.
`autofocus`	`autofocus`	`boolean`	`false`
Określa, czy element automatycznie uzyskuje fokus po załadowaniu strony.
`tabindex`	`tabIndex`	`number`	-
Określa kolejność elementu podczas nawigacji za pomocą klawiatury (przycisk Tab).

Nazwa	Parametry	Zwraca
`click`		`void`
Symuluje kliknięcie myszą na elemencie
`focus`	`options: FocusOptions` (Opcjonalny)	`void`
Przenosi fokus na bieżący element. Można przekazać obiekt jako parametr, którego właściwości obejmują: `preventScroll`: Domyślnie, po otrzymaniu fokusu przez element, strona przewinie się, aby go wyświetlić. Aby zapobiec przewijaniu strony, ustaw tę właściwość na `true`.
`blur`		`void`
Usuwa fokus z bieżącego elementu

Nazwa
`focus`
Wywoływane po otrzymaniu fokusu
`blur`
Wywoływane po utracie fokusu

Nazwa
(domyślny)
Tekst elementu nawigacyjnego
`icon`
Ikona
`active-icon`
Element ikony dla stanu aktywnego
`badge`
Badge

Nazwa
`container`
Kontener elementu nawigacyjnego
`indicator`
Wskaźnik
`badge`
Badge
`icon`
Ikona
`active-icon`
Ikona dla stanu aktywnego
`label`
Tekst elementu nawigacyjnego

Nazwa
`--shape-corner-indicator`
Wielkość zaokrąglenia rogów wskaźnika. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych

Atrybut HTML	Właściwość JavaScript	Typ	Domyślne
`hide`	`hide`	`boolean`	`false`
Określa, czy pasek nawigacji jest ukryty.
`label-visibility`	`labelVisibility`	`'auto' \| 'selected' \| 'labeled' \| 'unlabeled'`	`'auto'`
Stan widoczności tekstu. Dozwolone wartości: `auto`: Gdy liczba opcji jest mniejsza lub równa 3, tekst jest zawsze wyświetlany; gdy opcji jest więcej niż 3, tekst jest wyświetlany tylko dla stanu zaznaczonego `selected`: Tekst wyświetlany tylko w stanie zaznaczonym `labeled`: Tekst wyświetlany zawsze `unlabeled`: Tekst nigdy nie wyświetlany
`value`	`value`	`string`	-
Wartość aktualnie zaznaczonego `<mdui-navigation-bar-item>`
`scroll-behavior`	`scrollBehavior`	`'hide' \| 'shrink' \| 'elevate'`	-
Zachowanie podczas przewijania. Dozwolone wartości: `hide`: Ukrywanie podczas przewijania
`scroll-target`	`scrollTarget`	`string \| HTMLElement \| JQ<HTMLElement>`	-
Element, na którym nasłuchiwane są zdarzenia przewijania. Może to być selektor CSS, element DOM lub obiekt JQ. Domyślnie nasłuchiwane są zdarzenia przewijania okna (`window`).
`scroll-threshold`	`scrollThreshold`	`number`	-
Odległość przewinięcia w `px` wymagana do aktywacji zachowania przewijania.
`order`	`order`	`number`	-
Kolejność tego komponentu w układzie `<mdui-layout>`, sortowana od najmniejszej do największej. Domyślnie `0`.

Nazwa
`change`
Wywoływane, gdy wartość się zmieni
`show`
Wywoływane przed wyświetleniem. Można zapobiec wyświetleniu, wywołując `event.preventDefault()`
`shown`
Wywoływane po zakończeniu animacji wyświetlania
`hide`
Wywoływane przed ukryciem. Można zapobiec ukryciu, wywołując `event.preventDefault()`
`hidden`
Wywoływane po zakończeniu animacji ukrywania

Nazwa
(domyślny)
Komponent `<mdui-navigation-bar-item>`

Nazwa
`--shape-corner`
Wielkość zaokrąglenia rogów komponentu. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych
`--z-index`
Wartość CSS `z-index` komponentu

Poprzedni rozdział

Menu Menu

Następny rozdział

NavigationDrawer Wysuwany panel nawigacyjny

NavigationBarPasek nawigacji

Sposób użycia

Przykłady

Widoczność etykiety tekstowej

Umieszczenie w określonym kontenerze

Ukrywanie podczas przewijania

Ikona

Link

Badge

`mdui-navigation-bar-item` API

Właściwości

Metody

Zdarzenia

Slots

CSS Parts

Właściwości niestandardowe CSS

`mdui-navigation-bar` API

Właściwości

Zdarzenia

Slots

Właściwości niestandardowe CSS