Segmented Bar

Using a SegementedBar inside an Angular project gives you a simple way to define a collection of tabbed views. The SegmentedBar’s selectedIndexChange property notifies you for every changes of the component’s selectedIndex.

The specific SegmentedBar properties are:

  • items
  • selectedIndex
  • selectedIndexChange

API Reference for the SegementedBar Class

Native Component

Android iOS
android.widget.TabHost UISegmentedControl

Image

Basic Segmented Bar

HTML

<SegmentedBar [items]="myItems" selectedIndex="0" (selectedIndexChange)="onSelectedIndexChange($event)" class="m-5"></SegmentedBar>
<Label [text]="prop" textWrap="true" verticalAlign="center" class="h2 p-15 text-center"></Label>

TypeScript

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

@Component({
    moduleId: module.id,
    templateUrl: "./basic-segmented-bar.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class BasicSegmentedBarComponent {
    public myItems: Array<SegmentedBarItem>;
    public prop: string = "Item 1";

    constructor() {
        this.myItems = [];
        for (let i = 1; i < 5; i++) {
            const item = new SegmentedBarItem();
            item.title = "Tab " + i;
            this.myItems.push(item);
        }
    }

    public onSelectedIndexChange(args) {
        let segmetedBar = <SegmentedBar>args.object;
        this.prop = "Item" + (segmetedBar.selectedIndex + 1);
    }
}

Improve this document

Demo Source


Segmented Bar Views

HTML

<SegmentedBar [items]="items" (selectedIndexChange)="onSelectedIndexChange($event)" class="m-5" ></SegmentedBar>
<GridLayout visibility="{{ visibility1 ? 'visible' : 'collapsed' }}" backgroundColor="white">
    <Label [text]="'The new selectedIndex is: ' + selectedIndex" class="m-15 h3 p-5 text-center"></Label>
</GridLayout>

<GridLayout rows="*" visibility="{{ visibility2 ? 'visible' : 'collapsed' }}" backgroundColor="green">
    <Label [text]="'The new selectedIndex is: ' + selectedIndex" class="m-15 h3 p-5 text-center" color="white"></Label>
</GridLayout>

<GridLayout rows="*" visibility="{{ visibility3 ? 'visible' : 'collapsed' }}" backgroundColor="red">
    <Label [text]="'The new selectedIndex is: ' + selectedIndex" class="m-15 h3 p-5 text-center" color="white"></Label>
</GridLayout>

Setting SegmentedBar's items and visibility of the views

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

@Component({
    moduleId: module.id,
    styleUrls: ["./style.css"],
    templateUrl: "./segmented-bar-views.component.html"
})
export class SegmentedBarViewsComponent {
    public items: Array<SegmentedBarItem>;
    public selectedIndex = 0;
    public visibility1 = true;
    public visibility2 = false;
    public visibility3 = false;

    constructor() {
        this.items = [];
        for (let i = 1; i < 4; i++) {
            let segmentedBarItem = <SegmentedBarItem>new SegmentedBarItem();
            segmentedBarItem.title = "View " + i;
            this.items.push(segmentedBarItem);
        }
        this.selectedIndex = 0;
    }

    public onSelectedIndexChange(args) {
        let segmetedBar = <SegmentedBar>args.object;
        this.selectedIndex = segmetedBar.selectedIndex;
        switch (this.selectedIndex) {
            case 0:
                this.visibility1 = true;
                this.visibility2 = false;
                this.visibility3 = false;
                break;
            case 1:
                this.visibility1 = false;
                this.visibility2 = true;
                this.visibility3 = false;
                break;
            case 2:
                this.visibility1 = false;
                this.visibility2 = false;
                this.visibility3 = true;
                break;
            default:
                break;
        }
    }

}

Improve this document

Demo Source


Stay connected with NativeScript

(expect a newsletter every 4-8 weeks)

NativeScript
NativeScript is licensed under the Apache 2.0 license .
© Progress Software Corporation. All Rights Reserved.