Zum Inhalt
r/ rittek uiDOCS
Admin-Demo ↗

INTERAKTIONEN / PHASE 5

Neu dabei? Rittek UI in HTML oder PHP einbinden

Dieses Grundgerüst funktioniert auch als .php-Datei. Setze das Beispiel-HTML in den Body. JavaScript-Beispiele kommen darunter in einen <script type="module">-Block. Bei einem eigenen Server ersetzt du /assets/ in den Imports durch https://ui.rittek.de/assets/ oder kopierst die Assets auf deinen Server. Die Demo-Navigation gehört nicht zum Framework.

HTML · Grundgerüst
<!doctype html>
<html lang="de" data-theme="light">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Meine Rittek-Seite</title>
  <link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
  <!-- Hier das HTML des gewünschten Beispiels einsetzen. -->
  <script src="https://ui.rittek.de/assets/rittek.js"></script>
  <!-- JavaScript aus dem Beispiel in einen script type="module"-Block einsetzen. -->
</body>
</html>

Reaktionen, die Orientierung geben.

Gezielte Rückmeldungen und eine Navigation, die auf kleinen Displays Platz macht. Eigenständige Module, opt-in und unabhängig von der Docs-Demo.

Meldungen in der richtigen Reihenfolge

Neue Nachrichten überschreiben bestehende nicht mehr. Die nächste erscheint nach Ablauf oder nach dem Schließen. Solange die Maus oder der Tastaturfokus auf der Meldung liegt, pausiert die Zeit.

Noch keine Meldung in der Warteschlange.

// Klassisches Script: bei Bedarf wird das Toast-Modul geladen.
await Rittek.notify('Änderungen gespeichert.');
await Rittek.notify('Bitte prüfen.', {duration: 0});

// Oder als eigenes Modul:
import {createToasts} from '/assets/modules/toasts.js';
const messages = createToasts(document.body);
messages.notify('Aufgabe abgeschlossen.', {duration: 5000});
// messages.clear();
// messages.destroy();

duration: 0 bleibt bis zum manuellen Schließen. Standard: 5 Sekunden. Maximal 20 Meldungen je Instanz. Die Demo startet drei Meldungen mit jeweils 12 Sekunden.

Nachrichten nacheinander anzeigen

Ein Klick startet zwei Meldungen. Dauer 0 bleibt stehen, bis die Person sie schließt. Maus und Tastaturfokus pausieren zeitgesteuerte Meldungen.

HTML
<button type="button" class="r-button r-button-primary" id="ex-notify">Nachrichten starten</button>
JavaScript · type="module"
import {createToasts} from 'https://ui.rittek.de/assets/modules/toasts.js';
const messages = createToasts(document.body);
document.getElementById('ex-notify').addEventListener('click', event => {
  messages.notify('Änderungen gespeichert.', {duration: 5000, returnFocus: event.currentTarget});
  messages.notify('Bitte prüfe die Zusammenfassung.', {duration: 0, returnFocus: event.currentTarget});
});

Framework und Demo bleiben getrennt

Die Projektnavigation ist ein optionaler Framework-Baustein. Sie erscheint nur, wenn du selbst das passende HTML einfügst und das Modul initialisierst. Das Menü dieser Dokumentation samt Browser-Einstellungen gehört weiterhin ausschließlich zur Demo.

Module unterstützen destroy() für Aufräumen und erneute Initialisierung. Die bestehenden data-r-toast-Buttons verwenden jetzt dieselbe Warteschlange.