Application Bar

Die Application Bar ermöglicht den Nutzern zwischen Modulen oder Softwareanwendungen zu navigieren.

Overview

Intro

Die Application Bar dient dazu, zwischen verschiedenen Modulen oder ganzen Softwareanwendungen zu wechseln. Sie wird in der Regel bei Fachverfahren eingesetzt.

broken_image

Figma

Application Bar

Technische Grundlage

Die Application Bar ist keine eigenständige Komponente. Sie ist ein Bereich des App Layouts : Das Mate App Layout Addon stellt im App Layout den Bereich "application-bar" bereit, in den die Anwendung ihren Inhalt platziert. Als Inhalt werden Tabs in der Theme-Variante "application-bar" mit vertikaler Ausrichtung verwendet: <vaadin-tabs theme="application-bar" orientation="vertical" slot="application-bar">.

Die Application Bar kann deshalb nicht außerhalb des App Layouts verwendet werden. Sobald sie im App Layout vorhanden ist, ändert sich die Bedienung des Navigation Panels (siehe Verhalten).

Verwendung

👍 Do	👎 Don't
...wenn es mehrere komplexe Module oder Softwareanwendungen gibt	...wenn eine Anwendung nur aus einem Modul besteht, hier wird nur ein Hamburger Menu im Global Header und das Navigation Panel verwendet (siehe Mate Application) ...wenn es sich nicht um ein Fachverfahren handelt sondern um eine Anwendung, die z.B. primär von Bürgern verwendet wird. Hier wird nur ein Hamburger Menu im Global Header und das Navigation Panel verwendet (siehe Mate Application)

Guidelines

Aufbau

Die Application Bar enthält Icon-Buttons zum Wechsel zwischen Modulen und Softwareanwendungen. Sofern in einem Fachbereich ein übergreifendes Dashboard existiert, ist dieses vom jeweiligen Fachbereich zu implementieren und als erste Schaltfläche des Fachbereichs mit einem spezifischen Icon darzustellen.

In der Application Bar werden sämtliche Module und Anwendungen aller Fachverfahren angezeigt, für die ein Nutzer die entsprechende Berechtigung besitzt. Jeder Button ist dabei fest einem Modul zugeordnet und verfügt über ein Icon, welches für das jeweilige Modul eindeutig ist. Eine aktive Auswahl in der Application Bar wird durch eine farbliche Hervorhebung sowie einen veränderten Hintergrund gekennzeichnet.

Am unteren Ende der Application Bar befindet sich ein Icon zum Einblenden des Navigation Panels . Dieses enthält die Menüeinträge für die einzelnen Module, sofern mehrere Module vorhanden sind (siehe Navigation Panel ).

broken_image

Figma

Mate Application Bar

Anordnung & Gruppierung

Die Application Bar schließt unterhalb des Global Headers an und wird direkt am linken Bildschirmrand platziert.

Ihre Breite ist im Design System festgelegt und ergibt sich aus der Größe der Icon-Buttons. Sie ist damit nicht frei wählbar. Das Navigation Panel schließt rechts an die Application Bar an; siehe App Layout für das Zusammenspiel der Bereiche.

Verhalten

Ein Klick auf einen Button in der Application Bar öffnet das Modul bzw. die Softwareanwendung. Falls das Modul ein Navigation Panel besitzt, wird der oberste Reiter geöffnet. Dieser Reiter kann ein modulspezifisches Dashboard sein (siehe Navigation Panel ).

Ist das Modul bereits geöffnet, führt ein weiterer Klick auf den selben Button zur Einstiegsseite des Moduls.

Per Rechtsklick auf den Modul-Button in der Application Bar kann die Einstiegsseite des Moduls in einem neuen Browser-Tab oder -Fenster geöffnet werden. Dabei wird immer die Einstiegsseite geladen – nicht die zuletzt angezeigte.

Wenn der Mauszeiger über einem Modul-Button in der Application Bar verweilt (Hover), wird der Modulname als Tooltip angezeigt.

Dashboards

Jedes Modul kann über ein eigenes Dashboard verfügen; auch Unterseiten innerhalb eines Moduls können jeweils ein eigenes Dashboard besitzen.

Zusammenhang mit dem Navigation Panel

Ob eine Application Bar vorhanden ist, bestimmt, wo das Navigation Panel auf- und zugeklappt wird. Das App Layout erkennt die Application Bar selbst und schaltet die Bedienelemente entsprechend um:

• Mit Application Bar: Das Icon zum Zuklappen befindet sich im geöffneten Navigation Panel selbst. Ist das Panel zugeklappt, erscheint das Icon zum Aufklappen unten am rechten Rand der Application Bar. Das Hamburger-Menü im Global Header wird in diesem Fall nicht angezeigt.
• Ohne Application Bar: Das Navigation Panel wird über das Hamburger-Menü im Global Header ein- und ausgeblendet. Die Icons im Panel selbst werden in diesem Fall nicht angezeigt.

Barrierefreiheit

Tastaturbedienung

Über Tabulatortaste ("Tab") oder Hochstell- und Tabulatortaste ("Shift" + "Tab") ist der ausgewählte Bereich in der Application Bar als erstes fokussiert. Nach dem Fokussieren des ersten nicht ausgewählten Bereichs, können andere Bereiche mit den Pfeiltasten angesteuert werden. Durch das Drücken der Pfeiltaste nach oben und der Pfeiltaste nach unten kann zwischen den Bereichen gewechselt werden. Ist ein Bereich im Fokus nachdem er mit den Pfeiltasten angesteuert wurde, kann dieser per Eingabetaste ("Enter") oder Leerzeichentaste ("Space") ausgewählt werden.