Flex中创建一个竖直方向ButtonBar的例子

By Minidxer | July 27, 2008

和前面Flex中利用direction属性创建一个垂直LinkBar的例子类似的，接下来的例子演示了Flex中创建一个竖直方向ButtonBar。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


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

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:HBox>
  8.         <mx:ButtonBar id="buttonBar"
  9.                 direction="vertical"
  10.                 dataProvider="{viewStack}"
  11.                 themeColor="haloOrange"
  12.                 fontSize="16"
  13.                 width="200"
  14.                 height="200" />
  15.  
  16.         <mx:ViewStack id="viewStack"
  17.                 backgroundColor="white"
  18.                 width="300"
  19.                 height="{buttonBar.height}">
  20.  
  21.             <mx:Canvas id="checkCanvas"
  22.                     label="Success"
  23.                     icon="@Embed('assets/bulletCheck.png')">
  24.                 <mx:Label text="Success" />
  25.             </mx:Canvas>
  26.  
  27.             <mx:Canvas id="warningCanvas"
  28.                     label="Warning"
  29.                     icon="@Embed('assets/bulletWarning.png')">
  30.                 <mx:Label text="Warning" />
  31.             </mx:Canvas>
  32.  
  33.             <mx:Canvas id="criticalCanvas"
  34.                     label="Error"
  35.                     icon="@Embed('assets/bulletCritical.png')">
  36.                 <mx:Label text="Error" />
  37.             </mx:Canvas>
  38.  
  39.         </mx:ViewStack>
  40.     </mx:HBox>
  41.  
  42. </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