The following example shows how you can set the corner radius on the PopUpButton control in Flex by setting the cornerRadius
style.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/01/31/setting-the-corner-radius-on-a-flex-popupbutton-control/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white"> <mx:Style> PopUpButton { popUpStyleName: myCustomPopUpStyleName; } .myCustomPopUpStyleName { fontWeight: normal; textAlign: left; leftIconGap: 0; } </mx:Style> <mx:Script> <![CDATA[ import mx.controls.Menu; private function init():void { var menu:Menu = new Menu(); menu.dataProvider = arr; popUpButton.popUp = menu; } private function resizePopUp():void { popUpButton.popUp.width = popUpButton.width; } ]]> </mx:Script> <mx:Array id="arr"> <mx:Object label="Alert" /> <mx:Object label="Button" /> <mx:Object label="ButtonBar" /> <mx:Object type="separator" /> <mx:Object label="CheckBox" /> <mx:Object label="ColorPicker" /> <mx:Object label="ComboBox" /> </mx:Array> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="cornerRadius:"> <mx:HSlider id="slider" minimum="0" maximum="{popUpButton.height / 2}" value="0" liveDragging="true" snapInterval="1" tickInterval="1" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:PopUpButton id="popUpButton" label="Please select an item..." cornerRadius="{slider.value}" arrowButtonWidth="{popUpButton.height}" openAlways="true" initialize="init();" creationComplete="resizePopUp();" /> </mx:Application>
View source is enabled in the following example.
How would I do a Flex PopUpButton control with no border? Just the text and arrow and menu below.
p.s. I’m a flex newbie trying to come up to speed fast and so have a lot of flex feeds I’m reading daily. But, I have to say, yours is the best, bar none, with all these examples. Keep up the great work!
Thanks,
Paul
How can you set the cornerRadius of the menu that is popped-up?
Henk,
Try something like the following:
It *should* work, but I’m not sure how it will handle the rounded corners when you roll your mouse over an item.
Peter