NavigationBar

La barra di navigazione consente di passare facilmente da una pagina principale all'altra sui dispositivi mobili.

Utilizzo

Importa i componenti:

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

Importa i tipi TypeScript:

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

Esempio: (Nota: lo stile position: relative nell'esempio è solo a scopo dimostrativo. Rimuovilo nell'uso effettivo.)

Elemento 1

Elemento 2

Elemento 3

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

Nota:

Per impostazione predefinita, questo componente usa position: fixed e aggiunge automaticamente padding-bottom al body per evitare che il contenuto della pagina venga oscurato. Tuttavia, usa position: absolute nei seguenti casi:

Quando è specificato l'attributo scroll-target. In questo caso, padding-bottom viene aggiunto all'elemento specificato.
Quando si trova all'interno del componente <mdui-layout></mdui-layout>. In questo caso, non viene aggiunto alcun padding-bottom.

Esempi

Visibilità delle etichette

Le etichette di testo nella barra di navigazione sono sempre visibili quando sono presenti 3 o meno elementi di navigazione. Se ci sono più di 3 elementi, viene mostrato solo il testo dell'elemento selezionato.

Elemento 1

Elemento 2

Elemento 3

Elemento 1

Elemento 2

Elemento 3

Elemento 4

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

Sorgente

L'attributo label-visibility su <mdui-navigation-bar> controlla la visibilità delle etichette di testo. Valori possibili:

selected: Viene visualizzato solo il testo dell'elemento selezionato.
labeled: Il testo è sempre visualizzato.
unlabeled: Il testo non viene mai visualizzato.

Elemento 1

Elemento 2

Elemento 3

selezionato

etichettato

non etichettato

<mdui-navigation-bar value="item-1" label-visibility="selected" style="position: relative" class="example-label">
  <mdui-navigation-bar-item icon="place" value="item-1">Elemento 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">Elemento 2</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="people" value="item-3">Elemento 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">selezionato</mdui-segmented-button>
  <mdui-segmented-button value="labeled">etichettato</mdui-segmented-button>
  <mdui-segmented-button value="unlabeled">non etichettato</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>

Sorgente

In un contenitore

Per impostazione predefinita, la barra di navigazione è relativa alla finestra corrente e viene visualizzata nella parte inferiore della pagina.

Se desideri posizionare la barra di navigazione all'interno di un contenitore specifico, usa l'attributo scroll-target su <mdui-navigation-bar>. Il valore può essere il selettore CSS o l'elemento DOM del contenitore con contenuto scorrevole. In questo caso, la barra di navigazione sarà relativa all'elemento padre. Devi aggiungere manualmente gli stili position: relative; overflow: hidden all'elemento padre.

Elemento 1

Elemento 2

Elemento 3

Contenuto della pagina

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

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

Sorgente

Nascondi durante lo scorrimento

L'attributo scroll-behavior su <mdui-navigation-bar> controlla la visibilità della barra di navigazione durante lo scorrimento. Imposta il suo valore su hide per nascondere la barra di navigazione quando si scorre verso il basso e mostrarla quando si scorre verso l'alto.

Usa l'attributo scroll-threshold per impostare quanti pixel devono essere scorsi prima che la barra di navigazione inizi a nascondersi.

Elemento 1

Elemento 2

Elemento 3

Contenuto della pagina

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

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

Sorgente

Icone

L'attributo icon su <mdui-navigation-bar-item> imposta l'icona per lo stato inattivo. L'attributo active-icon imposta l'icona per lo stato attivo. Oppure, usa gli slot icon e active-icon per impostare le icone per gli stati inattivo e attivo.

Elemento 1

Elemento 2

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

Sorgente

Link

Usa l'attributo href sul componente <mdui-navigation-bar-item> per trasformare l'elemento della Navigation Bar in un link. Gli attributi download, target e rel sono disponibili per le normali funzionalità dei link.

Elemento 1

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

Sorgente

Badge

Puoi aggiungere un badge al componente <mdui-navigation-bar-item> utilizzando lo slot badge.

Elemento 1 99+

Elemento 2

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

Sorgente

Attributo HTML	Proprietà JavaScript	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 corrente `author`: autore del documento o dell'articolo corrente `bookmark`: collegamento permanente al capitolo antenato più vicino `external`: il documento di destinazione non appartiene allo stesso sito del documento corrente `help`: collegamento alla guida di riferimento `license`: il contenuto principale del documento corrente è coperto dalla licenza indicata nel documento di destinazione `me`: il documento corrente rappresenta il proprietario del contenuto collegato `next`: il documento corrente fa parte di una serie e il documento di destinazione è il successivo `nofollow`: l'autore o l'editore del documento corrente non avalla il documento di destinazione `noreferrer`: non include l'intestazione `Referer`. Simile a `noopener` `opener`: se il collegamento ipertestuale apre un contesto di navigazione di primo livello (cioè il valore dell'attributo `target` è `_blank`), crea un contesto di navigazione ausiliario `prev`: il documento corrente fa parte di una serie e il documento di destinazione è il precedente `search`: fornisce un collegamento a una risorsa per la ricerca nel documento corrente e nelle pagine correlate `tag`: 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
(predefinito)
Testo dell'elemento di navigazione
`icon`
Icona
`active-icon`
Elemento icona nello stato attivo
`badge`
Badge

Nome
`container`
Contenitore dell'elemento di navigazione
`indicator`
Indicatore
`badge`
Badge
`icon`
Icona
`active-icon`
Icona nello stato attivo
`label`
Testo dell'elemento di navigazione

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	Tipo	Predefinito
`hide`	`hide`	`boolean`	`false`
Se nascondere
`label-visibility`	`labelVisibility`	`'auto' \| 'selected' \| 'labeled' \| 'unlabeled'`	`'auto'`
Stato di visibilità del testo. I valori opzionali includono: `auto`: quando le opzioni sono <= 3, mostra sempre il testo; quando le opzioni sono > 3, mostra solo il testo dello stato selezionato `selected`: mostra il testo solo nello stato selezionato `labeled`: mostra sempre il testo `unlabeled`: non mostra mai il testo
`value`	`value`	`string`	-
Valore del `<mdui-navigation-bar-item>` attualmente selezionato
`scroll-behavior`	`scrollBehavior`	`'hide' \| 'shrink' \| 'elevate'`	-
Comportamento allo scorrimento. I valori opzionali includono: `hide`: si nasconde durante lo scorrimento
`scroll-target`	`scrollTarget`	`string \| HTMLElement \| JQ<HTMLElement>`	-
Elemento da monitorare per gli eventi di scorrimento. Il valore può essere un selettore CSS, un elemento DOM o un oggetto JQ. Per impostazione predefinita, ascolta l'evento di scorrimento di `window`.
`scroll-threshold`	`scrollThreshold`	`number`	-
Distanza di scorrimento necessaria per attivare il comportamento, in `px`.
`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
`show`
L'evento viene attivato all'inizio dell'apertura. Puoi impedirne l'apertura chiamando `event.preventDefault()`.
`shown`
L'evento viene attivato al termine dell'animazione di apertura.
`hide`
L'evento viene attivato all'inizio della chiusura. È possibile impedirne la chiusura chiamando `event.preventDefault()`.
`hidden`
L'evento viene attivato al termine dell'animazione di chiusura.

Nome
(predefinito)
Componente `<mdui-navigation-bar-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

Capitolo successivo

NavigationDrawer

NavigationBar

Utilizzo

Esempi

Visibilità delle etichette

In un contenitore

Nascondi durante lo scorrimento

Icone

Link

Badge

`mdui-navigation-bar-item` API

Proprietà

Metodi

Eventi

Slots

CSS Parts

CSS Custom Property

`mdui-navigation-bar` API

Proprietà

Eventi

Slots

CSS Custom Property