Main.mxml文件
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
mx|TabNavigator {
tabStyleName: "myTabs";
firstTabStyleName: "myTabs";
lastTabStyleName: "myTabs";
selectedTabTextStyleName: "mySelectedTabs";
}
.myTabs {
up-skin:ClassReference("TabNavigatorTabSkin");
down-skin:ClassReference("TabNavigatorTabSkin");
over-skin:ClassReference("TabNavigatorTabSkin");
disabled-skin:ClassReference("TabNavigatorTabSkin");
selected-up-skin:ClassReference("TabNavigatorTabSelectedSkin");
selected-down-skin:ClassReference("TabNavigatorTabSelectedSkin");
selected-over-skin:ClassReference("TabNavigatorTabSelectedSkin");
selected-disabled-skin:ClassReference("TabNavigatorTabSelectedSkin");
}
.mySelectedTabs {
}
</fx:Style>
<mx:TabNavigator x="120" y="70" width="200" height="200">
<s:NavigatorContent width="100%" height="100%" label="列表基础模板">
</s:NavigatorContent>
<s:NavigatorContent width="100%" height="100%" label="输入框">
</s:NavigatorContent>
</mx:TabNavigator>
</s:WindowedApplication>
皮肤页面
TabNavigatorTabSkin.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
minWidth="21" minHeight="21">
<!-- layer 1: fill -->
<s:Rect left="1" right="1" top="1" bottom="0" topLeftRadiusY="25" topRightRadiusY="25" topLeftRadiusX="25" topRightRadiusX="25">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xf3f8fb" alpha="1" />
<s:GradientEntry color="0xd3eaf8" alpha="1" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 2: highlight stroke -->
<s:Rect left="1" right="1" top="1" bottom="1" alpha=".22" topLeftRadiusY="25" topRightRadiusY="25" topLeftRadiusX="25" topRightRadiusX="25">
<s:stroke>
<s:LinearGradientStroke rotation="90">
<s:GradientEntry color="0xFFFFFF" alpha="1" />
<s:GradientEntry color="0xD8D8D8" alpha="1" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- layer 3: fill highlight -->
<s:Rect left="1" right="1" top="1" bottom="1" topLeftRadiusY="25" topRightRadiusY="25" topLeftRadiusX="25" topRightRadiusX="25">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF"
ratio="0.0"
alpha="0.12"/>
<s:GradientEntry color="0xFFFFFF"
ratio="0.48"
alpha="0.12" />
<s:GradientEntry color="0xFFFFFF"
ratio="0.48001"
alpha="0" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 4: border - unselected only -->
<s:Rect left="0" right="0" top="0" bottom="0" topLeftRadiusY="25" topRightRadiusY="25" topLeftRadiusX="25" topRightRadiusX="25">
<s:stroke>
<s:SolidColorStroke color="0xbed1d7" alpha="1" />
</s:stroke>
</s:Rect>
</s:SparkSkin>
TabNavigatorTabSelectedSkin.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
minWidth="21" minHeight="21">
<!-- layer 1: fill -->
<s:Rect left="1" right="1" top="1" bottom="0" topLeftRadiusY="25" topRightRadiusY="25" topLeftRadiusX="25" topRightRadiusX="25">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry
color="0xd3f0fe"
alpha="1" />
<s:GradientEntry
color="0x67c4ed"
alpha="1" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 2: highlight stroke -->
<s:Rect left="1" right="1" top="1" bottom="1" alpha="0" topLeftRadiusY="25" topRightRadiusY="25" topLeftRadiusX="25" topRightRadiusX="25">
<s:stroke>
<s:LinearGradientStroke rotation="90">
<s:GradientEntry color="0xFFFFFF" alpha="1" />
<s:GradientEntry color="0xD8D8D8" alpha="1" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- layer 3: fill highlight -->
<s:Rect left="1" right="1" top="1" bottom="1" topLeftRadiusY="25" topRightRadiusY="25" topLeftRadiusX="25" topRightRadiusX="25">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF"
ratio="0.0"
alpha="0.12"/>
<s:GradientEntry color="0xFFFFFF"
ratio="0.48"
alpha="0.12" />
<s:GradientEntry color="0xFFFFFF"
ratio="0.48001"
alpha="0" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 5: border - selected only -->
<s:Rect left="0" width="1" top="0" bottom="0" topLeftRadiusY="25" topRightRadiusY="25" topLeftRadiusX="25" topRightRadiusX="25">
<s:fill>
<s:SolidColor color="0x66a8c2" alpha="0" />
</s:fill>
</s:Rect>
<s:Rect left="1" right="1" top="0" height="1" topLeftRadiusY="25" topRightRadiusY="25" topLeftRadiusX="25" topRightRadiusX="25">
<s:fill>
<s:SolidColor color="0x66a8c2" alpha="0" />
</s:fill>
</s:Rect>
<s:Rect width="1" right="0" top="0" bottom="0" topLeftRadiusY="25" topRightRadiusY="25" topLeftRadiusX="25" topRightRadiusX="25">
<s:fill>
<s:SolidColor color="0x66a8c2" alpha="0" />
</s:fill>
</s:Rect>
</s:SparkSkin>