‍

Anzeigen

Ein Overlay, das Inhalte zu einem Objekt zeigt, ohne dass daraus eine Aktion folgt.

Verwendung

Verwende dieses Overlay für Inhalte, die zu einem Objekt gehören, die Seite aber sprengen würden und aus denen keine weitere Aktion folgt: Details, Protokolle, Vorschauen oder Belege. Wird etwas eingegeben, nimm ein Overlay zum Anlegen & Bearbeiten‍; ist eine Entscheidung zu treffen, eines zum Bestätigen‍. Was jeder Besucher dauerhaft sehen soll, gehört fest auf die Detailseite‍.

Aufbau

  • Overlay-Container – Bei wenig Inhalt eignet sich ein Modal‍, das mittig erscheint; bei viel Inhalt mit erwartetem Scrollen – etwa ein Log oder eine lange Liste – bietet sich die offCanvas-Variante an, die für sich scrollt.
  • Überschrift – Eine Heading‍ benennt kurz das gezeigte Objekt.
  • Content – Der Inhalt lässt sich mit Sections‍ und einem ColumnLayout‍ übersichtlich strukturieren. Werte, die weiterverwendet werden, erhalten einen CopyButton‍; das Overlay ist oft der einzige Ort, an dem ein Wert vollständig steht.
  • Aktion – Eine ActionGroup‍ trägt als einzige Aktion „Schließen".

Varianten und Abwandlung

Einmal-Anzeige eines Geheimnisses

Ein Sonderfall, in dem das Overlay nach dem Anlegen erscheint: Das Ergebnis enthält einen Wert, der später nicht erneut abrufbar ist – ein API-Token, Recovery-Codes oder ein Auth-Code. Der Warnhinweis steht vor dem Wert, damit vor dem Schließen klar ist, dass es keine zweite Gelegenheit gibt.

IllustratedMessage

Eine IllustratedMessage‍ wird verwendet, wenn eine Botschaft im Modal besonders hervorgehoben werden soll. Sie eignet sich vor allem für wichtige Zustände wie Fehler‍, leere Inhalte oder abgeschlossene Aktionen und macht diese visuell schnell erfassbar.

Auf dieser Seite