Minimal Stepper Navigation

Die minimal_stepper Komponente zeigt eine kompakte Fortschrittsanzeige für mehrstufige Prozesse an. Sie bietet eine einfachere Alternative zur vollständigen Stepper-Komponente.

WCAG AA
WCAG AAA

Funktionen

  • Kompaktes Design: Icon-basierte Anzeige ohne Textbeschriftungen.

  • Schrittzustände: „Aktiv“, „Erfolgreich“ und „Fehlgeschlagen“.

  • Konfigurierbare Größe: Die Größe der Icons lässt sich anpassen (xs/s/m/l/xl).

  • Two configuration modes: Either provide step items or use step_count/current_step.

HTML

Verwendung

Die Komponente wird über das minimal_stepper Tag eingebunden.

{% load insight_tags %} {% minimal_stepper config=min_stepper_config %}

Parameter

Laden…

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

Dataclass für die Komponentenkonfiguration.

Name Typ Beschreibung Standardwert Erforderlich
items list[StepStatus]

Liste der Zustände der Prozessschritte. Mögliche Werte: 'success' (Erfolg), 'failed' (Fehlschlag), 'active' (Aktiv) und '' (Inaktiv).

 [] False
step_count int

Anzahl der Prozessschritte. (Nur wenn 'items' nicht gesetzt ist!)

 0 False
current_step int

Aktueller Schritt des Prozesses. (Nur wenn 'items' nicht gesetzt ist!)

 0 False
current_step_status StepStatus
StepStatus

Status values for stepper components indicating step progress.

active success failed ""
Typen Dokumentation →

Status des aktuellen Schritts. (Nur wenn 'items' nicht gesetzt ist!)

 active False
icon_size Size
Size

Standard size scale used for spacing, icons, and component dimensions.

xs s m l xl
Typen Dokumentation →

Größe der Icons auf der Fortschrittsanzeige.

 xs False
MinimalStepperConfig(step_count=5, current_step=3)

Barrierefreiheit

WCAG AA WCAG AAA
Status

WCAG AA (Grundlagen)

  • Die Komponente hat role='group' mit `aria-label='Fortschrittsanzeige‘'.

  • Jeder Schritt hat ein aria-label, um dessen Status zu beschreiben (z. B. „Schritt 1: Abgeschlossen“).**

  • Der aktuelle Schritt ist mit aria-current='step' gekennzeichnet.

  • Dekorative Icons übernehmen die Eigenschaft aria-hidden='true' von der Icon-Komponente.

Verwandte Themen