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

By Minidxer | January 3, 2009

接下来的例子演示了Flex中如何通过paddingTop样式，设置TabNavigator控件内容与Tabs间距离。

让我们先来看一下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: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>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: TabNavigator | No Comments » | Tags: ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll