Ein klassischer nicht-modaler Dialog ist der Toast. Toasts sind Benachrichtigungen, die üblicherweise unten links oder rechts eingeblendet werden und die Bedienbarkeit der Seite nicht unterbrechen. Wir unterscheiden vier Arten von Toast-Benachrichtigungen: Information (info), Erfolg (success), Warnung (warning) und Fehler (error). Informations- und Erfolgsmeldungen werden nach fünf Sekunden automatisch ausgeblendet.
Nicht-modale Dialoge werden mit Hilfe der Popover API behandelt. Alle gängigen Browser unterstützen diese.
Ich gehe zudem davon aus, dass du das HTML und das Javascript gemäss der Dialoge-Anleitung eingrichtet hast. Insbesondere die dialog.js übernimmt hier einen massgeblichen Anteil.
Der Toast wird über die CSS-Klasse toast behandelt.
dialog.toast {
margin: auto 1.6rem 1.6rem auto;
transition: all 0.2s ease-out;
@starting-style {
margin-bottom: -16rem;
}
&.info {
background-color: var(--default2-color);
.timeoutIndicator {
background-color: var(--default-color);
}
}
&.success {
background-color: var(--success-color);
.timeoutIndicator {
background-color: var(--successprogress-color);
}
}
&.warning {
background-color: var(--warning-color);
.timeoutIndicator {
background-color: var(--warningprogress-color);
}
}
&.error {
background-color: var(--error-color);
.timeoutIndicator {
background-color: var(--errorprogress-color);
}
}
.dialogHeader {
border-color: transparent;
background-color: transparent;
}
.dialogContent {
min-height: 2rem;
padding: 0;
resize: horizontal;
.timeoutIndicator {
--timeout: 0;
height: 0.4rem;
width: 0;
margin: 1.6rem 0 0 0;
transition-property: width;
transition-duration: var(--timeout);
transition-timing-function: linear;
@starting-style {
width: 100%;
}
}
}
&:hover .timeoutIndicator {
transition: none;
width: 100%;
}
}
Alle weiteren Styles können vom Standard-Dialog geerbt werden.
Für den Toast-Dialog verwenden wir eine generische Vorlage.
<dialog class="toast" popover="1">
<header class="dialogHeader">
<p class="msgHeading"> </p>
<button class="icon icon-close" data-dialog-close="1" title="Dialog schliesssen"></button>
</header>
<div class="dialogContent">
<p class="msgText"> </p>
<p class="timeoutIndicator"></p>
</div>
</dialog>
Die Meldungen können deklerativ über die Attribute data-msg-type, data-msg-heading, data-msg-text und data-msg-timeout gesteuert werden.
<button data-dialog-target="~dialogToast" data-msg-type="warning" data-msg-heading="Warnung" data-msg-text="Das ist eine Warnung." data-msg-timeout="10s">Warnung-Toast öffnen</button>
Alternativ können die Meldungen auch über Javascript gesteuert werden. Ein kleines Hilfsscript erleichtert dies.
// write toast message
async function toast(type = 'info', heading = '', text = '', timeout = '') {
if (type === 'info' && !heading) {
heading = 'Information';
}
if (type === 'success' && !heading) {
heading = 'Success';
}
if (type === 'warning' && !heading) {
heading = 'Warning';
}
if (type === 'error' && !heading) {
heading = 'Error';
}
const msg = {
type: type,
heading: heading,
text: text,
timeout: timeout,
};
const Dialog = await loadModule('Dialog');
Dialog.open('~dialogToast', msg);
}
Dieses Hilfsscript kann dann wie folgt aufgerufen werden:
<button onclick="toast('warning', 'Warnung', 'Das ist eine Warnung.', '10s')">Warnung-Toast öffnen</button>
Damit ist bereits alles Notwendige getan. Alles Weitere übernimmt die dialog.js. Wir können den Toast-Dialog also gleich testen.
Du hast es geschafft. Abonniere meine Benachrichtigungen, um weitere News und Anleitungen von mir zu erhalten.