Segmented Control
Die Segmented Control ist eine Schaltflächenreihe mit verwandten Auswahlmöglichkeiten, um Inhalte innerhalb derselben Ansicht zu filtern oder die Darstellung zu ändern.
Overview
INFO
Der Segmented Button basiert nicht auf einer eigenen Web Component. Stattdessen nutzt er technisch bei Mehrfachauswahl die Checkbox Group und bei Einzelauswahl die Radio Button Group. Für Vue wurde jedoch eine eigene Segmented-Button-Komponente entwickelt, die intern je nach Anwendungsfall zwischen Checkbox und Radio Button umschaltet.
Intro
Die Segmented Control ist eine Schaltflächenreihe mit verwandten Auswahlmöglichkeiten, um Inhalte innerhalb derselben Ansicht zu filtern oder die Darstellung zu ändern.
Segmented Control mit 5 Schaltflächen
Verwendung
| 👍 Do | 👎 Don't |
|---|---|
| ...wenn man die Darstellung von Inhalten innerhalb derselben Ansicht ändern will. ...als (zusätzlicher) Filter in Tabellen mit vielen Datensätzen, z.B. sollen ausschließlich fehlerhafte oder ausgewählte Datensätze angezeigt werden. | ... wenn man zwei unterschiedliche Datensätze anzeigen will, z.B. zwei Tabellen. Zum Trennen und Wechseln zwischen Inhalten oder für verschiedene Ansichten eignen sich besser Tabs (Sichtreiter). ... wenn man ihn wie ein Button einsetzen will, der eine Aktion ausführt. |
Guidelines
INFO
Der Segmented Button basiert nicht auf einer eigenen Web Component. Stattdessen nutzt er technisch bei Mehrfachauswahl die Checkbox Group und bei Einzelauswahl die Radio Button Group. Für Vue wurde jedoch eine eigene Segmented-Button-Komponente entwickelt, die intern je nach Anwendungsfall zwischen Checkbox und Radio Button umschaltet.
Aufbau
Die Komponente besteht aus 2-5 Schaltflächen, die je nach Use Case definiert werden. Die Segmented Control kann als alleinstehende Komponente verwendet werden oder steht innerhalb der Grid Toolbar zur Verfügung.
Die weiteren Schaltflächen ermöglichen es, Elemente gefiltert (z.B. fehlerhafte oder ausgewählte Zeilen, abgeschlossene Vorgänge, etc.) oder in einer anderen Darstellung anzuzeigen. Das Tooltip-Icon und ein Icon (links) kann bei Bedarf ein- oder ausgeblendet werden.
Aufbau Segmented Control
Segmented Control in der Grid Toolbar
Der Counter ist in diesem Fall in der Segmented Control integriert und nicht im Tabellentitel. Dadurch wird ein Verschieben der Segmented Control bei Zahländerungen im Titel vermieden.
| 👍 Do | 👎 Don't |
|---|---|
Varianten/Typen
Die Segmented Control Komponente kann mit oder ohne Counter verwendet werden.
 | Mit Counter |
 | Ohne Counter |
Verhalten
Mindestens eine der Schaltflächen ist immer ausgewählt. Die Segmented Control kann sich wie ein zusätzlicher direkterer Filter zur Suchleiste verhalten oder die Darstellung innerhalb derselben Ansicht ändern. Aus diesem Grund ist er z.B. in Tabellen vor allem für große Datensätze nützlich, wenn diese z.B. schon über die Suchleiste gefiltert wurden.
Ansichtswechsel zwischen Tabellen
States
Die Segmented Control hat keine States als solche, es gibt also z.B. den Zustand "Disabled" nicht. Schaltflächen können ausgewählt ("Selected") oder nicht ausgewählt ("Enabled") sein. Nur nicht ausgewählte Segmente haben einen Hover-Zustand.
Zustände Segmented Controls
Barrierefreiheit
Schaltflächen können mit der Tabulatortaste ("Tab") oder Umschalt- und Tabulatortaste ("Shift" + "Tab") ausgewählt werden. Der Fokus beginnt bei der linken Taste. Über die Pfeiltasten ändert man den Fokus. Eine fokussierte Schaltfläche kann mit der Eingabetaste ("Enter"), der Rücktaste ("Return") oder der Leertaste ("Space") ausgewählt werden. Nach Auswahl der letzten Taste beginnt der Durchgang der Schaltflächen durch erneutes Drücken der Tabulatortaste von vorne. Ausgewählte Schaltflächen können wieder ausgewählt oder abgewählt werden.
Develop Flow
INFO
Der Segmented Button basiert nicht auf einer eigenen Web Component. Stattdessen nutzt er technisch bei Mehrfachauswahl die Checkbox Group und bei Einzelauswahl die Radio Button Group.
Der Showcase ist innerhalb des AKDB Netzwerks zu finden unter: https://mate-ds-flow-components-showcase-25.core-platform.kubt.akdb.net/?src=component%252Fsegmented-button