Einfach
Die aktive Ansicht ist per Tastatur und Maus erreichbar.
Der Panelzustand bleibt mit dem ausgewählten Tab synchron.
Leadity Designsystem
Inhaltsstruktur & Prozessführung
Registrierte Tabs gliedern parallele Ansichten, Accordions ordnen sekundäre Inhalte, Stepper führen durch lineare Abläufe und Splitter teilen veränderbare Arbeitsbereiche.
content-structure.css + .js
Tab und TabContainer
57 px Höhe, Roboto 18 px, `neutral-40` als Grundlinie und `neutral-80` für die aktive Linie.
Figma 3328:14720 · 8696:6976
Info und Bearbeiten
Das Info-i bleibt 16 px groß und besitzt eine unsichtbare 40-px-Trefferfläche.
Die Bearbeiten-Aktion verwendet die vorhandene 40-px-IconButton-Schale.
DotMenu und Plus
Weitere Aktionen werden über das registrierte DotMenu komponiert.
Plus und Bearbeiten nutzen freigegebene Font-Awesome-Light-Glyphen.
Einzelansicht
Bei nur einer Ansicht wird keine Tableiste und keine Tabpanel-Semantik ausgegeben.
Horizontaler Overflow
Chevrons und 64-px-Fade erscheinen nur bei tatsächlich verdecktem Inhalt.
Der aktive Tab bleibt beim Wechsel sichtbar.
Die Leiste scrollt unabhängig vom Seiten-Canvas.
Alle Labels bleiben vollständig im DOM.
Die Informationsbeziehung bleibt auch bei schmalen Flächen erhalten.
Die Scrollregion besitzt einen zugänglichen Namen und sichtbaren Fokus.
Die letzte Ansicht ist über Chevron, Scrollen und Tastatur erreichbar.
Tastatur: Pfeil links/rechts, Home und End. Tabaktionen bleiben eigenständige Controls und verändern den Auswahlzustand nicht.
Accordion, AccordionItem und AccordionHeader
Sekundäre Inhalte lassen sich unabhängig öffnen. Pflichtaktionen und für den Abschluss notwendige Informationen bleiben außerhalb verborgener Panels.
Figma 4629:1959 · 4629:2062 · 4625:9264
Auf weißer Fläche · drei Ebenen
Ergänzende Angaben zu Umweltkennzahlen und Nachweisen.
Methodik, Systemgrenzen und dokumentierte Annahmen.
Dokumentierte Faktoren und Quellenstände der Berechnung.
Sekundäre Angaben zu Entnahme, Verbrauch und Rückführung.
Ergänzende Erläuterungen zu Belegschaft und Lieferkette.
Auf grauer Fläche · kompakt
Der Geltungsbereich umfasst die ausgewählten Gesellschaften.
Quellenstände werden mit Berichtsjahr und Freigabe dokumentiert.
Tastatur: Enter oder Leertaste öffnet den fokussierten Header; Pfeil oben/unten sowie Home und End wechseln zwischen Headern derselben Ebene.
Stepper und StepperStep
Der horizontale Stepper zeigt den linearen Prozess. Nur der aktuelle Schritt ist gefüllt; vorherige und folgende Verbindungen bleiben semantisch getrennt.
Figma 5088:9261 · 5088:9262
Rücksprünge sind nur als echte Buttons verfügbar, wenn der Fachprozess sie erlaubt. Folgeschritte bleiben bis zu ihrer Freigabe nicht interaktiv.
Splitter und SplitterPanel
Die Orientierung folgt der Separatorachse. Pointer und Tastatur ändern denselben synchronen Prozentwert.
Figma 9526:10708
Vertikaler Separator
Navigation
Struktur und gespeicherte Ansichten.
Arbeitsbereich
Bearbeitung der ausgewählten Nachhaltigkeitsdaten.
Horizontaler Separator
Datenbereich
Tabellen- oder Listeninhalt mit eigener Scrollregion.
Details
Kontext zur aktuell fokussierten Auswahl.
Tastatur: Pfeil links/rechts für den vertikalen Separator, Pfeil oben/unten für den horizontalen Separator sowie Home und End für die Grenzen.