The ui5-segmented-button
shows a group of items. When the user clicks or taps
one of the items, it stays in a pressed state. It automatically resizes the items
to fit proportionally within the component. When no width is set, the component uses the available width.
ES6 Module Import​
import "@ui5/webcomponents/dist/SegmentedButton.js";
Basic Sample​
Download Open in Playground Edit
Properties​
accessibleName​
Description Defines the accessible ARIA name of the component. Type string | undefined
Default undefined Since 1.0.3
selectionMode​
Description Defines the component selection mode. Type "Single" | "Multiple"
Default "Single" Since 1.14.0
selectedItems​
Description Returns an array of the currently selected items. Type Array<ISegmentedButtonItem>
Default [] Readonly true Since 1.14.0
default​
Description Defines the items of ui5-segmented-button
.Note: Multiple items are allowed.Note: Use the ui5-segmented-button-item
for the intended design. Type Array<ISegmentedButtonItem>
selection-change​
Description Fired when the selected item changes. Type CustomEvent<SegmentedButtonSelectionChangeEventDetail>
Parameters selectedItems : Array<ISegmentedButtonItem>
an array of selected items. Since:1.14.0
Methods​
No methods available for this component.
CSS Parts​
No CSS parts available for this component.
More Samples​
Selection Modes​
You can define if single or multiple buttons can be pressed.
Download Open in Playground Edit