TabBar in Flex4


 

TabBar in Flex4

The Spark TabBar control defines a horizontal row of related buttons. This Control uses a itemClickevent event which is used to select a tab from TAbBar.

The Spark TabBar control defines a horizontal row of related buttons. This Control uses a itemClickevent event which is used to select a tab from TAbBar.

TabBar control in flex4:

The Spark TabBar control defines a horizontal row of related buttons. This Control uses a itemClickevent  event which is used to select a tab from TAbBar. The TabBar control displays tabs in horizontal row . You provide data for a tabBar control by its dataProvider property. Dataporvider is the default property of TabBar control. The tag of TabBr control is <s:TabBar>.

Example:

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx">

<s:Panel title="TabBab Control Example" width="325" height="260" x="3"

 y="0" color="#990000">

<s:TabBar dataProvider="{vst}" color="BLack" width="172" height="28"

 x="0" y="0"/>

<mx:ViewStack id="vst"

borderStyle="solid" width="287" height="177" y="27">

<s:NavigatorContent id="html" label="HTML">

<s:BorderContainer width="100%" height="100%" borderWeight="1"

cornerRadius="10" dropShadowVisible="true" y="0">

<s:Label text="HTML is a Hyper Text Markup Language." x="-1" y="16"/>

</s:BorderContainer>

</s:NavigatorContent>

<s:NavigatorContent id="java" label="JAVA">

<s:BorderContainer width="100%" height="100%" borderWeight="1"

cornerRadius="10" dropShadowVisible="true">

<s:Label text="JAVA is an object oriented programming language." x="-1"

 y="16" color="Blue"/>

</s:BorderContainer>

</s:NavigatorContent>

<s:NavigatorContent id="unix" label="UNIX">

<s:BorderContainer width="100%" height="100%" borderWeight="1"

cornerRadius="10" dropShadowVisible="true">

<s:Label text="UNIX is an operating system." x="-1" y="16" color="Green"/>

</s:BorderContainer>

</s:NavigatorContent>

0

</mx:ViewStack>

</s:Panel>

</s:Application>

1

This is the example for TabBar control. Please select a tab in the TabBar control.

Output:

Running Application:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

Download this code

Ads