NavigationRailSzyna nawigacyjna

Szyna nawigacyjna umożliwia dostęp do głównych sekcji na tabletach i komputerach stacjonarnych.

Sposób użycia

Zaimportuj komponenty:

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

Zaimportuj typy TypeScript komponentów:

import type { NavigationRail } from 'mdui/components/navigation-rail.js';
import type { NavigationRailItem } from 'mdui/components/navigation-rail-item.js';

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

Ostatnie

Obrazy

Biblioteka

<mdui-navigation-rail value="recent" style="position: relative">
  <mdui-navigation-rail-item icon="watch_later--outlined" value="recent">Ostatnie</mdui-navigation-rail-item>
  <mdui-navigation-rail-item icon="image--outlined" value="images">Obrazy</mdui-navigation-rail-item>
  <mdui-navigation-rail-item icon="library_music--outlined" value="library">Biblioteka</mdui-navigation-rail-item>
</mdui-navigation-rail>

Uwagi:

Ten komponent domyślnie używa pozycjonowania position: fixed i automatycznie dodaje styl padding-left lub padding-right 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 atrybut contained komponentu <mdui-navigation-rail> ma wartość true. Wtedy style padding-left lub padding-right są dodawane do elementu nadrzędnego.
Gdy komponent znajduje się wewnątrz komponentu <mdui-layout></mdui-layout>. Wtedy style padding-left lub padding-right nie są dodawane.

Domyślnie szyna nawigacyjna jest wyświetlana po lewej lub prawej stronie strony względem bieżącego okna. Jeśli chcesz umieścić szynę nawigacyjną w określonym kontenerze, możesz dodać atrybut contained do komponentu <mdui-navigation-rail>. Wtedy szyna nawigacyjna będzie wyświetlana względem elementu nadrzędnego (musisz samodzielnie dodać do elementu nadrzędnego styl position: relative).

Ostatnie

Obrazy

Biblioteka

Treść strony

<div style="position: relative">
  <mdui-navigation-rail contained>
    <mdui-navigation-rail-item icon="watch_later--outlined">Ostatnie</mdui-navigation-rail-item>
    <mdui-navigation-rail-item icon="image--outlined">Obrazy</mdui-navigation-rail-item>
    <mdui-navigation-rail-item icon="library_music--outlined">Biblioteka</mdui-navigation-rail-item>
  </mdui-navigation-rail>

  <div style="height: 260px;overflow: auto">
    <div style="height: 1000px">Treść strony</div>
  </div>
</div>

Źródło

Znajdowanie się po prawej stronie

Ustawienie atrybutu placement na right na komponencie <mdui-navigation-rail> wyświetli szynę nawigacyjną po prawej stronie.

Ostatnie

Obrazy

Biblioteka

Treść strony

<div style="position: relative">
  <mdui-navigation-rail placement="right" contained>
    <mdui-navigation-rail-item icon="watch_later--outlined">Ostatnie</mdui-navigation-rail-item>
    <mdui-navigation-rail-item icon="image--outlined">Obrazy</mdui-navigation-rail-item>
    <mdui-navigation-rail-item icon="library_music--outlined">Biblioteka</mdui-navigation-rail-item>
  </mdui-navigation-rail>

  <div style="height: 260px;overflow: auto">
    <div style="height: 1000px">Treść strony</div>
  </div>
</div>

Źródło

Wyświetlanie separatora

Dodanie atrybutu divider do komponentu <mdui-navigation-rail> powoduje dodanie linii oddzielającej szynę nawigacyjną od treści strony.

Ostatnie

Obrazy

Biblioteka

Treść strony

<div style="position: relative">
  <mdui-navigation-rail divider contained>
    <mdui-navigation-rail-item icon="watch_later--outlined">Ostatnie</mdui-navigation-rail-item>
    <mdui-navigation-rail-item icon="image--outlined">Obrazy</mdui-navigation-rail-item>
    <mdui-navigation-rail-item icon="library_music--outlined">Biblioteka</mdui-navigation-rail-item>
  </mdui-navigation-rail>

  <div style="height: 260px;overflow: auto">
    <div style="height: 1000px">Treść strony</div>
  </div>
</div>

Źródło

Dodawanie elementów na górze/na dole

Możesz dodać elementy na górze i na dole komponentu <mdui-navigation-rail> za pomocą slotów top i bottom.

Ostatnie

Obrazy

Biblioteka

Treść strony

<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">Ostatnie</mdui-navigation-rail-item>
    <mdui-navigation-rail-item icon="image--outlined">Obrazy</mdui-navigation-rail-item>
    <mdui-navigation-rail-item icon="library_music--outlined">Biblioteka</mdui-navigation-rail-item>
  </mdui-navigation-rail>

  <div style="height: 600px;overflow: auto">
    <div style="height: 1000px">Treść strony</div>
  </div>
</div>

Źródło

Wyrównanie w pionie elementów nawigacji

Ustaw atrybut alignment komponentu <mdui-navigation-rail>, aby zmienić wyrównanie w pionie elementów nawigacji.

Ostatnie

Obrazy

Biblioteka

start

center

end

<div class="example-alignment" style="position: relative">
  <mdui-navigation-rail alignment="start" contained>
    <mdui-navigation-rail-item icon="watch_later--outlined">Ostatnie</mdui-navigation-rail-item>
    <mdui-navigation-rail-item icon="image--outlined">Obrazy</mdui-navigation-rail-item>
    <mdui-navigation-rail-item icon="library_music--outlined">Biblioteka</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>

Źródło

Ikona

Na komponencie <mdui-navigation-rail-item> możesz użyć atrybutu icon 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.

Ostatnie

Obrazy

Biblioteka

Treść strony

<div style="position: relative">
  <mdui-navigation-rail contained>
    <mdui-navigation-rail-item icon="watch_later--outlined">Ostatnie</mdui-navigation-rail-item>
    <mdui-navigation-rail-item icon="image--outlined" active-icon="image--filled">Obrazy</mdui-navigation-rail-item>
    <mdui-navigation-rail-item>
      Biblioteka
      <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">Treść strony</div>
  </div>
</div>

Źródło

Tylko ikona

Komponent <mdui-navigation-rail-item> może zawierać tylko ikonę, bez tekstu.

Treść strony

<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">Treść strony</div>
  </div>
</div>

Źródło

Link

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

Ostatnie

Obrazy

Biblioteka

Treść strony

<div style="position: relative">
  <mdui-navigation-rail divider contained>
    <mdui-navigation-rail-item
      href="https://www.mdui.org"
      target="_blank"
      icon="watch_later--outlined"
    >Ostatnie</mdui-navigation-rail-item>
    <mdui-navigation-rail-item icon="image--outlined">Obrazy</mdui-navigation-rail-item>
    <mdui-navigation-rail-item icon="library_music--outlined">Biblioteka</mdui-navigation-rail-item>
  </mdui-navigation-rail>

  <div style="height: 260px;overflow: auto">
    <div style="height: 1000px">Treść strony</div>
  </div>
</div>

Źródło

Badge

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

Ostatnie 99+

Obrazy

Biblioteka

Treść strony

<div style="position: relative">
  <mdui-navigation-rail contained>
    <mdui-navigation-rail-item icon="watch_later--outlined">
      Ostatnie
      <mdui-badge slot="badge">99+</mdui-badge>
    </mdui-navigation-rail-item>
    <mdui-navigation-rail-item icon="image--outlined">Obrazy</mdui-navigation-rail-item>
    <mdui-navigation-rail-item icon="library_music--outlined">Biblioteka</mdui-navigation-rail-item>
  </mdui-navigation-rail>

  <div style="height: 260px;overflow: auto">
    <div style="height: 1000px">Treść strony</div>
  </div>
</div>

Ź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)
Treść tekstowa
`icon`
Ikona
`active-icon`
Ikona dla stanu aktywnego
`badge`
Badge

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

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
`value`	`value`	`string`	-
Wartość aktualnie zaznaczonego `<mdui-navigation-rail-item>`
`placement`	`placement`	`'left' \| 'right'`	`'left'`
Pozycja szyny nawigacyjnej. Dozwolone wartości: `left`: Po lewej stronie `right`: Po prawej stronie
`alignment`	`alignment`	`'start' \| 'center' \| 'end'`	`'start'`
Wyrównanie elementów `<mdui-navigation-rail-item>`. Dozwolone wartości: `start`: Wyrównanie do góry `center`: Wyrównanie do środka `end`: Wyrównanie do dołu
`contained`	`contained`	`boolean`	`false`
Domyślnie szyna nawigacyjna jest wyświetlana względem elementu `body`. Gdy ten atrybut jest ustawiony na `true`, szyna nawigacyjna będzie wyświetlana względem swojego elementu nadrzędnego. Uwaga: Podczas ustawiania tego atrybutu należy ręcznie ustawić styl na elemencie nadrzędnym: `position: relative;`.
`divider`	`divider`	`boolean`	`false`
Określa, czy dodać separator między szyną nawigacyjną a treścią strony.
`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

Nazwa
(domyślny)
Komponent `<mdui-navigation-rail-item>`
`top`
Elementy u góry
`bottom`
Elementy na dole

Nazwa
`top`
Kontener elementów górnych
`bottom`
Kontener elementów dolnych
`items`
Kontener komponentów `<mdui-navigation-rail-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ł

NavigationDrawer Wysuwany panel nawigacyjny

Następny rozdział

Radio Przycisk radiowy

NavigationRailSzyna nawigacyjna

Sposób użycia

Przykłady

Umieszczenie w określonym kontenerze

Znajdowanie się po prawej stronie

Wyświetlanie separatora

Dodawanie elementów na górze/na dole

Wyrównanie w pionie elementów nawigacji

Ikona

Tylko ikona

Link

Badge

`mdui-navigation-rail-item` API

Właściwości

Metody

Zdarzenia

Slots

CSS Parts

Właściwości niestandardowe CSS

`mdui-navigation-rail` API

Właściwości

Zdarzenia

Slots

CSS Parts

Właściwości niestandardowe CSS