Flex的如何对齐TabBar中tab的竖直位置（Vertically）的例子

在前面的 Flex的如何设置TabBar中tab的水平位置的例子中，我们了解了如何通过 horizontalAlign风格设置TabBar中tab的水平位置。

接下来的例子展示了如何通过设定 verticalAlign风格对齐TabBar中tab的竖直位置。

下面是完整代码：

Download: main.mxml

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">
7.     <mx:Style>
8.         TabBar {
9.             tabStyleName: myCustomTabStyleName;
10.             selectedTabTextStyleName: myCustomSelectedTabTextStyleName;
11.         }
13.         .myCustomTabStyleName {
14.             fillColors: haloBlue, haloGreen;
15.             fillAlphas: 1.0, 1.0;
16.         }
18.         .myCustomSelectedTabTextStyleName {
19.             color: white;
20.         }
21.     </mx:Style>
23.     <mx:Array id="arr">
24.         <mx:Object label="Button" />
25.         <mx:Object label="ButtonBar" />
26.         <mx:Object label="ColorPicker" />
27.         <mx:Object label="ComboBox" />
28.     </mx:Array>
30.     <mx:ApplicationControlBar dock="true">
31.         <mx:Form styleName="plain">
32.             <mx:FormItem label="verticalAlign:">
33.                 <mx:ComboBox id="comboBox">
34.                     <mx:dataProvider>
35.                         <mx:Array>
36.                             <mx:Object label="top" />
37.                             <mx:Object label="middle" />
38.                             <mx:Object label="bottom" />
39.                         </mx:Array>
40.                     </mx:dataProvider>
41.                 </mx:ComboBox>
42.             </mx:FormItem>
43.         </mx:Form>
44.     </mx:ApplicationControlBar>
46.     <mx:Box backgroundColor="black">
47.         <mx:TabBar id="tabBar"
48.                 dataProvider="{arr}"
49.                 height="200"
50.                 tabWidth="100"
51.                 tabHeight="40"
52.                 verticalAlign="{comboBox.selectedItem.label}"
53.                 direction="vertical" />
54.     </mx:Box>
56. </mx:Application>