Gebruikers die de knop voor het kopiëren van blokken hebben gebruikt, kennen de Snackbar al: deze informeert de gebruiker over de resultaten van de uitvoering van de applicatie. In dit artikel geven we een voorbeeld van hoe je de Snackbar kunt gebruiken voor aangepaste interactie.
API
| Functie | Beschrijving |
|---|---|
show(body: String, duration: number = 2000) | body: de inhoud van het bericht, duration: de weergaveduur in milliseconden. |
Exporteren
Dankzij assets/main/js/custom.ts kunnen we JavaScript aanpassen. Hier exporteren we de volledige Snackbar als een globale variabele:
1import Snackbar from 'js/snackbar';
2
3// Show a message via JavaScript.
4Snackbar.show('a message with 3s duration from pure JavaScript', 3000)
5
6// Export the Snackbar as a global variable, so that you can send a message from a HTML.
7// Such as: <button onclick="Snackbar.show('message from a button')">Snackbar</button>.
8const _global = (window || global ) as any
9_global.Snackbar = Snackbar
Gebruik
Vervolgens kunnen we het aanroepen vanuit HTML of JavaScript:
1<button onclick="Snackbar.show('message from a button')">Snackbar</button>
Zie Hooks voor informatie over het injecteren van aangepaste HTML.
