SegmentedBar

<SegmentedBar> is a UI bar component that displays a set of buttons for discrete selection.

<SegmentedBar>
  <SegmentedBarItem title="First" />
  <SegmentedBarItem title="Second" />
  <SegmentedBarItem title="Third" />
</SegmentedBar>

Props ​

items ​

items: SegmentedBarItem[]

An array of items to be displayed in the SegmentedBar.

selectedIndex ​

selectedIndex: number

Gets or sets the index of the selected item.

selectedBackgroundColor ​

selectedBackgroundColor: Color

Gets or sets the background color of the selected item.

To set the background color of the entire bar, use backgroundColor.

See Color.

selectedTextColor ​

selectedTextColor: Color

Gets 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 ​

title: string

Gets or sets the title of the SegmentedBarItem.

Events ​

selectedIndexChanged ​

on('selectedIndexChanged', (args: EventData) => {
  const segmentedBar = args.object as SegmentedBar
  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