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.
Application Bar
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 Navigationspanel 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 Navigationspanel 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 ).
Mate Application Bar
Anordnung & Gruppierung
Die Application Bar schließt unterhalb des Global Headers an und wird direkt am linken Bildschirmrand platziert.
Verhalten
Ein Klick auf einen Button in der Application Bar öffnet das Modul bzw. die Softwareanwendung. Falls das Modul ein Navigationspanel besitzt, wird der oberste Reiter geöffnet. Dieser Reiter kann ein modulspezifisches Dashboard sein (siehe Navigationspanel ).
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.
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.
Develop Vue
Die Implementierung der Webcomponenten in Vue.js kann in folgendem Showcase innerhalb des AKDB Netzwerks betrachtet werden: https://mate-ds-vue-components-showcase-25.core-platform.kubt.akdb.net/?path=/story/komponenten-application--default
Develop Flow
Der Showcase ist innerhalb des AKDB Netzwerks zu finden unter: https://mate-ds-flow-components-showcase-25.core-platform.kubt.akdb.net/?src=component%252Fapp-layout