Segmented Bar

Using a SegmentedBar inside a NativeScript project gives you a simple way to define a collection of tabbed views. The SegmentedBar’s selectedIndexChange event is emitted you for every changes of the component’s selectedIndex.

Usage

HTML
TypeScript

<SegmentedBar [items]="mySegmentedBarItems" 
              selectedIndex="0" 
              (selectedIndexChange)="onSelectedIndexChange($event)">
</SegmentedBar>

import { Component, ChangeDetectionStrategy } from "@angular/core";
import { SegmentedBar, SegmentedBarItem, SelectedIndexChangedEventData } from "tns-core-modules/ui/segmented-bar";

@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 onSelectedIndexChange(args: SelectedIndexChangedEventData) {
        const segmentedBar = args.object as SegmentedBar;
        const oldIndex = args.oldIndex;
        const newIndex = args.newIndex;
    }
}

Improve this document

Demo Source

Styling

<SegmentedBar [items]="items"
              backgroundColor="green" color="white" 
              selectedBackgroundColor="red">
</SegmentedBar>

Note: The property selectedBackgroundColor will behave differently on different platforms. On Android, it will apply color for the underline of the selected bar item, while on iOS, it will apply background color for the whole selected bar item.

Improve this document

Demo Source

Properties

Name	Type	Description
`selectedIndex`	`number`	Gets or sets the selected index of the SegmentedBar component.
`items`	`Array<SegmentedBarItem>`	Gets or sets the items of the SegmentedBar.
`selectedBackgroundColor`	`Color`	Gets or sets the selected background color of the SegmentedBar component.

Events

Name	Description
`selectedIndexChanged`	Emitted when the selected index is changed (via interaction or programmatically).

API References

Name	Type
tns-core-modules/ui/segmented-bar	`Module`
SegmentedBar	`Class`
SegmentedBarItem	`Class`
SelectedIndexChangedEventData	`Interface`

Native Component

Android	iOS
android.widget.TabHost	UISegmentedControl

NativeScript Angular