NavigationRail
La Navigation Rail offre l'accesso a diverse pagine principali su tablet e computer desktop.
Importa i componenti:
import 'mdui/components/navigation-rail.js';
import 'mdui/components/navigation-rail-item.js';
Importa i tipi TypeScript:
import type { NavigationRail } from 'mdui/components/navigation-rail.js';
import type { NavigationRailItem } from 'mdui/components/navigation-rail-item.js';
Esempio: (Nota: lo stile position: relative nell'esempio è solo a scopo dimostrativo. Rimuovilo nell'uso effettivo.)
Recenti
Immagini
Libreria
<mdui-navigation-rail value="recent" style="position: relative">
<mdui-navigation-rail-item icon="watch_later--outlined" value="recent">Recenti</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined" value="images">Immagini</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined" value="library">Libreria</mdui-navigation-rail-item>
</mdui-navigation-rail>
Note:
Per impostazione predefinita, questo componente usa position: fixed e aggiunge automaticamente padding-left o padding-right al body per evitare che il contenuto venga oscurato.
Tuttavia, usa position: absolute nei seguenti casi:
- Quando la proprietà
contained del componente <mdui-navigation-rail> è true. In questo caso, aggiunge lo stile padding-left o padding-right all'elemento padre.
- Quando si trova all'interno del componente
<mdui-layout></mdui-layout>. In questo caso, non aggiunge lo stile padding-left o padding-right.
Per impostazione predefinita, la Navigation Rail viene visualizzata sul lato sinistro o destro della finestra corrente. Per posizionarla all'interno di un contenitore, aggiungi l'attributo contained al componente <mdui-navigation-rail>. Questo la posiziona rispetto all'elemento padre (devi aggiungere manualmente lo stile position: relative all'elemento padre).
Recenti
Immagini
Libreria
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Recenti</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Immagini</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Libreria</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Contenuto della pagina</div>
</div>
</div>
Sorgente
Imposta l'attributo placement del componente <mdui-navigation-rail> su right per visualizzare la Navigation Rail a destra.
Recenti
Immagini
Libreria
<div style="position: relative">
<mdui-navigation-rail placement="right" contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Recenti</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Immagini</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Libreria</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Contenuto della pagina</div>
</div>
</div>
Sorgente
Aggiungi l'attributo divider al componente <mdui-navigation-rail> per mostrare un divider nella Navigation Rail e distinguerla dal contenuto della pagina.
Recenti
Immagini
Libreria
<div style="position: relative">
<mdui-navigation-rail divider contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Recenti</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Immagini</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Libreria</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Contenuto della pagina</div>
</div>
</div>
Sorgente
All'interno del componente <mdui-navigation-rail>, puoi utilizzare gli slot top e bottom per aggiungere elementi in alto e in basso.
Recenti
Immagini
Libreria
<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">Recenti</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Immagini</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Libreria</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 600px;overflow: auto">
<div style="height: 1000px">Contenuto della pagina</div>
</div>
</div>
Sorgente
Imposta l'attributo alignment del componente <mdui-navigation-rail> per modificare l'allineamento verticale degli elementi della Navigation Rail.
Recenti
Immagini
Libreria
inizio
centro
fine
<div class="example-alignment" style="position: relative">
<mdui-navigation-rail alignment="start" contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Recenti</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Immagini</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Libreria</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">inizio</mdui-segmented-button>
<mdui-segmented-button value="center">centro</mdui-segmented-button>
<mdui-segmented-button value="end">fine</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>
Sorgente
Usa l'attributo icon sul componente <mdui-navigation-rail-item> per impostare l'icona per lo stato inattivo dell'elemento della Navigation Rail. L'attributo active-icon imposta l'icona per lo stato attivo. Oppure, usa gli slot icon e active-icon per gli stati inattivo e attivo rispettivamente.
Recenti
Immagini
Libreria
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Recenti</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined" active-icon="image--filled">Immagini</mdui-navigation-rail-item>
<mdui-navigation-rail-item>
Libreria
<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">Contenuto della pagina</div>
</div>
</div>
Sorgente
Il componente <mdui-navigation-rail-item> può mostrare icone senza etichette.
<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">Contenuto della pagina</div>
</div>
</div>
Sorgente
Usa l'attributo href sul componente <mdui-navigation-rail-item> per trasformare l'elemento della Navigation Rail in un link. Gli attributi download, target e rel sono disponibili per le normali funzionalità dei link.
Recenti
Immagini
Libreria
<div style="position: relative">
<mdui-navigation-rail divider contained>
<mdui-navigation-rail-item
href="https://www.mdui.org"
target="_blank"
icon="watch_later--outlined"
>Recenti</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Immagini</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Libreria</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Contenuto della pagina</div>
</div>
</div>
Sorgente
Aggiungi un badge al componente <mdui-navigation-rail-item> usando lo slot badge.
Recenti
99+
Immagini
Libreria
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-navigation-rail-item icon="watch_later--outlined">
Recenti
<mdui-badge slot="badge">99+</mdui-badge>
</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Immagini</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Libreria</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Contenuto della pagina</div>
</div>
</div>
Sorgente| Attributo HTML | Proprietà JavaScript | Reflect | Tipo | Predefinito |
|---|
icon | icon | | string | - |
Nome dell'icona Material per lo stato non attivo. Può anche essere impostato tramite slot="icon".
|
active-icon | activeIcon | | string | - |
Nome dell'icona Material per lo stato attivo. Può anche essere impostato tramite slot="active-icon".
|
value | value | | string | - |
Valore dell'elemento di navigazione
|
href | href | | string | - |
URL di destinazione del collegamento.
Se questa proprietà è impostata, il componente viene renderizzato come elemento <a> e sarà possibile utilizzare le proprietà relative ai collegamenti.
|
download | download | | string | - |
Destinazione del download del collegamento.
Nota: questa proprietà è valida solo se è impostato l'attributo href.
|
target | target | | '_blank' | '_parent' | '_self' | '_top' | - |
Modalità di apertura del collegamento. I valori opzionali includono:
_blank: apre il collegamento in una nuova finestra_parent: apre il collegamento nel frame genitore_self: predefinita. Apre il collegamento nel frame corrente_top: apre il collegamento nell'intera finestra
Nota: questa proprietà è valida solo se è impostato l'attributo href.
|
rel | rel | | 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag' | - |
Relazione tra il documento corrente e il documento collegato. I valori opzionali includono:
alternate: versione alternativa del documento correnteauthor: autore del documento o dell'articolo correntebookmark: collegamento permanente al capitolo antenato più vicinoexternal: il documento di destinazione non appartiene allo stesso sito del documento correntehelp: collegamento alla guida di riferimentolicense: il contenuto principale del documento corrente è coperto dalla licenza indicata nel documento di destinazioneme: il documento corrente rappresenta il proprietario del contenuto collegatonext: il documento corrente fa parte di una serie e il documento di destinazione è il successivonofollow: l'autore o l'editore del documento corrente non avalla il documento di destinazionenoreferrer: non include l'intestazione Referer. Simile a noopeneropener: se il collegamento ipertestuale apre un contesto di navigazione di primo livello (cioè il valore dell'attributo target è _blank), crea un contesto di navigazione ausiliarioprev: il documento corrente fa parte di una serie e il documento di destinazione è il precedentesearch: fornisce un collegamento a una risorsa per la ricerca nel documento corrente e nelle pagine correlatetag: associa un tag al documento corrente (identificato dall'indirizzo specificato)
Nota: disponibile solo quando è specificato l'attributo href.
|
autofocus | autofocus | | boolean | false |
Se deve ricevere automaticamente il focus al caricamento della pagina
|
tabindex | tabIndex | | number | - |
Ordine di tabulazione dell'elemento
|
| Nome | Parametri | Restituisce |
|---|
click | | void |
Simula un clic del mouse sull'elemento
|
focus | options: FocusOptions (Opzionale)
| void |
Imposta il focus sull'elemento corrente.
È possibile passare un oggetto come parametro, le cui proprietà includono:
preventScroll: per impostazione predefinita, dopo che l'elemento riceve il focus, la pagina scorrerà per portare l'elemento in vista. Se non si desidera che la pagina scorra, è possibile impostare questa proprietà su true.
|
blur | | void |
Rimuove il focus dall'elemento corrente
|
| Nome |
|---|
focus |
Attivato quando si riceve il focus
|
blur |
Attivato quando si perde il focus
|
| Nome |
|---|
--shape-corner-indicator |
Dimensione dell'arrotondamento degli angoli dell'indicatore. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.
|
| Attributo HTML | Proprietà JavaScript | Reflect | Tipo | Predefinito |
|---|
value | value | | string | - |
Valore del <mdui-navigation-rail-item> attualmente selezionato
|
placement | placement | | 'left' | 'right' | 'left' |
Posizione della barra di navigazione. I valori opzionali includono:
left: a sinistraright: a destra
|
alignment | alignment | | 'start' | 'center' | 'end' | 'start' |
Allineamento degli elementi <mdui-navigation-rail-item>. I valori opzionali includono:
start: allineato in altocenter: centratoend: allineato in basso
|
contained | contained | | boolean | false |
Per impostazione predefinita, la barra di navigazione viene visualizzata rispetto all'elemento body. Quando questo attributo è impostato su true, la barra verrà visualizzata rispetto al suo elemento padre.
Nota: quando si imposta questo attributo, è necessario impostare manualmente lo stile position: relative; sull'elemento padre.
|
divider | divider | | boolean | false |
Se aggiungere una linea di separazione tra la barra di navigazione e il contenuto della pagina
|
order | order | | number | - |
Ordine di layout di questo componente all'interno di <mdui-layout>, dal più piccolo al più grande. Il valore predefinito è 0.
|
| Nome |
|---|
change |
Attivato quando il valore cambia
|
| Nome |
|---|
top |
Contenitore dell'elemento in alto
|
bottom |
Contenitore dell'elemento in basso
|
items |
Contenitore dei componenti <mdui-navigation-rail-item>
|
| Nome |
|---|
--shape-corner |
Dimensione dell'arrotondamento degli angoli del componente. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.
|
--z-index |
Valore CSS z-index del componente
|
Capitolo precedente
NavigationDrawer
Capitolo successivo
Radio
