Segmented
A segmented control is a user interface element with distinct buttons for selecting options or navigating through categories. It simplifies the user experience by providing an intuitive and visually appealing way to make selections or switch between states.
This component is subject to change before final release. Design is not locked yet and might be updated.
Behaviour
Array of Strings
An array of strings represents the options in a segmented control component. Each string element in the array represents a distinct choice or category that users can select. The strings provide clear and concise labels for each option, allowing users to understand and make their desired selection within the segmented control. This simple and straightforward representation of options is commonly used when no additional properties, such as icons or titles, are required for the choices in the segmented control.
Array of SegmentedOption
An array of SegmentedOption represents options in a segmented control, accommodating cases where a simple string is insufficient and allowing for the inclusion of icons and titles for each choice.
type SegmentedOption = {
icon?: Icons;
title?: string;
}
API
Properties
| Property | Description | Type | Default |
|---|---|---|---|
options | defines the available choices as an array of strings or an array of custom SegmentedOption objects. | (string SegmentedOption)[] | - |
selected-index | if given, the selected item at index in the control will be selected | number | - |
size | Size of the segmented control component | base large small | - |
skin | Skin set on the entire segmented control | SkinType.PRIMARY | SkinType.PRIMARY |
Events
| Name | Type | Description | Extra |
|---|---|---|---|
| atChange | CustomEvent<number> | Emit index when clicked | - |