Bullet Point List Navigation

Die bullet_point_list Komponente zeigt eine Liste von Aufgaben, Prozessschritten oder ähnlichen Elementen an. Die einzelnen Elemente können Links, Beschreibungen und einen Status enthalten.

WCAG AA

HTMX

Funktionen

Completion states: Checkmark indicator for completed items.
Aktuelles Element im Fokus: Visuelle Hervorhebung des aktiven Elements.
Klickbare Elemente: Elemente können mit bestimmten Seiten verlinkt sein.
Beschreibungen: Optionaler Beschreibungstext unter jedem Titel.
HTMX-Unterstützung: Optionale AJAX-Navigation.

HTML

RTL

Verwendung

Die Komponente wird über das bullet_point_list Tag eingebunden.

{% load insight_tags %} {% bullet_point_list config=bulletpoints_config %}  {% bullet_point_list items=bulletpoints %}

Parameter

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

Dataclass für die Komponentenkonfiguration.

Name	Typ	Beschreibung	Standardwert	Erforderlich
items		Liste der Bulletpoints.	[]	False
htmx		Optionale HTMX-Konfiguration für die AJAX-Navigation.	None	False

BulletPointListConfig( items=[ BulletPointItemConfig(title="Setup", description="Initial configuration", completed=True), BulletPointItemConfig(title="Configure", description="Add settings", current=True), BulletPointItemConfig(title="Deploy", description="Push to production"), ], )

Barrierefreiheit

	WCAG AA	WCAG AAA
Status		N/A

WCAG AA (Grundlagen)

Die Komponente verwendet ein semantisches <ol>-Element für die Struktur einer geordneten Liste.
Der aktuelle Schritt ist mit aria-current='step' gekennzeichnet.
Die Verbindungslinien zwischen den Elementen werden mithilfe von aria-hidden='true' für Screenreader ausgeblendet.
Aufzählungszeichen-Icons übernehmen aria-hidden='true' von der Icon-Komponente.