TabView

Declaring the TabView in xml.

<Page>
 <TabView>
   <TabView.items>
     <TabViewItem title="Tab 1">
       <TabViewItem.view>
          <Label text="Label in Tab1" />
       </TabViewItem.view>
     </TabViewItem>
     <TabViewItem title="Tab 2">
       <TabViewItem.view>
          <Label text="Label in Tab2" />
       </TabViewItem.view>
     </TabViewItem>
   </TabView.items>
 </TabView>
</Page>

Using a TabView requires the "ui/tab-view" module.

import * as tabViewModule from "tns-core-modules/ui/tab-view";

Binding TabView.items

var items = [];
var StackLayout0 = new stackLayoutModule.StackLayout();
var label0 = new labelModule.Label();
label0.text = "Tab 0";
StackLayout0.addChild(label0);
var tabEntry0 = new tabViewModule.TabViewItem();
tabEntry0.title = "Tab 0";
tabEntry0.view = StackLayout0;
items.push(tabEntry0);
var StackLayout1 = new stackLayoutModule.StackLayout();
var label1 = new labelModule.Label();
label1.text = "Tab 1";
StackLayout1.addChild(label1);
var tabEntry1 = new tabViewModule.TabViewItem();
tabEntry1.title = "Tab 1";
tabEntry1.view = StackLayout1;
items.push(tabEntry1);
tabView.items = items;

Selecting a tab programmatically

tabView.selectedIndex = 9;

Creating a TabView

var tabView = new tabViewModule.TabView();

Using selectedIndexChanged changed event

tabView.on(tabViewModule.TabView.selectedIndexChangedEvent, (args: tabViewModule.SelectedIndexChangedEventData) => {
    actualOldIndex = args.oldIndex;
    actualNewIndex = args.newIndex;
});

Using selectedIndexChanged event from xml

<Page>
 <TabView selectedIndexChanged="onSelectedIndexChanged">
   ...
 </TabView>
</Page>
export function onSelectedIndexChanged(args) {...}

Note: Initially selectedIndexChanged event will be raised just after adding a new items to TabView without any user interaction, which will happen on TabView loaded. SelectedIndexChanged event will be raised because value of the selectedIndex property is changed from undefined (default) (with no items) to 0 (first tab item). Depends on how TabView.items are set or added it may happen to raise one or two times selectedIndexChanged event even before page events (loaded, navigatingTo, navigatedTo, ...).

Styling TabView

For the TabView component could be set three different styling properties

  • selectedTabTextColor (coresponding CSS property selected-tab-text-color ) - change the color of the text, while selecting some of the tabs.
  • tabBackgroundColor (coresponding CSS property tab-background-color) - changing the background of the tabs.
  • textTransform (coresponding CSS property text-transform) - setting up textTransform individual for every TabViewItem. Value options: capitalize, lowercase, none, uppercase.
<TabView selectedTabTextColor="#00FF00" tabBackgroundColor="#FF0000" >
            <TabView.items>
                <TabViewItem title="Tab 1" textTransform="lowercase">
                <TabViewItem.view>
                    <Label text="Label in Tab1" />
                </TabViewItem.view>
                </TabViewItem>
                <TabViewItem title="Tab 2" textTransform="lowercase">
                <TabViewItem.view>
                    <Label text="Label in Tab2" />
                </TabViewItem.view>
                </TabViewItem>
            </TabView.items>
</TabView>
  • androidSelectedTabHighlightColorandroid specific property (coresponding CSS property android-selected-tab-highlight-color) - setup underline color of the Tabs in Android.
<TabView androidSelectedTabHighlightColor="red">
                <TabView.items>
                    <TabViewItem title="Tab 1" >
                    <TabViewItem.view>
                        <Label text="Label in Tab1"/>
                    </TabViewItem.view>
                    </TabViewItem>
                    <TabViewItem title="Tab 2">
                    <TabViewItem.view>
                        <Label text="Label in Tab2" />
                    </TabViewItem.view>
                    </TabViewItem>
                </TabView.items>
    </TabView>

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.