Status Screen Layout

Die status_screen-Komponente rendert eine wiederverwendbare, ganzseitige Statusansicht. Sie vereint Markenelement, Oberfläche, Statussymbol, Titel, Beschreibung, Hinweis und Aktionen für gängige Anwendungszustände.

Die Komponente ist bewusst allgemein gehalten. Diese kann für Authentifizierungsfehler, abgelaufene Sitzungen, Zugriffszustände, Bereitstellungszustände, leere Starts oder Workflow-Ergebnisse verwendet werden, ohne die Komponente an die Authentifizierungslogik zu koppeln.

WCAG AA

Funktionen

  • Semantischer Status: Unterstützt info, success, warning und danger.

  • Wiederverwendbare Aktionen: Verwendet die Standardkomponente button und ButtonConfig.

  • Token-basierte Benutzeroberfläche: Verwendet die Insight-UI-Token für Benutzeroberfläche, Rahmen, Radius und Schatten.

  • Optionales Markenzeichen: Kann ein brand_mark über der Statuskarte anzeigen.

HTML

Verwendung

Die Komponente wird über das status_screen Tag eingebunden.

{% load insight_tags %} {% status_screen title="Sign-in failed" description="The SSO process could not be completed." status="error" notice_title="What happened?" notice="Please try again or contact support if the issue persists." primary_action=retry_button secondary_action=support_button %}

Parameter

Laden…

config (StatusScreenConfig oder als kwargs oder als Kombination aus beidem)

Dataclass für die Komponentenkonfiguration.

Name Typ Beschreibung Standardwert Erforderlich
title str

Hauptstatusbezeichnung.

 None True
description str | list[str]

Beschreibung des Status.

 "" False
status AlertType
AlertType

Semantic types for alerts and notifications.

info success warning error
Typen Dokumentation →

Art des Status.

 info False
brand

Optionales Markenzeichen, welches über der Karte abgebildet ist.

 None False
notice_title str

Optionale Überschrift für den Hinweis.

 "" False
notice str

Optionaler Hinweis.

 "" False
primary_action

Primärer 'Call-to-Action'-Button.

 None False
secondary_action ButtonConfig

Sekundärer 'Call-to-Action'-Button.

 None False
actions list[ButtonConfig
]

Zusätzliche Buttons.

 [] False
css_class str

Optionale CSS-Klassen für den äußeren Abschnitt.

 "" False
card_css_class str

Optionale CSS-Klassen für die Statuskarte.

 "" False
StatusScreenConfig( title="Sign-in failed", description="The SSO process could not be completed.", status="error", notice_title="What happened?", notice="Please try again or contact support if the issue persists.", primary_action=ButtonConfig(label="Try again", request_url="/login/", type="primary"), secondary_action=ButtonConfig(label="Back to start", request_url="/", type="secondary"), )

Barrierefreiheit

WCAG AA WCAG AAA
Status
N/A

WCAG AA (Grundlagen)

  • Der Status Titel wird als semantisches <h1> Element gerendert.

  • Das dekorative Status-Icon wird mithilfe von vor aria-hidden assistiven Technologien ausgeblendet.

  • Fehlermeldungen verwenden role='alert'; alle anderen Meldungen verwenden role='status'

  • Actions werden über die button mit eindeutigen Beschriftungen dargestellt.

Verwandte Themen