‍

Mehrere Schritte

Ein Overlay, das die Eingabe auf mehrere Schritte verteilt, weil eine Auswahl bestimmt, welche Felder danach folgen.

Verwendung

Verwende mehrere Schritte, wenn eine Auswahl bestimmt, welche Eingaben danach folgen, und diese Auswahl nicht nebenbei in einem Feld getroffen werden kann – etwa weil Bild, Beschreibung oder Vergleich dazugehören. Stehen die Felder von Anfang an fest, genügt ein Overlay zum Anlegen & Bearbeiten‍.

Aufbau

  • Overlay-Container – Ein Modal‍, meist als offCanvas. Die Schritte sind Zustände darin, keine eigenen Seiten.
  • Auswahl am Anfang – Der erste Schritt trifft die Auswahl, von der alle weiteren abhängen; eine Auswahl mitten im Vorgang würde vorherige Eingaben entwerten. Jeder Schritt bildet eine Entscheidung ab, nicht nur eine Feldergruppe.
  • Überschrift – Eine Heading‍ wechselt mit dem Schritt und nimmt die Auswahl auf – aus „DNS-Eintrag anlegen" wird „MX-Eintrag anlegen".
  • Aktionen – Eine ActionGroup‍ ordnet die Buttons nach Farbe: die weiterführende Aktion rechts, „Abbrechen" links. Der Zurück-Button führt zum vorherigen Schritt und erhält bei drei Buttons slot="secondary", damit er nicht mit „Abbrechen" zusammenfällt. Bereits getätigte Eingaben bleiben beim Zurückgehen erhalten, soweit sie zur geänderten Auswahl noch passen.

Varianten und Abwandlung

Weitere Abwandlungen

Ein Overlay öffnet ein zweites. Muss während des Vorgangs ein noch nicht vorhandenes Objekt angelegt werden – eine Subdomain, ein API-Key – geschieht das in einem eigenen Overlay mit eigenem Controller, nicht als weiterer Schritt. Das erste Overlay bleibt darunter geöffnet und behält, was bereits eingegeben wurde.

Auf dieser Seite