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.
Basic Usage
<triton-segmented
[options]="['option 1', 'option 2']"
></triton-segmented>
<TritonSegmented options={['option 1', 'option 2']} />
<html>
<head>
<script type="module">
import { defineCustomElements } from '~node_modules/@kognifai/triton-cl-common/loader/index.es2017.js';
defineCustomElements();
</script>
</head>
<body>
<triton-segmented
[options]="['option 1', 'option 2']"
></triton-segmented>
</body>
</html>
Behavior
Options
The options property of the segmented control gives two different
options of data types to pass. The simplest is just to pass an array of strings.
However it is also possible to pass an array of SegmentedOptions, which is useful,
when adding icons to each segment. Below are examples of both use cases.
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.
<triton-segmented
[options]="['option 1', 'option 2']"
></triton-segmented>
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.
The format of the SegmentedOption looks like this:
type SegmentedOption = {
icon?: Icons;
title?: string;
}
So a TritonSegmented Control using the SegmentedOption object might look like this:
<triton-segmented
[options]="[
{icon: 'cog', title: 'option 1'},
{icon: 'donut', title: 'option 2'}]"
></triton-segmented>
Selected option
Use the selectedIndex-property to set which option is selected.
Note that the index is 0-indexed.
<triton-segmented
[options]="['option 1', 'option 2', 'option 3']"
selectedIndex="1"
></triton-segmented>
Appearance
{ // Not applicable, only primary is active
/*
Skin
Use the skin-property to set the appearance of the segemented control.
*/}
<triton-segmented
[options]="['Segmented', 'control', 'with', 'alarm', 'skin']"
skin="alarm"
></triton-segmented>
Size
Use the size-property to set the size of the segemented control.
<triton-segmented
[options]="['This', 'control', 'looks', 'smaller']"
size="small"
></triton-segmented>
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 | - |