NativeScript Angular

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.

Image

Usage

<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