Version:
Toolbar
Die Toolbar kennzeichnet einen Inhaltsbereich und ordnet dessen Informationen sowie optionale, kontextbezogene Aktionen in einer gemeinsamen Kopfzeile an.
Overview
Intro
broken_image
Die Toolbar wird als Kopfzeile einer Liste, Tabelle oder Sektion eingesetzt. Der Informationsbereich links enthält den Titel und kann kontextbezogene Angaben ergänzen. Der Aktionsbereich rechts nimmt die Bedienmöglichkeiten des Inhaltsbereichs auf. Er ist optional; eine Toolbar kann auch ohne Aktionen erscheinen.
Verwendung
| 👍 Do | 👎 Don't |
|---|---|
| ... als Titelzeile einer Liste, Tabelle oder Sektion. ... wenn Aktionen eindeutig dem zugehörigen Inhaltsbereich zugeordnet sind. ... auch ohne Aktionen, wenn der Inhaltsbereich eine Toolbar als Titelzeile benötigt. | ... für globale Aktionen ohne direkten Bezug zum Inhaltsbereich. ... als allgemeine Seitenüberschrift. ... um beliebige Bedienelemente ohne gemeinsamen Kontext zu gruppieren. |
Guidelines
Aufbau
broken_image
Die Mate Toolbar besteht aus zwei Bereichen, einem Informationsbereich und einem optionalen Aktionsbereich:
1. Informationsbereich
Der Informationsbereich steht links und enthält immer den Titel des zugehörigen Inhaltsbereichs. Eine Anzahl in Klammern, eine Segmented Control oder eine Zustandsanzeige kann den Titel ergänzen, sofern sich die Angabe unmittelbar auf diesen Inhaltsbereich bezieht.
2. Aktionsbereich (optional)
Der Aktionsbereich steht rechts und ist optional. Er kann ein eigenständiges Suchfeld und eine Menu Bar als Aktionsgruppe enthalten. Das Suchfeld ist nicht Teil der Menu Bar.
Hinweis zum technischen Stand: Der rechte Bereich wird aktuell über eine Menu Bar abgebildet. Das Toolbar Layout ist zwar im Code vorhanden, wegen bekannter Probleme aber nicht offiziell freigegeben. Es ist aktuell nicht zu verwenden.
Varianten/Typen
Die Mate Toolbar wird in zwei Varianten eingesetzt:
Variante 1: Default
broken_image
Die Default-Variante wird oberhalb von Tabellen und Listen eingesetzt und stellt Titel, Status und kontextbezogene Funktionen bereit, mit denen Nutzer die Inhalte filtern, durchsuchen und bearbeiten können.
→ Siehe Grid Verhalten
→ Siehe List Verhalten
1. Titel (Anzahl optional)
Zeigt den Namen der Objektkategorie sowie die Gesamtanzahl der Einträge in Klammern an, z. B. „Objekte (746)". Die Anzahl ist optional und nicht verpflichtend. Wenn keine Objekte vorhanden oder gefunden wurden, wird kein Zahlenwert angezeigt. Bei Gruppierungen im Tree Grid wird nur die Anzahl der Wurzelelemente dargestellt. Generische Bezeichnungen wie „Objekte" sind zulässig. Die Schriftgröße kann je nach Kontext angepasst werden.
2. Segmented Control (optional)
Verwende die Segmented Control als zusätzlichen Filter bei vielen Datensätzen, z. B. um ausschließlich fehlerhafte oder ausgewählte Einträge anzuzeigen.
→ Siehe Segmented Control
3. Zustandsanzeige (optional)
Zeigt den aktuellen Zustand des assoziierten Grids oder der assoziierten List an. Die Zustandsanzeigen sind optional. Mehr Information zu den möglichen Zuständen werden im Abschnitt „States" angegeben.
Aktionsbereich rechts (Konfiguration)
broken_image
broken_image
Alle Aktionen beziehen sich auf den zugehörigen Inhaltsbereich. Batch-Aktionen sind nur aktiv, wenn mindestens ein Eintrag ausgewählt ist. Die wichtigste Aktion steht rechts. Das Suchfeld bleibt ein separates Element und ist nicht Bestandteil der Menu Bar.
Die Elemente können aktuell über die Menu Bar im Aktionsbereich eingebunden werden, perspektivisch wird das über das Toolbar Layout laufen.
Anordnung der Aktionen: Die Reihenfolge von links nach rechts entspricht abnehmender Priorität, die wichtigste Aktion ist rechts angeordnet. Ein Overflow-Menü erscheint nur, wenn der verfügbare Platz nicht ausreicht.
→ Siehe Buttons Varianten
Responsives Verhalten
Reicht der Platz für die Aktionen der Menu Bar nicht aus, werden sie in einem Overflow-Menü zusammengefasst. Die wichtigste, rechts angeordnete Aktion soll dabei so lange wie möglich sichtbar bleiben, weniger priorisierte Aktionen wandern zuerst in den Overflow.
Lazy Loading
Das Laden aller Einträge und Lazy Loading sind keine Varianten der Toolbar. Sie beschreiben die Datenbereitstellung des zugehörigen Grids oder der zugehörigen List.
Variante 2: Section Header
broken_image
Die Section Header Toolbar befindet sich im Kopfbereich einer Sektion auf einer Objektseite. Sie ist die minimale Variante der Mate Toolbar.
1. Sektionstitel
Zeigt den Namen der Sektion. Die Schriftgröße kann je nach Kontext angepasst werden.
2. Aktionsbereich (optional)
Alle Aktionen beziehen sich auf den zugehörigen Inhaltsbereich. Die wichtigste Aktion steht rechts.
Die Elemente können aktuell über die Menu Bar im Aktionsbereich eingebunden werden, perspektivisch wird das über das Toolbar Layout laufen.
→ Siehe Objektseite
Ausprägungen
Bei reinen Inhaltssektionen bleibt der Titel ohne Zähler. Enthält die Sektion ein Grid oder eine List, können Zähler, Zustandsanzeige und ein separates Suchfeld ergänzt werden. Aktionen werden über die Menu Bar angeboten.
Ohne Grid
broken_image
Die einfachste Ausprägung: Titel und optionaler Aktionsbereich rechts. Typisch bei Sektionen mit Key-Value-Facetten. Kein Zahlenwert im Titel.
Mit Grid (fixed)
broken_image
Enthält die Sektion ein Grid oder eine List, können Zähler, Zustandsanzeige und ein separates Suchfeld ergänzt werden. Aktionen werden über die Menu Bar angeboten.
Mit Grid (Lazy Loading)
Wird verwendet wenn die Sektion eine Tabelle mit vielen Einträgen enthält, die beim Scrollen nachgeladen werden. Der Zahlenwert im Titel aktualisiert sich beim Nachladen.
Anordnung & Gruppierung
broken_image
Der Informationsbereich ist linksbündig, der Aktionsbereich rechtsbündig angeordnet. Der verfügbare Zwischenraum trennt beide Bereiche. Fehlt der Aktionsbereich, bleibt der Informationsbereich links ausgerichtet.
Ein Suchfeld steht als eigenständiges Element vor der Aktionsgruppe. Die Menu Bar bündelt ausschließlich ausführbare Aktionen. Verwandte Aktionen können in Untermenüs zusammengefasst werden. Andere interaktive Komponenten werden nicht als Einträge der Menu Bar verwendet; die Menu Bar ist kein Layout-Container.
Die Aktionen sind von links nach rechts nach steigender Priorität angeordnet. Die wichtigste Aktion steht am rechten Ende der Menu Bar.
Verhalten
Das spezifische Verhalten der jeweiligen Variante ist eng mit der zugehörigen Komponente verknüpft und wird dort ausführlich beschrieben:
- Default Toolbar (Grid) → Siehe Grid Verhalten
- Default Toolbar (List) → Siehe List Verhalten
- Section Header Toolbar → Siehe Objektseite Verhalten
States
Die folgenden Grid-spezifischen States sind optional. Sie werden als Statusmeldung neben dem Titel ausgegeben, zum Beispiel in einem Grid Pro, in dem Fehler übergreifend für alle Zeilen gemeldet werden. Info ist die Standardausprägung dieser Statusmeldung und keine eigene Theme-Variante, Error wird über eine eigene Theme-Variante ausgezeichnet.
Allgemeine Zustände
| Zustand | Beschreibung |
|---|---|
| Standard | Zeigt den Titel und die für den Kontext vorgesehenen optionalen Elemente. |
| Ohne Aktionen | Zeigt den Titel und die vorgesehenen Informationen ohne Aktionsbereich. |
Für Grid und List
| Zustand | Beschreibung |
|---|---|
| Empty State | Sind keine Einträge vorhanden, wird im Titel kein Zahlenwert angezeigt. Der Inhaltsbereich zeigt „Keine Daten verfügbar.". |
| Keine Suchtreffer | Liefert eine Suche keine Treffer, wird im Titel kein Zahlenwert angezeigt. Der Inhaltsbereich zeigt „Keine Daten verfügbar.". |
Nur für Grid
Suche läuft…
Wird ausschließlich angezeigt, während eine Suche ausgeführt wird.
broken_image
Laden…
Wird ausschließlich angezeigt, während beim Scrollen weitere Daten nachgeladen werden.
broken_image
Error
Zeigt einen übergreifenden Fehler des zugehörigen Grids als Statusmeldung neben dem Titel an.
broken_image
Info
Zeigt einen ergänzenden Hinweis zum zugehörigen Grid als Statusmeldung neben dem Titel an.
broken_image
Warning
Zeigt eine Warnung zum zugehörigen Grid als Statusmeldung neben dem Titel an, beispielsweise „Suchkriterien wurden geändert.", wenn die angezeigten Ergebnisse nicht mehr den aktuellen Suchkriterien entsprechen.
broken_image
Barrierefreiheit
Die Mate Toolbar übernimmt ihre interne Semantik und die barrierefreie Ausgabe der Zustandsanzeige. Die eingesetzten Mate und Vaadin Komponenten stellen Fokusdarstellung und Tastaturbedienung bereit. Produktteams ergänzen deshalb keine eigenen Toolbar-Rollen, Live-Regionen oder Tastatursteuerungen.
Für die Verwendung in Produkten gilt:
- Der Titel benennt den zugehörigen Inhaltsbereich eindeutig. Sind mehrere Toolbars auf einer Seite vorhanden, unterscheiden sich ihre Titel.
- Das Suchfeld erhält eine sichtbare Beschriftung oder einen eindeutigen zugänglichen Namen.
- Icon-Tasten und Aktionen mit einer mehrdeutigen sichtbaren Beschriftung erhalten einen kontextbezogenen zugänglichen Namen. Bei einer Section Toolbar wird der Sektionstitel vorangestellt, beispielsweise „Hauptadresse bearbeiten".
- Der Sektionstitel benennt die Sektion eindeutig. Die weitere semantische Struktur der Sektion richtet sich nach der Objektseite.
- Statusmeldungen beschreiben den aktuellen Zustand verständlich und eindeutig.
- Für Tastaturbedienung und weitere Barrierefreiheitsregeln der Aktionsgruppe siehe die Menu Bar.