Playground
Verwende <SegmentedControl />, um ein SegmentedControl anzuzeigen.
import { Label, Segment, SegmentedControl, } from "@mittwald/flow-react-components"; <SegmentedControl defaultValue="ssh-key"> <Label>Authentifizierungsart</Label> <Segment value="ssh-key">SSH-Key</Segment> <Segment value="passwort">Passwort</Segment> </SegmentedControl>
Mit Inhaltsänderung
Unterhalb des SegmentedControls kann sich der Inhalt je nach Bedarf ändern.
Mit FieldDescription
Innerhalb der <SegmentedControl /> kann eine hilfreiche <FieldDescription />
eingebaut werden.
States
Eine SegmentedControl hat 2 States: Default und Disabled. Die Optionen verfügen über die States Default, Hover, Pressed, Disabled, Focused und Selected.
-
Selected: Wird eine Option vom User ausgewählt, so erhält er den Zustand Selected. Es kann immer nur eine Option diesen Status haben. Zu Beginn ist immer die erste Option vorausgewählt.
-
Disabled: Einzelne Optionen oder die gesamte SegmentedControl können den State Disabled haben. Wenn die SegmentedControl den State Disabled erhält, erhalten automatisch auch alle Optionen ebenfalls diesen State, sodass sie vom User nicht ausgewählt werden können.
Container Breakpoint Size
Das SegmentedControl springt in eine kompakte Variante um, sobald der Container
kleiner als der gesetzte Breakpoint ist. Im Default passiert das bei 550px, was
der containerBreakpointSize="m" entspricht. Über diese Property kann die Größe
mit Werten zwischen xs und xl überschrieben werden.
Kombiniere mit ...
ContextualHelp
Benutze die ContextualHelp Komponente, wenn du weitere Informationen bereitstellen möchtest, und diese zu lang für die FieldDescription sind.