Flex中如何通过tabStyleName, tabWidth和textAlign样式，设置TabBar控件内文本对齐方式...

最新推荐文章于 2024-01-24 20:28:22 发布

最新推荐文章于 2024-01-24 20:28:22 发布 · 142 阅读

文章标签：

本文介绍了一个使用 Flex 框架实现的 TabBar 组件案例，通过自定义样式来改变 Tab 的文本对齐方式。用户可以通过下拉菜单选择不同的对齐方式，实时更新 Tab 的文本对齐效果。

main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Applicationname="TabBar_tabStyleName_textAlign_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
.customTabStyleName {
textAlign: center;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.events.ListEvent;
private function comboBox_change(evt:ListEvent):void {
var cssObj:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".customTabStyleName");
cssObj.setStyle("textAlign", comboBox.selectedItem.label);
}
]]>
</mx:Script>
<mx:Arrayid="comboBoxDP">
<mx:Objectlabel="left" />
<mx:Objectlabel="center" />
<mx:Objectlabel="right" />
</mx:Array>
<mx:Arrayid="tabBarDP">
<mx:Objectlabel="Red" />
<mx:Objectlabel="Orange" />
<mx:Objectlabel="Yellow" />
<mx:Objectlabel="Green" />
<mx:Objectlabel="Blue" />
</mx:Array>
<mx:ApplicationControlBardock="true">
<mx:FormstyleName="plain">
<mx:FormItemlabel="textAlign:">
<mx:ComboBoxid="comboBox"
dataProvider="{comboBoxDP}"
selectedIndex="1"
change="comboBox_change(event);"/>
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:TabBarid="tabBar"
dataProvider="{tabBarDP}"
tabWidth="120"
tabStyleName="customTabStyleName"/>
</mx:Application>