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

<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

Events

API References

Native Component