Changing the padding on a Button control in Flex
The following example shows how you can modify the padding between the Button control’s label and icon and the button’s edges by setting the paddingLeft, paddingRight, paddingTop, paddingBottom, and horizontalGap styles.
| <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="init();"> <mx:Style> HSlider { labelOffset: 0; dataTipPlacement: right; } .iconButton { icon: Embed("bullet_picture.png"); } </mx:Style> <mx:Script> <![CDATA[ private function init():void { leftSlider.value = button.getStyle("paddingLeft"); rightSlider.value = button.getStyle("paddingRight"); topSlider.value = button.getStyle("paddingTop"); bottomSlider.value = button.getStyle("paddingBottom"); horizontalGapSlider.value = button.getStyle("horizontalGap"); } private function updatePadding():void { button.setStyle("paddingLeft", leftSlider.value); button.setStyle("paddingRight", rightSlider.value); button.setStyle("paddingTop", topSlider.value); button.setStyle("paddingBottom", bottomSlider.value); button.setStyle("horizontalGap", horizontalGapSlider.value); } ]]> </mx:Script> <mx:Array id="labelArr"> <mx:Number>0</mx:Number> <mx:Number>4</mx:Number> <mx:Number>8</mx:Number> <mx:Number>12</mx:Number> <mx:Number>16</mx:Number> </mx:Array> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="paddingLeft:"> <mx:HSlider id="leftSlider" minimum="0" maximum="16" snapInterval="1" labels="{labelArr} " liveDragging="true" showTrackHighlight="true" change="updatePadding();" /> </mx:FormItem> <mx:FormItem label="paddingRight:"> <mx:HSlider id="rightSlider" minimum="0" maximum="16" labels="{labelArr}" snapInterval="1" liveDragging="true" showTrackHighlight="true" change="updatePadding();" /> </mx:FormItem> <mx:FormItem label="paddingTop:"> <mx:HSlider id="topSlider" minimum="0" maximum="16" labels="{labelArr}" snapInterval="1" liveDragging="true" showTrackHighlight="true" change="updatePadding();" /> </mx:FormItem> <mx:FormItem label="paddingBottom:"> <mx:HSlider id="bottomSlider" minimum="0" maximum="16" labels="{labelArr}" snapInterval="1" liveDragging="true" showTrackHighlight="true" change="updatePadding();" /> </mx:FormItem> <mx:FormItem label="horizontalGap:"> <mx:HSlider id="horizontalGapSlider" minimum="0" maximum="16" labels="{labelArr}" snapInterval="1" liveDragging="true" showTrackHighlight="true" change="updatePadding();" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:Button id="button" label="label" styleName="iconButton" /> </mx:Application> |
9:08 PM
|
Labels:
Flex Samples
|
This entry was posted on 9:08 PM
and is filed under
Flex Samples
.
You can follow any responses to this entry through
the RSS 2.0 feed.
You can leave a response,
or trackback from your own site.
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment