Toggle View Karten

Mit der toggle_view Komponente können Benutzer zwischen verschiedenen Darstellungsformen der Daten wechseln. Dieselben Daten können als Karten, als Tabelle oder als Karussell angezeigt werden.

WCAG AA
HTMX

Funktionen

  • Anzeigemodi: Karten-, Tabellen- und Karussellansicht.

  • Ansichtsumschalter: Block mit Optionsfeldern zum Wechseln der Ansichten.

  • Konsistente Daten: Dieselben Daten, dargestellt in verschiedenen Formaten.

HTML

Verwendung

Die Komponente wird über das toggle_view Tag eingebunden.

{% load insight_tags %} {% toggle_view config=toggle_view_config %}

Parameter

Laden…

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

Dataclass für die Komponentenkonfiguration.

Name Typ Beschreibung Standardwert Erforderlich
tag_id str

Eindeutige ID für die Komponente.

 None True
cards

Die anzuzeigenden Karten.

 [] False
table_config

Konfiguration der Stepper.

 None False
view_radio_config

Konfiguration des Radio-Blocks für den Ansichtswechsel.

 None False
current_view ToggleViewType
ToggleViewType

View types for the toggle view component.

card table carousel
Typen Dokumentation →

Aktuell aktive Ansicht („Karte“, „Tabelle“, „Karussell“).

 card False
ToggleViewConfig( tag_id="products-view", cards=products_list, table_config=TableConfig(headers, rows), view_radio_config=RadioBlockConfig( name="view", items=[ RadioItemConfig(tag_id="card", value="card", icon=IconConfig(name="squares-2x2")), RadioItemConfig(tag_id="table", value="table", icon=IconConfig(name="list-bullet")), ], ), current_view="card", )

Barrierefreiheit

WCAG AA WCAG AAA
Status
N/A

WCAG AA (Grundlagen)

  • Der Ansichts-Switch nutzt die Komponente Radio Block, die eine Navigation per Tastatur ermöglicht.

  • Der Inhaltsbereich verfügt über das Attribut aria-live='polite', um Änderungen der Ansicht für Screenreader anzukündigen.

  • Der Inhaltscontainer verfügt über tabindex='-1', wodurch der Fokus nach Änderungen der Ansicht programmgesteuert gesetzt werden kann.

Verwandte Themen