![]() ![]() So, using a pseudo selector, you can set styles associated with any of these states using a “:” before a state. If its not selected, set some other styles. You need to write some code on the itemClick handler to cycle through the buttons of the ButtonBar to see if each button is selected or not. Styling the ‘selected’ button for a Flex ButtonBar in Flex 3 isn’t that straightforward, in my opinion. So, your ButtonBar will use a custom skin:Īnd, your custom skin will have itemRenderers of ButtonBarButtons that set the textAlign style:Ĭode for the example: textAlignButtonBarSample.mxml, CustomButtonBarSkin.mxml Here is what you want your ButtonBar to look like (labels to the right): Luckily, you won’t run into this same issue of styles not working throughout the framework because we rarely set styles on components, we only set them globally. I don’t think this is that intuitive, but, so it goes. Therefore, to change the textAlign for a ButtonBar, you will need to change the textAlign properties of each ButtonBarButton in the ButtonBar skin. In Gumbo, styles set on a component cannot override styles set on a subcomponent. Apparently, the textAlign style is already set on the Buttons which are subcomponents of the ButtonBar. However, this does not work as noted in bug SDK-18610. Since textAlign is a style on ButtonBar, you would think that simply setting this style inline would move all of your labels for each button. Run the sample: ButtonBarExample.swf Download the application and custom skins: VerticalButtonBar.zip Note, I’ve customized the colors on the buttons of the ButtonBar using Advanced CSS (pseudo selectors and descendant selectors). All of the buttons have a cornerRadius of 10 and a yellow glow. The new Spark ButtonBar is just a DataGroup that has itemRenderers that are of type ButtonBarButton. Here is the resulting vertical ButtonBar. Note, I’ve customized the colors on the buttons of the ButtonBar using Advanced CSS (pseudo selectors and descendant selectors). All of the buttons have a cornerRadius of 10 and a yellow glow.ĭownload the application and custom skins: VerticalButtonBar.zip Here is the resulting vertical ButtonBar. Here is the code for my custom vertical ButtonBar skin:ġ) There is no firstButton and lastButton skin part.Ģ) I have chosen to use a custom skin for my middleButton ButtonBarButton because I wanted to change the cornerRadius of the buttons.ģ) I’ve added a yellow glow to each button using a GlowFilter.Ĥ) I’ve removed the layout assignment in the DataGroup of this skin. The ‘middleButton’ is used for all of the buttons in a ButtonBar if no ‘firstButton’ or ‘lastButton’ exist. ![]() The skin part ‘middleButton’ is required. In this case, you would create a custom skin and remove the optional skin parts for ‘firstButton’ and ‘lastButton’. Notice that the first button has rounded corners on the left side and the last button has rounded corners on the right.įor a vertical ButtonBar, you probably actually want all of your buttons to look identical. Therefore, when you use a Spark ButtonBar and assign a VerticalLayout: It is suited for a horizontal layout where the first button and the last button look mildly different. Its base is a box, o you have all a box can have.you can further play with it. You can control if it is vertical or horizontal using the direction property, and you also have verticalGap and horizontalGap. Just copy and paste in a file named MyButtonBar.mxml Here is one i made as an example for you. ![]()
0 Comments
Leave a Reply. |