A component which displays a set of buttons, only one of which can be active
at a time. Can be used in 'controlled mode' (by setting the value
prop) or
uncontrolled.
Usage
import { SegmentedControl } from 'nr1'
Examples
Basic
ReferenceError: SegmentedControl is not defined
With some hints
ReferenceError: SegmentedControl is not defined
Controlled
With icons
Icons only with some hints
Props
An array of maximum 5 <SegmentedControlItem />
s describing the
clickable segments in the control. Elements can either have just a
label
, or a label
and an icon
, but must be uniform across the
children. All elements can have an optional disabled
prop to
disable that button.
Appends class names to the component.
Should be used only for positioning and spacing purposes.
Called whenever a <SegmentedControlItem />
is clicked, with that
element's value
prop. Will also fire if the element currently
selected is clicked again. You can use this callback to update the
value
prop if you want to control its state.
function (event: React.MouseEvent<HTMLButtonElement>, value: any ) => undefined
Spacing property. Spacing is defined as a tuple of zero to four
values, which follow the same conventions as CSS properties like
margin
or padding
. To omit a value, use SPACING_TYPE.OMIT
.
<Array of<One ofSegmentedControl.SPACING_TYPE.EXTRA_LARGE,SegmentedControl.SPACING_TYPE.LARGE,SegmentedControl.SPACING_TYPE.MEDIUM,SegmentedControl.SPACING_TYPE.NONE,SegmentedControl.SPACING_TYPE.OMIT,SegmentedControl.SPACING_TYPE.SMALL,>
>
Inline style for custom styling.
Should be used only for positioning and spacing purposes.
Adds a data-test-id
.
Used to target the component in unit and e2e testing.
SegmentedControl .TYPE .NORMAL
Set this to SegmentedControl.TYPE.ICONS_ONLY
to only show icons.
Will be ignored if icons are not found in the children.
<One ofSegmentedControl.TYPE.ICONS_ONLY,SegmentedControl.TYPE.NORMAL,>
Set the currently-selected option in the control by updating this prop.
Methods
SegmentedControl.render
function () => undefined