Flex中通过verticalGap样式设置LinkButton的竖直方向图标和标签之间距离的例子

By Minidxer | September 12, 2008

在前面的Flex中通过horizontalGap样式设置LinkButton控件图标(Icon)和标签(Label)之间间隔距离的例子中,我们了解了Flex中如何通过horizontalGap样式,设置LinkButton控件图标(Icon)和标签(Label)之间间隔距离。类似的,接下来的例子演示了Flex中如何通过verticalGap样式,设置LinkButton的竖直方向图标和标签之间距离。

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


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

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application name="LinkButton_verticalGap_test"
  3.         xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         layout="vertical"
  5.         verticalAlign="middle"
  6.         backgroundColor="white">
  7.  
  8.     <mx:ApplicationControlBar dock="true">
  9.         <mx:Form styleName="plain">
  10.             <mx:FormItem label="verticalGap:">
  11.                 <mx:HSlider id="slider"
  12.                         minimum="0"
  13.                         maximum="10"
  14.                         value="2"
  15.                         snapInterval="1"
  16.                         tickInterval="1"
  17.                         liveDragging="true" />
  18.             </mx:FormItem>
  19.             <mx:FormItem label="labelPlacement:">
  20.                 <mx:ComboBox id="comboBox"
  21.                         dataProvider="[top,bottom]" />
  22.             </mx:FormItem>
  23.         </mx:Form>
  24.     </mx:ApplicationControlBar>
  25.  
  26.     <mx:LinkButton id="linkButton"
  27.             label="LinkButton"
  28.             icon="@Embed('assets/LinkButton.png')"
  29.             verticalGap="{slider.value}"
  30.             labelPlacement="{comboBox.selectedItem}" />
  31.  
  32. </mx:Application>
代码:Peter deHaan 翻译/整理/编译:中文Flex例子

Topics: Flex | Tags: , , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Archives

Sponsored Ads