Tab View

The TabView component provides a simple way to navigate between different views by tapping on some of the tabs or by swiping between the views. By default the TabView will load the view of the first tab, however it is possible to load alternative tabs when the app starts by setting the component’s selectedIndex property.

API Reference for the TabView Class

Native Component

Android iOS
android.support.v4.view.ViewPager UITabBarController

Image

Basic Tab View

Using a TabView inside an Angular 2 app requires some special attention about how to provide title, iconSource and content (view) of the TabItem. In a pure NativeScript application, TabView has an items property which could be set via XML to an array of TabViewItems (basically, an array of objects with title and view properties). However, NativeScript-Angular does not support nested properties in its HTML template, so adding TabViewItem to TabView is a little bit different. NativeScript-Angular provides a custom Angular 2 directive that simplifies the way native TabView should be used. The following example shows how to add a TabView to your page (with some clarifications later):

HTML

<TabView selectedIndex="0"  (selectedIndexChange)="onIndexChanged($event)" sdkExampleTitle sdkToggleNavButton>
    <StackLayout *tabItem="{title: 'NativeScript'}">
        <Label text="NativeScript" class="m-15 h2 text-left" color="blue"></Label>
        <ScrollView>
            <Label [text]="content" textWrap="true" class="m-15"></Label>
        </ScrollView>
    </StackLayout>
    <StackLayout *tabItem="{title: 'Icon'}">
        <Image class="m-t-30 m-b-15" src="res://icon" width="80" height="80"></Image>
        <Label text="NativeScript" textWrap="true" class="h2 m-x-auto" color="blue"></Label>
    </StackLayout>
</TabView>
  • tabItem: The TabView directive uses a JSON object to transfer properties to the native object. Actually, TabViewItem is a pretty simple object with just title, iconSource and view properties. Since title and iconSource are usually represented as text, TabView directive uses a small JSON object ({title: 'Profile', iconSource: '~/icon.png'}) to define these properties easily in HTML. View, however, is not so simple, therefore as TabViewItem. View TabView directive uses the tag where tabItem attribute is set.

This is a typical usage of the TabView directive; however, if further customization is required, there are a few options available.

Improve this document

Demo Source


Binding Tab View Items

You can use the NativeScript-Angular TabView selectedIndex property in two-way binding scenarios. Using this kind of binding is relatively simple. Just use the standard ngModel syntax to a data model property (for the sake of example, the TabViewTest class is used as binding context) and set the data model property tabSelectedIndex to the desired value.

HTML

<TabView [(ngModel)]="tabSelectedIndex" selectedColor="#FF0000" iosIconRenderingMode="alwaysOriginal" sdkExampleTitle sdkToggleNavButton>
    <StackLayout *tabItem="{title: 'Profile', iconSource: 'res://icon'}" >
        <ListView [items]="items">
            <ng-template let-item="item">
                <Label [text]="item.itemDesc"></Label>
            </ng-template>
        </ListView>
    </StackLayout>
    <StackLayout *tabItem="{title: 'Stats'}">
        <Label text="Second tab item"></Label>
    </StackLayout>
    <StackLayout *tabItem="{title: 'Settings'}">
        <Label text="Third tab item"></Label>
    </StackLayout>
</TabView>

TypeScript

import { Component } from "@angular/core";
import { StackLayout } from "ui/layouts/stack-layout";

import { TabView, SelectedIndexChangedEventData, TabViewItem } from "ui/tab-view";

export class DataItem {
    constructor(public itemDesc: string) {}
}

@Component({
    moduleId: module.id,
    templateUrl: "./binding-tab-view-items.component.html",
})
export class BindingTabViewItemsComponent {
    public items: Array<DataItem>;
    public tabSelectedIndex: number;

    constructor() {
        this.tabSelectedIndex = 1;
        this.items = new Array<DataItem>();
        for (let i = 0; i < 5; i++) {
            this.items.push(new DataItem("item " + i));
        }
    }
}

Improve this document

Demo Source


Customizing Tab View Items

The most common customization of TabView is customizing the background color of the selected tab item to use something other than the first tab item for start up. The following example shows how to achieve that with a few modifications to the previous example.

HTML

<TabView selectedIndex="1" selectedColor="#FF0000" iosIconRenderingMode="alwaysOriginal" sdkExampleTitle sdkToggleNavButton>
    <StackLayout *tabItem="{title: 'Profile', iconSource: 'res://icon'}" >
        <Label text="First tab item"></Label>
    </StackLayout>
    <StackLayout *tabItem="{title: 'Stats'}">
        <Label text="Second tab item"></Label>
    </StackLayout>
    <StackLayout *tabItem="{title: 'Settings'}">
        <Label text="Third tab item"></Label>
    </StackLayout>
</TabView>

The result is a TabView that selects the second tab at start up and uses the color red for the selected tab.

Improve this document

Demo Source


Tab View Items

HTML

<TabView selectedIndex="0" (selectedIndexChange)="onIndexChanged($event)" sdkExampleTitle sdkToggleNavButton>
    <StackLayout *tabItem="{title: 'NativeScript',  iconSource: 'res://logo_white_bg'}">
        <Label text="TabView item with Icon" textWrap="true" class="h2 m-x-auto" color="blue"></Label>
    </StackLayout>
    <StackLayout *tabItem="titleAndIcon">
        <Label text="TabView item with observable title and icon" textWrap="true" class="h2 m-x-auto" color="blue"></Label>
    </StackLayout>
</TabView>

TypeScript

import { Component } from "@angular/core";
import { StackLayout } from "ui/layouts/stack-layout";

import { TabView, SelectedIndexChangedEventData, TabViewItem } from "ui/tab-view";

@Component({
    moduleId: module.id,
    templateUrl: "./tab-view-items.component.html",
})
export class TabViewItemsComponent {
    public titleAndIcon: any = { title: "Icon", iconSource: "res://icon" };

    public onIndexChanged(args) {
        let tabView = <TabView>args.object;
        console.log("Selected index changed! New inxed: " + tabView.selectedIndex);
    }
}

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.