Was macht die Komponente?

• Dunkelt den aktuellen View ab und legt einen modalen Dialog darüber.

Wann soll die Komponente eingesetzt werden?

• Wenn die Aufmerksamkeit des Benutzer benötigt wird.
• Wenn vom Benutzer eine Information/Input verlangt wird.
• Wenn verwandter Inhalt dargestellt werden soll.
• Wenn zusätzlicher Inhalt dargestellt werden soll.
• Wenn eine Fehlermeldung angezeigt werden soll.

Regeln

• Der Benutzer muss immer die Möglichkeit haben den modalen Dialog zu schliessen.
• Jeder modale Dialog besteht aus einem Header (Schliessen-Icon und Titel) und Inhalt.
• Die Höhe des Dialogs wird durch die Grösse des Inhalts bestimmt.
• Ein Mindestabstand zum Bildschirmrand ist zu gewährleisten.
• Bei Klick auf den abgedunkelten Bereich wird der modale Dialog geschlossen.

Barrierefreiheit

• Inhalte ausserhalb des geöffneten Dialogs sollen per Screen Reader nicht mehr erreichbar sein.

Varianten

• Mit und ohne Close-Button
• Mit und ohne Back-Button

Mit Close Button ohne Back Button

Mit Close und Back Button

Ohne Close und Back Button

Ohne Close Button und mit Back Button

Spezifikationen

Design