Snackbar
Gli snackbar forniscono brevi aggiornamenti sui processi dell'app nella parte inferiore dello schermo.
Oltre all'uso diretto del componente, mdui offre anche una funzione mdui.snackbar per un modo più semplice di utilizzare il componente Snackbar.
Importa il componente:
import 'mdui/components/snackbar.js';
Importa il tipo TypeScript:
import type { Snackbar } from 'mdui/components/snackbar.js';
Esempio:
Immagine archiviata
Apri Snackbar
<mdui-snackbar class="example-snackbar">Immagine archiviata</mdui-snackbar>
<mdui-button>Apri Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-snackbar");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Puoi impostare la posizione dello snackbar utilizzando l'attributo placement.
Immagine archiviata
top-start
Immagine archiviata
top
Immagine archiviata
top-end
Immagine archiviata
bottom-start
Immagine archiviata
bottom
Immagine archiviata
bottom-end
<div class="example-placement">
<div class="row">
<mdui-snackbar placement="top-start">Immagine archiviata</mdui-snackbar>
<mdui-button variant="outlined">top-start</mdui-button>
<mdui-snackbar placement="top">Immagine archiviata</mdui-snackbar>
<mdui-button variant="outlined">top</mdui-button>
<mdui-snackbar placement="top-end">Immagine archiviata</mdui-snackbar>
<mdui-button variant="outlined">top-end</mdui-button>
</div>
<div class="row">
<mdui-snackbar placement="bottom-start">Immagine archiviata</mdui-snackbar>
<mdui-button variant="outlined">bottom-start</mdui-button>
<mdui-snackbar placement="bottom">Immagine archiviata</mdui-snackbar>
<mdui-button variant="outlined">bottom</mdui-button>
<mdui-snackbar placement="bottom-end">Immagine archiviata</mdui-snackbar>
<mdui-button variant="outlined">bottom-end</mdui-button>
</div>
</div>
<script>
const snackbars = document.querySelectorAll(".example-placement mdui-snackbar");
snackbars.forEach((snackbar) => {
const button = snackbar.nextElementSibling;
button.addEventListener("click", () => snackbar.open = true);
});
</script>
<style>
.example-placement mdui-button {
margin: 0.25rem;
width: 7.5rem;
}
</style>
Sorgente
L'attributo action aggiunge un pulsante di azione sul lato destro e ne specifica il testo. L'evento action-click viene attivato quando si fa clic sul pulsante di azione. L'attributo action-loading visualizza uno stato di caricamento sul pulsante di azione.
Immagine archiviata
Apri Snackbar
<mdui-snackbar action="Annulla" class="example-action">Immagine archiviata</mdui-snackbar>
<mdui-button>Apri Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-action");
const openButton = snackbar.nextElementSibling;
snackbar.addEventListener("action-click", () => {
snackbar.actionLoading = true;
setTimeout(() => snackbar.actionLoading = false, 2000);
});
openButton.addEventListener("click", () => snackbar.open = true);
</script>
SorgenteLo slot action può essere usato anche per aggiungere elementi sul lato destro.
Immagine archiviata
Annulla
Apri Snackbar
<mdui-snackbar class="example-action-slot">
Immagine archiviata
<mdui-button slot="action" variant="text">Annulla</mdui-button>
</mdui-snackbar>
<mdui-button>Apri Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-action-slot");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Sorgente
L'attributo closeable aggiunge un pulsante di chiusura a destra. Cliccando sul pulsante si chiude lo snackbar e viene attivato l'evento close.
Immagine archiviata
Apri Snackbar
<mdui-snackbar closeable class="example-closeable">Immagine archiviata</mdui-snackbar>
<mdui-button>Apri Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-closeable");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
SorgenteLo slot close-button specifica il contenuto del pulsante di chiusura.
Immagine archiviata
Apri Snackbar
<mdui-snackbar closeable class="example-close-button-slot">
Immagine archiviata
<mdui-avatar slot="close-button" icon="people_alt"></mdui-avatar>
</mdui-snackbar>
<mdui-button>Apri Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-close-button-slot");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
SorgenteL'attributo close-icon imposta l'Icona Material nel pulsante di chiusura predefinito. Lo slot close-icon imposta l'elemento icona nel pulsante di chiusura predefinito.
Immagine archiviata
Apri Snackbar
<mdui-snackbar
closeable
close-icon="delete"
class="example-close-icon"
>Immagine archiviata</mdui-snackbar>
<mdui-button>Apri Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-close-icon");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Sorgente
L'attributo message-line limita il numero di righe del testo del messaggio, con un massimo di 2 righe.
L'elemento ha già l'etichetta "viaggio". Puoi aggiungere una nuova etichetta. Puoi aggiungere una nuova etichetta.
Apri Snackbar
<mdui-snackbar message-line="1" class="example-line">L'elemento ha già l'etichetta "viaggio". Puoi aggiungere una nuova etichetta. Puoi aggiungere una nuova etichetta.</mdui-snackbar>
<mdui-button>Apri Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-line");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Sorgente
L'attributo auto-close-delay imposta il ritardo per la chiusura automatica, in millisecondi. Il valore predefinito è 5000 millisecondi.
Immagine archiviata
Apri Snackbar
<mdui-snackbar auto-close-delay="2000" class="example-close-delay">Immagine archiviata</mdui-snackbar>
<mdui-button>Apri Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-close-delay");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Sorgente
L'attributo close-on-outside-click chiude lo snackbar quando si fa clic al di fuori della sua area.
Immagine archiviata
Apri Snackbar
<mdui-snackbar close-on-outside-click class="example-outside">Immagine archiviata</mdui-snackbar>
<mdui-button>Apri Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-outside");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Sorgente| Attributo HTML | Proprietà JavaScript | Reflect | Tipo | Predefinito |
|---|
open | open | | boolean | false |
Se mostrare la Snackbar
|
placement | placement | | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'bottom' |
Posizione della Snackbar. Il valore predefinito è bottom. I valori opzionali includono:
top: in alto al centrotop-start: in alto a sinistratop-end: in alto a destrabottom: in basso al centrobottom-start: in basso a sinistrabottom-end: in basso a destra
|
action | action | | string | - |
Testo del pulsante di azione. Può essere impostato anche tramite slot="action".
|
action-loading | actionLoading | | boolean | false |
Indica se il pulsante di azione è in stato di caricamento
|
closeable | closeable | | boolean | false |
Se mostrare il pulsante di chiusura a destra
|
close-icon | closeIcon | | string | - |
Nome dell'icona Material per il pulsante di chiusura. Può anche essere impostato tramite slot="close-icon".
|
message-line | messageLine | | 1 | 2 | - |
Numero massimo di righe visualizzate per il testo del messaggio. Nessun limite per impostazione predefinita. I valori opzionali includono:
1: massimo una riga2: massimo due righe
|
auto-close-delay | autoCloseDelay | | number | 5000 |
Tempo di ritardo per la chiusura automatica (in millisecondi). Impostare su 0 per non chiudere automaticamente. Il valore predefinito è 5000 millisecondi.
|
close-on-outside-click | closeOnOutsideClick | | boolean | false |
Se chiudere la Snackbar facendo clic o toccando un'area esterna.
|
| Nome |
|---|
open |
L'evento viene attivato all'inizio dell'apertura della Snackbar. È possibile impedirne l'apertura chiamando event.preventDefault().
|
opened |
L'evento viene attivato al termine dell'animazione di apertura della Snackbar.
|
close |
L'evento viene attivato all'inizio della chiusura della Snackbar. È possibile impedire la chiusura della Snackbar chiamando event.preventDefault().
|
closed |
L'evento viene attivato al termine dell'animazione di chiusura della Snackbar.
|
action-click |
Attivato quando si fa clic sul pulsante di azione
|
| Nome |
|---|
| (predefinito) |
Contenuto testuale del messaggio della Snackbar
|
action |
Pulsante di azione a destra
|
close-button |
Pulsante di chiusura a destra. Deve essere impostato l'attributo closeable su true per essere visualizzato.
|
close-icon |
Icona all'interno del pulsante di chiusura
|
| 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
Slider
Capitolo successivo
Switch
