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

By Minidxer | March 20, 2008

在前面的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">
  6.  
  7.     <mx:Style>
  8.         TabBar {
  9.             tabStyleName: myCustomTabStyleName;
  10.             selectedTabTextStyleName: myCustomSelectedTabTextStyleName;
  11.         }
  12.  
  13.         .myCustomTabStyleName {
  14.             fillColors: haloBlue, haloGreen;
  15.             fillAlphas: 1.0, 1.0;
  16.         }
  17.  
  18.         .myCustomSelectedTabTextStyleName {
  19.             color: white;
  20.         }
  21.     </mx:Style>
  22.  
  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>
  29.  
  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>
  45.  
  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>
  55.  
  56. </mx:Application>
原文作者：Peter deHaan 翻译：minidxer

Topics: Flex | Tags: , , , , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll

Sponsored Ads