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.
Example: SegmentedBar with SegmentedBarItem
<SegmentedBar>
<SegmentedBarItem title="First" />
<SegmentedBarItem title="Second" />
<SegmentedBarItem title="Third" />
</SegmentedBar><segmentedBar>
<segmentedBarItem title="First" />
<segmentedBarItem title="Second" />
<segmentedBarItem title="Third" />
</segmentedBar><SegmentedBar>
<SegmentedBarItem title="First" />
<SegmentedBarItem title="Second" />
<SegmentedBarItem title="Third" />
</SegmentedBar><SegmentedBar>
<SegmentedBarItem title="First"></SegmentedBarItem>
<SegmentedBarItem title="Second"></SegmentedBarItem>
<SegmentedBarItem title="Third"></SegmentedBarItem>
</SegmentedBar><segmentedBar>
<segmentedBarItem title="First" />
<segmentedBarItem title="Second" />
<segmentedBarItem title="Third" />
</segmentedBar>Example: SegmentedBar with selectedIndex
<SegmentedBar
[items]="mySegmentedBarItems"
selectedIndex="0"
(selectedIndexChanged)="onSelectedIndexChanged($event)"
>
</SegmentedBar>import { Component, ChangeDetectionStrategy } from '@angular/core'
import {
SegmentedBar,
SegmentedBarItem,
SelectedIndexChangedEventData
} from '@nativescript/core'
@Component({
moduleId: module.id,
templateUrl: './usage.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class BasicSegmentedBarComponent {
mySegmentedBarItems: Array<SegmentedBarItem> = []
constructor() {
for (let i = 1; i < 5; i++) {
const item = new SegmentedBarItem()
item.title = 'Item ' + i
this.mySegmentedBarItems.push(item)
}
}
public onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
const segmentedBar = args.object as SegmentedBar
const oldIndex = args.oldIndex
const newIndex = args.newIndex
}
}<SegmentedBar row="0" class="m-5" selectedIndex="{{ sbSelectedIndex }}">
<SegmentedBar.items>
<SegmentedBarItem title="Item 1" />
<SegmentedBarItem title="Item 2" />
<SegmentedBarItem title="Item 3" />
</SegmentedBar.items>
</SegmentedBar>import { Observable, Page, PropertyChangeData } from '@nativescript/core'
export function onNavigatingTo(args) {
const page = args.object as Page
// set up the SegmentedBar selected index
const vm = new Observable()
vm.set('prop', 0)
vm.set('sbSelectedIndex', 0)
// handle selected index change
vm.on(Observable.propertyChangeEvent, (data: PropertyChangeData) => {
if (data.propertyName === 'sbSelectedIndex') {
vm.set('prop', data.value)
}
})
page.bindingContext = vm
}<segmentedBar
items={listOfItems}
selectedIndex={0}
selectedIndexChanged={onSelectedIndexChange}
/><segmentedBar selectedIndex="0" on:selectedIndexChanged="{onSelectedIndexChange}" /><segmentedBar> can be populated with {each} block.
Props
| Name | Type | Description |
|---|---|---|
|
|
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. |
|
|
Gets or sets the index of the selected item. |
|
|
(Style property) Gets or sets the background color of the selected item.
To set the background color of the entire bar, use |
|
|
Additional inherited properties are not shown. Refer to the API Reference |