Vertical ButtonBar buttons width
I am creating a vertical button bar with 3 buttons. How do I force the same width for all three buttons so it doesn't look like crap?
<s:ButtonBar x="10" y="10" dataProvider="{viewstack1}" >
<s:layout>
<s:VerticalLayout gap="-1"/>
</s:layout>
</s:ButtonBar>
<mx:ViewStack id="viewstack1" left="115" paddingRight="0" right="0" bottom="0" top="0">
<s:NavigatorContent label="ABC Products" width="100%" height="100%"><custom:Banner width="100%" height="100%"/></s:NavigatorContent>
<s:NavigatorContent label="Btn Player" width="100%" height="100%"><custom:Player /></s:NavigatorContent>
<s:NavigatorContent la开发者_StackOverflow中文版bel="Btn Cleaner" width="100%" height="100%"><custom:Cleaner width="100%"/></s:NavigatorContent>
</mx:ViewStack>
I had that problem too so I dropped s:VerticalLayout and used s:TileLayout with a fixed column width and it worked
<s:ButtonBar width="142" dataProvider="{almacen}" left="10" top="10">
<s:layout>
<s:TileLayout columnWidth="142"/>
</s:layout>
</s:ButtonBar>
Remember to define the gap, in order to avoid distance between the buttons
<s:layout>
<s:TileLayout verticalGap="-1" />
</s:layout>
Without forcing the width or setting the columnWidth in tile layout you can achieve the same result using horizontalAlign property of the vertical layout.
<s:ButtonBar id="btnBarVertical1" dataProvider="{menuData}" requireSelection="true" labelField="label">
<s:layout>
<s:VerticalLayout gap="-1" horizontalAlign="justify"/>
</s:layout>
</s:ButtonBar>
For icon based button bar apply the same property with iconPlacement to top like this...
<s:ButtonBar id="btnBarVertical2" dataProvider="{menuDataWithIcon}" requireSelection="true" labelField="label"
iconField="icon" iconPlacement="top">
<s:layout>
<s:VerticalLayout gap="-1" horizontalAlign="justify"/>
</s:layout>
</s:ButtonBar>
I hope this will help for dynamic text lengths...
Happy Flexing.
精彩评论