Edit

SegmentedBar

<segmentedBar> is a UI bar component that displays a set of buttons for discrete selection. Can show text or images.

As opposed to <tabView>:

• The position of <segmentedBar> is not fixed.
• You can place and style it as needed on the page or inside additional app elements such as hamburger menus.
• You need to handle the content shown after selection separately.

See also:

• Official top-level documentation
• Detailed API specification

---

import * as React from "react";

<segmentedBar>
  <segmentedBarItem title="First" />
  <segmentedBarItem title="Second" />
  <segmentedBarItem title="Third" />
</SegmentedBar>

<segmentedBar
  items={listOfItems}
  selectedIndex={0}
  selectedIndexChange={onSelectedIndexChange}
/>

Props

Name	Type	Description
items	Array<SegmentedBarItem>	An array of items to be displayed in the segmented bar. Represents the button labels or icons of the segmented bar. The array must be created in advance.
selectedIndex	number	Sets the index of the selected item.
selectedBackgroundColor	Color	(Style property) Sets the background color of the selected item. To set the background color of the entire bar, use backgroundColor.
onSelectedIndexChange	(args:SelectedIndexChangedEventData) => void	Emitted when the an item on the segmented bar is tapped.

Native component

Android	iOS
android.widget.TabHost	UISegmentedControl