Side Panel
Das Side Panel wird dazu verwendet, ergänzende Informationen oder Formulare zum Hauptinhalt anzuzeigen.
Overview
Intro
Das Side Panel wird typischerweise dazu verwendet, um ergänzende Informationen oder Formulare zum Hauptinhalt anzuzeigen. Es lässt sich in allen Seitentypen nutzen, ebenso im Wizard . Das Side Panel kann optional Tabs haben, um Inhalte zu strukturieren.
Verwendung
| 👍 Do | 👎 Don't |
|---|---|
| ... wenn die Aufgabe(n) im Side Panel den aktuellen Hauptinhalt ergänzen soll(en), bzw. nur im Kontext des aktuellen Hauptinhalts sinnvoll ist. ... wenn ergänzende Informationen zum Hauptinhalt angezeigt werden sollen, wie z.B. Notizen oder Hilfestellungen. | ... wenn eine Navigation zu komplexeren Objekten im Sinne des Master-Detail-Muster benötigt würde. Verwende dazu weiterhin das Master-Detail-Muster. |
Positionierung
| 👍 Do | 👎 Don't | 👍 Do | 👎 Don't |
|---|---|---|---|
| Das Side Panel nimmt immer die gesamte Höhe des Inhaltsbereichs ein. Dies gilt für alle Seiten-Templates. | Das Side Panel darf nicht unter Kopf- oder Suchzeilen untergeordnet sein. | AUSNAHME für Objektseiten: Ein Side Panel OHNE Tabs - und sehr wenig Inhalt - darf auch in einer Sektion eingefügt werden. | Aber, wenn es bereits ein Side Panel für die gesamte Seite gibt, darf es KEINE WEITERE Side Panels in einer Sektion geben. |
Guidelines
Aufbau
Side Panel Aufbau
- Tabs (optional): Optional können vertikale Tabs verwendet werden, um zwischen verschiedenen Inhalten des Side Panels navigieren zu können. Die Icon-Buttons müssen einen erläuternden Tooltip haben.
- Titelleiste: Beschreibender Titel für den Inhalt des Side Panels oder jedes Tabs.
- Schließen-Button: Schließt das Side Panel.
- Inhaltsbereich: Kann jegliche Layouts und Komponenten beinhalten. Wird vertikal scrollbar, wenn Inhalte größer sind als sichtbarer Bereich.
- Split-View-Anfasser: Wird im offenen Zustand des Side Panels angezeigt. Ermöglicht die manuelle Anpassung der Side Panel Breite per Drag.
- Indikator (optional): Hervorhebung für Tabs mit aktuell relevanten Inhalten.
- Functionbar (optional): Funktionsleiste mit Buttons
Verhalten
Öffnen und Schließen
Side Panel Verhalten Öffnen und Schließen
1) Optionaler Schließen-Button im Hauptinhalt
Optional kann ein Button im Inhaltsbereich oder in Funktionsleisten zum Öffnen und Schließen des Side Panels genutzt werden.
Die Button-Beschriftung wechselt je nach Zustand des Side Panels zwischen "Side Panel schließen" und "Side Panel anzeigen".
2) Tabs
Tabs ermöglichen das Öffnen von Inhalten im Side Panel. Dabei kann im offenen Zustand zwischen unterschiedlichen Inhalten hin und her gewechselt werden.
3) Schließen Icon-Button
Die Icon-Taste zum Schließen in der Titelleiste wird standardmäßig bereitgestellt.
4) Standardbreite und Anpassbarkeit
Das Side Panel öffnet sich immer in der Standardbreite (siehe " Responsives Verhalten "). Bei Bedarf können die Nutzer die Breite über den Anfasser per "Drag and Drop" ändern. Wenn im offenen Zustand zwischen Inhalten des Side Panels gewechselt wird, z.B. durch einen Klick auf einen anderen Tab, dann bleibt die Breite gegebenenfalls gleich.
Alternativ: Die Breite des Side Panels ist auch programmatisch konfigurierbar. Dadurch ist eine automatische Anpassung der Breite basierend auf vordefinierten Kriterien, wie dem Inhalt oder dem ausgewählten Tab, möglich.
Tabs im Detail
1) Tooltips
Jeder Tab muss einen Tooltip haben, der seine Funktion erklärt.
2) Optionaler Indikator für wichtige Inhalte
Indikatoren können optional genutzt werden, um auf wichtige Inhalte im Side Panel hinzuweisen. Verwende keine nummerierten Indikatoren in den Tabs. Diese sind der Benachrichtigungszentrale vorbehalten.
Info für Dev
Die Komponente bietet die Möglichkeit nach dem Laden einzelne Tabs oder die Indikatoren im Side Panel zu aktualisieren.
Standard-Icons für Tabs
Bestimmte Side Panel-Inhalte müssen durch einheitliche Icon-Buttons dargestellt werden.
Standard-Icons
Hilfe
Hilfeartikel zur aktuellen Ansicht
Icon: help
Anhänge
Dokumente und Anhänge zu einem Sachverhalt, z.B. aus einem Dokumenten Management System.
Icon: file_present
Notizen
Notizen zu einem Sachverhalt. Siehe auch Notizen.
Icon: sticky_note_2
Aufgaben
Aufgaben und To-Dos zu einem Sachverhalt.
Icon: task_alt
Details
Details und Metainformationen die z.B. bei einem Drill-Down angezeigt werden sollen.
Icon: info
Hinweis
Es sollte stets geprüft werden, ob für einen bestimmten Inhalt bereits ein Icon verwendet wurde. Falls ja, sollte dasselbe Icon wiederverwendet werden, um Konsistenz zu gewährleisten.
Responsives Verhalten
Das Side Panel passt sich automatisch an die verfügbare Größe des Containers an.
Container Large (75% Hauptinhalt zu 25% Side Panel)
Container Medium (67% Hauptinhalt zu 33% Side Panel)
Container Small (0% Hauptinhalt zu 100% Side Panel, dieses verdrängt/überlagert den Hauptinhalt)
Barrierefreiheit
Die Komponente stellt selbst die Barrierefreiheit sicher. Bei der Implementierung ist neben dem Eintragen der Tooltips für Tabs nichts weiter für die Barrierefreiheit zu berücksichtigen.