TopAppBar

La Top App Bar offre contesto e azioni per la schermata corrente, supportando branding, navigazione, ricerca e altre azioni.

Utilizzo

Importa i componenti:

import 'mdui/components/top-app-bar.js';
import 'mdui/components/top-app-bar-title.js';

Importa i tipi TypeScript:

import type { TopAppBar } from 'mdui/components/top-app-bar.js';
import type { TopAppBarTitle } from 'mdui/components/top-app-bar-title.js';

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

Titolo

<mdui-top-app-bar style="position: relative;">
  <mdui-button-icon icon="menu"></mdui-button-icon>
  <mdui-top-app-bar-title>Titolo</mdui-top-app-bar-title>
  <div style="flex-grow: 1"></div>
  <mdui-button-icon icon="more_vert"></mdui-button-icon>
</mdui-top-app-bar>

Note:

Per impostazione predefinita, la Top App Bar usa position: fixed e aggiunge automaticamente padding-top 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-top viene aggiunto all'elemento specificato da scroll-target.
Quando si trova all'interno del componente <mdui-layout></mdui-layout>. In questo caso, padding-top non viene aggiunto.

Esempi

In un contenitore

Per impostazione predefinita, la barra dell'applicazione superiore è posizionata rispetto alla finestra corrente e appare nella parte superiore della pagina.

Per posizionare la Top App Bar all'interno di un contenitore, specifica l'attributo scroll-target sul componente <mdui-top-app-bar>. Imposta il suo valore sul selettore CSS o sull'elemento DOM del contenitore con contenuto scorrevole. In questo caso, la Top App Bar sarà posizionata rispetto all'elemento padre. Assicurati di aggiungere gli stili position: relative; overflow: hidden all'elemento padre.

Titolo

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar scroll-target=".example-scroll-target">
    <mdui-top-app-bar-title>Titolo</mdui-top-app-bar-title>
  </mdui-top-app-bar>

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

Sorgente

Variante

L'attributo variant sul componente <mdui-top-app-bar> imposta l'aspetto della Top App Bar.

Titolo

allineato al centro

piccolo

medio

grande

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar variant="small" scroll-target=".example-variant" class="example-variant-bar">
    <mdui-button-icon icon="menu"></mdui-button-icon>
    <mdui-top-app-bar-title>Titolo</mdui-top-app-bar-title>
    <div style="flex-grow: 1"></div>
    <mdui-button-icon icon="more_vert"></mdui-button-icon>
  </mdui-top-app-bar>

  <div class="example-variant" style="height: 160px;overflow: auto;">
    <div style="height: 1000px">
      <mdui-segmented-button-group selects="single" value="small">
        <mdui-segmented-button value="center-aligned">allineato al centro</mdui-segmented-button>
        <mdui-segmented-button value="small">piccolo</mdui-segmented-button>
        <mdui-segmented-button value="medium">medio</mdui-segmented-button>
        <mdui-segmented-button value="large">grande</mdui-segmented-button>
      </mdui-segmented-button-group>
    </div>
  </div>
</div>

<script>
  const topAppBar = document.querySelector(".example-variant-bar");
  const segmentedButtonGroup = document.querySelector(".example-variant");

  segmentedButtonGroup.addEventListener("change", (event) => {
    topAppBar.variant = event.target.value;
  });
</script>

Sorgente

Comportamento allo scorrimento

L'attributo scroll-behavior sul componente <mdui-top-app-bar> definisce il comportamento della Top App Bar quando la pagina scorre. Puoi usare più comportamenti di scorrimento insieme, separandoli con spazi.

I comportamenti di scorrimento includono:

hide: Nasconde la Top App Bar quando si scorre verso il basso e la mostra quando si scorre verso l'alto.
shrink: Efficace quando variant è medium o large. Espande la Top App Bar quando si scorre verso il basso e la restringe quando si scorre verso l'alto.
elevate: Aggiunge un'ombra alla Top App Bar quando si scorre verso il basso e rimuove l'ombra quando si torna in cima.

L'attributo scroll-threshold imposta quanti pixel devono essere scorsi prima che la Top App Bar inizi a reagire. Non impostare scroll-threshold quando si usa elevate, in modo che risponda immediatamente.

Esempio: Nascondi durante lo scorrimento

Titolo

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar
    scroll-behavior="hide"
    scroll-threshold="30"
    scroll-target=".example-scroll-behavior-hide"
  >
    <mdui-button-icon icon="menu"></mdui-button-icon>
    <mdui-top-app-bar-title>Titolo</mdui-top-app-bar-title>
    <div style="flex-grow: 1"></div>
    <mdui-button-icon icon="more_vert"></mdui-button-icon>
  </mdui-top-app-bar>

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

Sorgente

Esempio: Aggiungi Ombra allo Scorrimento

Titolo

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar
    scroll-behavior="elevate"
    scroll-target=".example-scroll-behavior-elevate"
  >
    <mdui-button-icon icon="menu"></mdui-button-icon>
    <mdui-top-app-bar-title>Titolo</mdui-top-app-bar-title>
    <div style="flex-grow: 1"></div>
    <mdui-button-icon icon="more_vert"></mdui-button-icon>
  </mdui-top-app-bar>

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

Sorgente

Esempio: Restringi allo Scorrimento

Titolo

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar
    variant="medium"
    scroll-behavior="shrink"
    scroll-threshold="30"
    scroll-target=".example-scroll-behavior-shrink"
  >
    <mdui-button-icon icon="menu"></mdui-button-icon>
    <mdui-top-app-bar-title>Titolo</mdui-top-app-bar-title>
    <div style="flex-grow: 1"></div>
    <mdui-button-icon icon="more_vert"></mdui-button-icon>
  </mdui-top-app-bar>

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

Sorgente

Esempio: Restringi e Aggiungi Ombra allo Scorrimento

Titolo

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar
    variant="medium"
    scroll-behavior="shrink elevate"
    scroll-target=".example-scroll-behavior-shrink-elevate"
  >
    <mdui-button-icon icon="menu"></mdui-button-icon>
    <mdui-top-app-bar-title>Titolo</mdui-top-app-bar-title>
    <div style="flex-grow: 1"></div>
    <mdui-button-icon icon="more_vert"></mdui-button-icon>
  </mdui-top-app-bar>

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

Sorgente

Testo nella barra espansa

Per una Top App Bar con variant impostato su medium o large e scroll-behavior impostato su shrink, puoi usare lo slot label-large all'interno del componente <mdui-top-app-bar-title> per specificare il testo mostrato quando la barra è espansa.

Questo è il titolo nello stato ridotto Questo è il titolo nello stato espanso

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar
    variant="medium"
    scroll-behavior="shrink elevate"
    scroll-target=".example-label-large-slot"
  >
    <mdui-button-icon icon="menu"></mdui-button-icon>
    <mdui-top-app-bar-title>
      Questo è il titolo nello stato ridotto
      <span slot="label-large">Questo è il titolo nello stato espanso</span>
    </mdui-top-app-bar-title>
    <div style="flex-grow: 1"></div>
    <mdui-button-icon icon="more_vert"></mdui-button-icon>
  </mdui-top-app-bar>

  <div class="example-label-large-slot" style="height: 160px;overflow: auto;">
    <div style="height: 1000px"></div>
  </div>
</div>

Sorgente

`mdui-top-app-bar-title` API

Slots

Nome
(predefinito)
Testo del titolo della barra dell'applicazione superiore
`label-large`
Testo del titolo nello stato espanso

CSS Parts

Nome
`label`
Testo del titolo
`label-large`
Testo del titolo nello stato espanso

`mdui-top-app-bar` API

Proprietà

Attributo HTML	Proprietà JavaScript	Tipo	Predefinito
`variant`	`variant`	`'center-aligned' \| 'small' \| 'medium' \| 'large'`	`'small'`
Variante della barra dell'applicazione superiore. Il valore predefinito è `small`. I valori opzionali includono: `center-aligned`: barra dell'applicazione superiore con titolo centrato `small`: barra dell'applicazione superiore piccola `medium`: barra dell'applicazione superiore media `large`: barra dell'applicazione superiore grande
`hide`	`hide`	`boolean`	`false`
Se nascondere
`shrink`	`shrink`	`boolean`	`false`
Se ridurre allo stile `variant="small"`, ha effetto solo quando `variant="medium"` o `variant="large"`.
`scroll-behavior`	`scrollBehavior`	`'hide' \| 'shrink' \| 'elevate'`	-
Comportamento allo scorrimento. È possibile utilizzare più valori contemporaneamente, separati da spazi. I valori opzionali includono: `hide`: si nasconde durante lo scorrimento `shrink`: utilizzabile nelle barre dell'applicazione medie e grandi, durante lo scorrimento si restringe allo stile della barra dell'applicazione superiore piccola `elevate`: aggiunge ombra 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`.

Eventi

Nome
`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 impedire la chiusura chiamando `event.preventDefault()`.
`hidden`
L'evento viene attivato al termine dell'animazione di chiusura.

Slots

Nome
(predefinito)
Elementi all'interno della barra dell'applicazione superiore

CSS Custom Property

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

Tooltip

Capitolo successivo

Libreria jq