Flex中如何通过paddingTop样式设置TabNavigator控件内容与Tabs间距离的例子

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
3.         layout="vertical"
4.         verticalAlign="middle"
5.         backgroundColor="white">
6.  
7.     <mx:ApplicationControlBar dock="true">
8.         <mx:Form styleName="plain">
9.             <mx:FormItem label="paddingTop:">
10.                 <mx:HSlider id="slider"
11.                         minimum="0"
12.                         maximum="20"
13.                         value="10"
14.                         liveDragging="true"
15.                         snapInterval="1"
16.                         tickInterval="1" />
17.             </mx:FormItem>
18.         </mx:Form>
19.     </mx:ApplicationControlBar>
20.  
21.     <mx:TabNavigator width="360"
22.             height="120"
23.             paddingTop="{slider.value}"
24.             backgroundColor="#666666">
25.         <mx:VBox id="vb1" label="Red" backgroundColor="red">
26.             <mx:Label text="width:{vb1.width}, height:{vb1.height}" />
27.         </mx:VBox>
28.         <mx:VBox id="vb2" label="Orange" backgroundColor="haloOrange">
29.             <mx:Label text="width:{vb2.width}, height:{vb2.height}" />
30.         </mx:VBox>
31.         <mx:VBox id="vb3" label="Yellow" backgroundColor="yellow">
32.             <mx:Label text="width:{vb3.width}, height:{vb3.height}" />
33.         </mx:VBox>
34.         <mx:VBox id="vb4" label="Green" backgroundColor="haloGreen">
35.             <mx:Label text="width:{vb4.width}, height:{vb4.height}" />
36.         </mx:VBox>
37.         <mx:VBox id="vb5" label="Blue" backgroundColor="haloBlue">
38.             <mx:Label text="width:{vb5.width}, height:{vb5.height}" />
39.         </mx:VBox>
40.     </mx:TabNavigator>
41.  
42. </mx:Application>