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

<<< @/../examples/typescript/src/ui/SegmentedBar/template.xml#example

<<< @/../examples/angular/src/ui/SegmentedBar/component.html#example

<<< @/../examples/react/src/components/ui/segmentedbar.tsx#example

<<< @/../examples/solid/src/ui/segmentedbar.tsx#example

<<< @/../examples/svelte/app/components/ui/SegmentedBar.svelte#example

<<< @/../examples/vue/src/ui/SegmentedBar/component.vue#example

items: SegmentedBarItem[]

An array of items to be displayed in the SegmentedBar.

selectedIndex: number

Gets or sets the index of the selected item.

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: Color

Gets or sets the text color of the selected item.

To set the text color of the entire bar, use selectedTextColor.

See Color.

For additional inherited properties, refer to the API Reference.

title: string

Gets or sets the title of the SegmentedBarItem.

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.

• Android: android.widget.TabHost
• iOS: UISegmentedControl