tuix-toast

Der Toast ist sichtbar, solange type etwas anderes als none ist, und setzt sich nach visibility-duration Millisekunden selbst auf none zurück.

Der Toast positioniert sich am unteren Rand des Viewports, nicht in seinem Container; die Demos unten erscheinen also über der Seite und gleiten von unten herein.

success

error

warning

text

Invoice sent to [email protected]

Komponenten werden geladen…

<tuix-toast type="success">Rechnung versendet</tuix-toast>

const toast = document.querySelector('tuix-toast')
 
toast.type = ToastType.SUCCESS // zeigt ihn an
toast.addEventListener('on-close', () => console.log('wieder ausgeblendet'))

Typen

Wert	Attribut	Icon	Hintergrund	Hintergrund mit `dark`
`ToastType.NONE`	`none`	keins	Versteckt	Versteckt
`ToastType.TEXT`	`text`	keins	Weiss	`TOAST_TEXT`
`ToastType.WARNING`	`warning`	`triangle-exclamation`	`VALIDATION_50`	`TOAST_WARNING`
`ToastType.ERROR`	`error`	`circle-exclamation`	`ERROR_50`	`TOAST_ERROR`
`ToastType.SUCCESS`	`success`	`circle-check`	`SUCCESS_50`	`TOAST_SUCCESS`

position: fixed, zentriert am unteren Rand des Viewports, gleitet über 600ms von ausserhalb herein und wieder hinaus. Er ist 640px breit, 520px unterhalb des Tablet-Breakpoints und 90% des Viewports (höchstens 343px) unterhalb des Mobile-Breakpoints, bei z-index: 99. Das Element kann irgendwo im Dokument stehen; es fliesst nicht mit seinem Container.

API

Properties

Property	Attribut	Typ	Standard	Beschreibung
`type`	`type`	`ToastType`	`none`	Der Zustand, und ob der Toast überhaupt sichtbar ist
`visibilityDuration`	`visibility-duration`	`number`	`4000`	Millisekunden bis zum Ausblenden. `0` lässt ihn stehen
`dark`	`dark`	`boolean`	`false`	Dunkle Palette

Events

Event	Detail	Wann
`on-close`	Keine	Der Toast hat sich nach `visibilityDuration` ausgeblendet. Nicht bei Dauer `0`

Slots

Slot	Inhalt
default	Die Meldung. Sie wird in ein `tuix-text` gepackt, reiner Text genügt also

Hinweise

type erneut auf denselben Wert zu setzen zeigt einen bereits abgelaufenen Toast nicht noch einmal; er wird erst auf none und dann wieder auf den Typ gesetzt. Genau das macht die Demo oben vor jedem Toast.
Die Farben des letzten echten Typs bleiben erhalten, solange type none ist, damit der Toast auch beim Verschwinden richtig aussieht.