BottomAppBar

La Bottom App Bar offre navigazione e azioni principali nella parte inferiore dello schermo su dispositivi mobili.

Utilizzo

Importa il componente:

import 'mdui/components/bottom-app-bar.js';

Importa il tipo TypeScript:

import type { BottomAppBar } from 'mdui/components/bottom-app-bar.js';

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

<mdui-bottom-app-bar style="position: relative;">
  <mdui-button-icon icon="check_box--outlined"></mdui-button-icon>
  <mdui-button-icon icon="edit--outlined"></mdui-button-icon>
  <mdui-button-icon icon="mic_none--outlined"></mdui-button-icon>
  <mdui-button-icon icon="image--outlined"></mdui-button-icon>
  <div style="flex-grow: 1"></div>
  <mdui-fab icon="add"></mdui-fab>
</mdui-bottom-app-bar>

Note:

Il componente <mdui-bottom-app-bar> usa position: fixed per impostazione predefinita. 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 da scroll-target.
Quando si trova all'interno del componente <mdui-layout></mdui-layout>. In questo caso, non viene aggiunto alcun padding-bottom.

Esempi

All'interno di un contenitore

Per impostazione predefinita, la Bottom App Bar compare sul bordo inferiore della finestra corrente.

Per posizionarla all'interno di un contenitore specifico, specifica l'attributo scroll-target con il selettore CSS o l'elemento DOM del contenitore. L'elemento padre deve avere gli stili position: relative; overflow: hidden.

Contenuto

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

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

Sorgente

Nascondi durante lo scorrimento

Per nascondere la Bottom App Bar quando scorre verso il basso e mostrarla quando si scorre verso l'alto, imposta l'attributo scroll-behavior su hide.

Usa l'attributo scroll-threshold per impostare quanti pixel devono essere percorsi prima che la Bottom App Bar inizi a nascondersi.

Contenuto

<div style="position: relative;overflow: hidden">
  <mdui-bottom-app-bar
    scroll-behavior="hide"
    scroll-threshold="30"
    scroll-target=".example-scroll-behavior"
  >Contenuto</mdui-bottom-app-bar>

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

Sorgente

Floating Action Button ancorato

Se la Bottom App Bar include un Floating Action Button (FAB), aggiungi l'attributo fab-detach per fissare il FAB nell'angolo inferiore destro della pagina quando la Bottom App Bar si nasconde allo scorrimento.

<div style="position: relative;overflow: hidden">
  <mdui-bottom-app-bar
    fab-detach
    scroll-behavior="hide"
    scroll-threshold="30"
    scroll-target=".example-fab-detach"
  >
    <mdui-button-icon icon="check_box--outlined"></mdui-button-icon>
    <mdui-button-icon icon="edit--outlined"></mdui-button-icon>
    <mdui-button-icon icon="mic_none--outlined"></mdui-button-icon>
    <mdui-button-icon icon="image--outlined"></mdui-button-icon>
    <div style="flex-grow: 1"></div>
    <mdui-fab icon="add"></mdui-fab>
  </mdui-bottom-app-bar>

  <div class="example-fab-detach" style="height: 200px;overflow: auto;">
    <div style="height: 1000px"></div>
  </div>
</div>

Sorgente

API

Proprietà

Attributo HTML	Proprietà JavaScript	Tipo	Predefinito
`hide`	`hide`	`boolean`	`false`
Se nascondere
`fab-detach`	`fabDetach`	`boolean`	`false`
Indica se il componente `<mdui-fab>` debba staccarsi dalla barra dell'applicazione. Se è `true`, quando la barra è nascosta, il `<mdui-fab>` rimane visibile sulla pagina.
`scroll-behavior`	`scrollBehavior`	`'hide' \| 'shrink' \| 'elevate'`	-
Comportamento allo scorrimento. I valori opzionali sono: `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`.

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 inferiore

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

Badge

Capitolo successivo

Button