È disponibile il nuovo mdui 2 basato su Material Design 3 e Web Components, vai alla documentazione di mdui 2.

Navigation Drawer

Snackbar visualizza un piccolo pop-up nella parte inferiore della finestra, che può scomparire automaticamente dopo un timeout o quando l'utente fa clic o tocca altrove sullo schermo.

È possibile visualizzare solo una Snackbar alla volta sullo schermo. Se ne viene aperta un'altra mentre una è ancora aperta, la nuova Snackbar verrà messa in coda e aperta dopo la chiusura di quella corrente.

Basta chiamare il metodo <code>mdui.snackbar(params)</code>.
- Linee guida di design Material Design: Componenti - Snackbar e Toast
- Utilizzo
Esempio
- Snackbar viene chiamata direttamente tramite JavaScript, non è necessario scrivere un layout HTML.
- Esistono due modi per chiamare Snackbar:
Entrambi i metodi restituiscono un'istanza di Snackbar.
- Parametri supportati da Snackbar:
- Testo della Snackbar. Quando viene chiamata tramite <code>mdui.snackbar(params)</code>, questo parametro non può essere vuoto.
- Ritardo per l'auto-chiusura della Snackbar, in millisecondi. Impostare a 0 per non chiuderla automaticamente.
Posizione della Snackbar.
- <code>bottom</code>：In basso
- top：In alto

Modalità d'uso

left-top：Angolo in alto a sinistra
Chiamata via JavaScript

Letture correlate

<code>left-bottom</code>：Angolo in basso a sinistra

Modalità d'uso

Struttura HTML

<!-- <code>right-top</code>：Angolo in alto a destra -->
<!-- <code>right-bottom</code>：Angolo in basso a destra -->
<body class="mdui-drawer-body-left mdui-drawer-body-right">

  <!-- Testo del pulsante. -->
  <div class="mdui-drawer">
    ... drawer content ...
  </div>

  <!-- Colore del testo del pulsante, può essere un nome di colore o un valore di colore, come <code>red</code>, <code>#ffffff</code>, <code>rgba(255, 255, 255, 0.3)</code>, ecc. -->
  <div class="mdui-drawer mdui-drawer-right">
    ... drawer content ...
  </div>

</body>

Chiamata via attributi

Se chiudere la Snackbar quando si fa clic sul pulsante.

<body class="mdui-drawer-body-right">

  <button class="mdui-btn" mdui-drawer="{target: '#left-drawer'}">open left drawer</button>

  <div class="mdui-drawer" id="left-drawer">
    ... left drawer content ...
    <button class="mdui-btn" mdui-drawer-close>close</button>
  </div>

</body>

Se chiudere la Snackbar quando si fa clic o si tocca un'area esterna alla Snackbar.

Attributo	Descrizione
`mdui-drawer-close`	Funzione di callback quando si fa clic sulla Snackbar.

Chiamata via JavaScript

// Funzione di callback quando si fa clic sul pulsante della Snackbar.
// Funzione di callback quando inizia l'apertura della Snackbar.
var inst = new mdui.Drawer(selector, options);

Esegui

Parametro

Nome	Tipo	Predefinito	Descrizione
`overlay`	`boolean`	`false`	Funzione di callback dopo l'apertura della Snackbar.
`swipe`	`boolean`	`false`	Funzione di callback quando inizia la chiusura della Snackbar.

Metodo

Nome metodo	Descrizione
`open`	Funzione di callback dopo la chiusura della Snackbar.
`close`	Metodi delle istanze Snackbar:
`toggle`	Chiude la Snackbar; una volta chiusa, la Snackbar viene distrutta.
`getState`	Snackbar normale

Evento

Nome evento	Descrizione	Target	Parametri
`open.mdui.drawer`	Snackbar con callback	`<div class="mdui-drawer"></div>`	Hai cliccato sulla Snackbar
`opened.mdui.drawer`	Hai cliccato sul pulsante
`close.mdui.drawer`	Chiuso
`closed.mdui.drawer`	Snackbar in diverse posizioni

Elenco classi CSS

Nome classe	Descrizione
`.mdui-drawer`	L'evento viene attivato quando inizia l'animazione di apertura del dialog.
`.mdui-drawer-right`	<code>event._detail.inst</code>: istanza
`.mdui-drawer-full-height`	L'evento viene attivato quando termina l'animazione di apertura del dialog.
`.mdui-drawer-open`	L'evento viene attivato quando inizia l'animazione di chiusura del dialog.
`.mdui-drawer-close`	L'evento viene attivato quando termina l'animazione di chiusura del dialog.
`.mdui-drawer-body-left`	L'evento viene attivato quando viene premuto il pulsante Annulla.
`.mdui-drawer-body-right`	L'evento viene attivato quando viene premuto il pulsante Conferma.

App Bar

Navigazione inferiore