Flex中如何利用tabStyleName, firstTabStyleName, lastTabStyleName和selectedTabTextStyleName样式定制自己的TabNavigator的例子

http://blog.minidx.com/2008/10/04/1474.html

Flex中如何利用tabStyleName, firstTabStyleName, lastTabStyleName和selectedTabTextStyleName样式定制自己的TabNavigator的例子 By Minidxer | October 4, 2008

接下来的例子演示了Flex中如何利用tabStyleName, firstTabStyleName, lastTabStyleName和selectedTabTextStyleName样式，定制自己的TabNavigator。

让我们先来看一下Demo（

可以右键View Source或点击这里察看源代码

）：

下面是完整代码(或点击这里察看)：

Download: main.mxml<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">

<mx:Style>
TabNavigator {
backgroundColor: black;
cornerRadius: 0;
tabStyleName: "MyTabs";
firstTabStyleName: "MyFirstTab";
lastTabStyleName: "MyLastTab";
selectedTabTextStyleName: "MySelectedTab";
}

.MyTabs {
backgroundColor: black;
cornerRadius: 0;
color: black;
}

.MyFirstTab,
.MyLastTab {
backgroundColor: black;
cornerRadius: 0;
color: black;
}

.MySelectedTab {
backgroundColor: haloBlue;
color: haloBlue;
textRollOverColor: haloBlue;
}
</mx:Style>

<mx:TabNavigator id="tabNavigator"
width="100%"
height="100%"
tabHeight="40">
<mx:VBox label="Panel 1" backgroundColor="haloOrange">
<mx:Label text="TabNavigator container panel 1"/>
</mx:VBox>
<mx:VBox label="Panel 2" backgroundColor="haloGreen">
<mx:Label text="TabNavigator container panel 2"/>
</mx:VBox>
<mx:VBox label="Panel 3" backgroundColor="haloBlue">
<mx:Label text="TabNavigator container panel 3"/>
</mx:VBox>
<mx:VBox label="Panel 4" backgroundColor="haloSilver">
<mx:Label text="TabNavigator container panel 4"/>
</mx:VBox>
</mx:TabNavigator>

</mx:Application>