Zum Hauptinhalt springen

Toast

Mit der Toast-Komponente geben Sie ein optisches Feedback an die Nutzer:innen. Sie wird nur für einen kurzen Zeitraum am Kopf des Browserfenster angezeigt und verschwindet danach automatisch.

Ein Toast wird nach dem Laden der Webseite am oberen Rand des Browserfenster für zehn Sekunden angezeigt. Mit Ausblenden des Toasts wird dieser automatisch aus dem DOM entfernt. Wird er erneut benötigt, muss er z.B. über eine JavaScript-Funktion nachgeladen werden.

Konstruktion

Code

<kol-alert _heading="Erfolg" _type="success">Hier wird der Erfolg näher beschrieben.</kol-alert>
<kol-alert _type="success" _show="false">Hier wird der Erfolg näher beschrieben.</kol-alert>

Beispiel

Hier wird der Erfolg näher beschrieben.Hier wird der Erfolg näher beschrieben.

Verwendung

Überschrift

Verwenden Sie das Attribut _heading, um die Überschrift des Toasts zu bestimmen.

Größe der Überschrift

Verwenden Sie das Attribut _level, um die Überschriftenebene zu setzen.

Anzeigen des Toasts

Verwenden Sie das Attribut _show, um den Toast manuell anzuzeigen.

Anzeigedauer des Toast

Verwenden Sie das Attribut _showDuration, um die Anzeigedauer des Toasts festzulegen.

Anzeigetyp des Toast

Verwenden Sie das Attribut _type, um den Typ des Toasts festzulegen. Mögliche Werte sind:

  • default
  • error
  • info
  • success
  • warning

Barrierefreiheit

Properties

PropertyAttributeDescriptionTypeDefault
_alert_alertGibt an, ob der Screenreader die Meldung vorlesen soll.boolean | undefinedtrue
_hasCloser_has-closerAktiviert das Schließen-Icon.boolean | undefinedfalse
_heading_headingGibt den Titel der Meldung an.string | undefined''
_level_levelGibt an, welchen H-Level von 1 bis 6 die Überschrift hat.0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined1
_on--Gibt die EventCallback-Function für das Schließen des Toasts an.undefined | { onClose?: EventCallback<Event> | undefined; }undefined
_show_showGibt an, ob der Toast eingeblendet wird.boolean | undefinedtrue
_showDuration_show-durationGibt an, wie viele Millisekunden der Toast eingeblendet werden soll.number | undefined10000
_type_typeGibt an, ob es sich um eine Erfolgs-, Info-, Warnung- oder Fehlermeldung handelt."default" | "error" | "info" | "success" | "warning" | undefined'default'

Slots

SlotDescription
Der Inhalt der Meldung.

Dependencies

Depends on

Graph


Live-Editor

Beispiele