Zum Hauptinhalt springen

SidePanel

SidePanel in Storybook

Verwendung​

Überblick​

Der Seitenbereich ordnet die Inhaltsstruktur und bietet Kontext zur Orientierung der Benutzer. Er dient der sekundären Navigation und bietet Zugriff auf Tools, Einstellungen oder zusätzliche Abschnitte. Auf der linken Seite des Bildschirms positioniert, erstreckt er sich vertikal von der Kopfzeile bis zum unteren Rand der Seite und verschiebt den Inhalt, anstatt ihn zu überlagern.

Zu verwenden​

  • Die Anwendung verfügt über mehrere Abschnitte, zwischen denen Benutzer häufig wechseln müssen.
  • Benutzer benötigen ein einheitliches Menü, das über alle Seiten hinweg sichtbar bleibt.
  • Es ist eine hierarchische Struktur mit Abschnitten und Unterabschnitten erforderlich.
  • Die Navigation sollte mit minimalen Klicks zugänglich sein.
  • Sie möchten es Benutzern ermöglichen, den Navigationsbereich zu reduzieren, um Platz zu sparen und gleichzeitig verfügbar zu bleiben.

Aufbau​

Abbildung zur Veranschaulichung des Aufbaus eines Seitenbereichs mit Container, Elementliste und reduzierbarer Symbolschaltfläche

  1. Bereichscontainer: Die Hauptstruktur, die alle Komponenten des Seitenbereichs enthält.
  2. Elementliste: Eine Liste auswählbarer Elemente.
  3. Schaltfläche mit reduzierbarem Symbol: Eine Pfeilschaltfläche, die anzeigt, ob das Bedienfeld reduziert oder erweitert werden kann. Durch Klicken wird der Status des Seitenbereichs umgeschaltet.

Nicht alle Elemente sind erforderlich. Fügen Sie nur das hinzu, was für Ihren spezifischen Anwendungsfall notwendig ist. Der Seitenbereich ist ein offener und flexibler Bereich, der je nach Anwendungsfall verschiedene Elemente aufnehmen kann. Teams können ihn anpassen, indem sie bei Bedarf verschiedene Komponenten und Funktionen hinzufügen und gleichzeitig für optimale Bedienerfreundlichkeit sorgen.

Verhalten​

  • Wird auf der linken Seite des Bildschirms angezeigt und erstreckt sich von der Kopfzeile bis zum unteren Rand der Seite.
  • Kann je nach den Anforderungen der Anwendung reduzierbar oder persistent sein.
  • Pusht den Inhalt, anstatt ihn zu überlagern, und sorgt so für ein klares und strukturiertes Layout.
  • Bietet schnellen Zugriff auf sekundäre Navigation, Tools oder kontextbezogene Aktionen, ohne den Haupt-Workflow zu unterbrechen.

Anwendungsbeispiele​

Beispiele für die Verwendung von Seitenbereichen, die ihre offene und flexible Eigenschaft verdeutlichen.

Seitenbereich mit Fortschrittsanzeige Seitenbereich mit Fortschrittsanzeige in Schritten


Seitenbereich mit Strukturansicht Seitenteil mit Strukturansichtkomponente