UI Components
SegmentedBar
UI component for discrete slection.
<SegmentedBar> is a UI bar component that displays a set of buttons for discrete selection.
xml
<SegmentedBar>
<SegmentedBarItemtitle="First" />
<SegmentedBarItemtitle="Second" />
<SegmentedBarItemtitle="Third" />
</SegmentedBar>html
<SegmentedBar>
<SegmentedBarItemtitle="First" />
<SegmentedBarItemtitle="Second" />
<SegmentedBarItemtitle="Third" />
</SegmentedBar>tsx
<segmentedBar>
<segmentedBarItemtitle="First" />
<segmentedBarItemtitle="Second" />
<segmentedBarItemtitle="Third" />
</segmentedBar>tsx
<segmentedbar>
<segmentedbaritemtitle="First" />
<segmentedbaritemtitle="Second" />
<segmentedbaritemtitle="Third" />
</segmentedbar>svelte
<segmentedBar>
<segmentedBarItemtitle="First" />
<segmentedBarItemtitle="Second" />
<segmentedBarItemtitle="Third" />
</segmentedBar>vue
<SegmentedBar>
<SegmentedBarItem title="First" />
<SegmentedBarItem title="Second" />
<SegmentedBarItem title="Third" />
</SegmentedBar>Props β
items β
ts
items: SegmentedBarItem[]An array of items to be displayed in the SegmentedBar.
selectedIndex β
ts
selectedIndex: numberGets or sets the index of the selected item.
selectedBackgroundColor β
ts
selectedBackgroundColor: ColorGets or sets the background color of the selected item.
To set the background color of the entire bar, use backgroundColor.
See Color.
selectedTextColor β
ts
selectedTextColor: ColorGets or sets the text color of the selected item.
To set the text color of the entire bar, use selectedTextColor.
See Color.
...Inherited β
For additional inherited properties, refer to the API Reference.
SegmentedBarItem Props β
title β
ts
title: stringGets or sets the title of the SegmentedBarItem.
Events β
selectedIndexChanged β
ts
on('selectedIndexChanged', (args:EventData) => {
constsegmentedBar= args.object asSegmentedBar
console.log('SegmentedBar index changed to:', segmentedBar.selectedIndex)
})Emitted when an item in the SegmentedBar is tapped.
Native component β
- Android:
android.widget.TabHost - iOS:
UISegmentedControl