Flex bits: Accordion with Open/Closed Icons and Header Styles
Posted by Joe Rinehart at 3:26 PM
2 comments - Categories:
Flex
One thing that's bugged me for a bit about the native Accordion control in Flex is that there's no default way (that I can find) to state an alternate icon or style for the header of the open child.
You can manually watch it for changes, changing the style (or other properties) of the header for the selected child, but that's a bit of an "outside in" approach.
I'm by no means a styling or skinning expert for Flex, so I wanted a solution that'd let me work in my more "developerish" and less "designerish" mindset.
To this end, I knocked together an extension of the default AccordionHeader that has two properties: openStyleName and closedStyleName. Pretty self-explanatory: it'll assign the open or closed style when the header's parent according changes its selected child.
Demo w/ view source is available at http://www.firemoss.com/blogsamples/accordionheader/.
Basic usage:
<mx:headerRenderer>
<mx:Component>
<accordion:MultistyleAccordionHeader
openStyleName="accordionHeaderOpen"
closedStyleName="accordionHeaderClosed" />
</mx:Component>
</mx:headerRenderer>
</mx:Accordion>
Michael wrote on 02/04/08 4:40 PM
Joe,Nice work. Do you know if there is anyway to
apply different styles to different headers at the
same time? For instance could you make the Box 1
header red and the Box 2 header green?