Using a headerRenderer for an Accordion

Keeping on the subject of customizing the Accordion header, I was thinking that it would be nice to be able to change the appearance of a header that was selected. Out of the box, flex offers the style selectedFillColors so you can change the background colors of your header when its selected. This is nice, but, it doesn’t seem like enough. I wish it had a selectedHeaderStyleName or something like that.

To make a few minor changes to the header when its selected, I’m going to use the headerRender. I’ve never done much testing of the Accordion component, so, its all fairly new to me. I assumed the headerRender was similar to a List itemRenderer and that I could pretty much put anything in there and it would just work. That isn’t the case. Your custom headerRenderer pretty much needs to extend Button, otherwise, you’ll need to build in way too much logic on your own. So, here is my sample that changes the fontSize and color of a selected header. It also changes the paddingLeft of all the headers because I didn’t like the default.

Demo: AccordionSample.swf

Sample Code: AccordionSample.mxml,

And if you want to change up the icons for various states of your Accordion, then, try Rich Tretola’s Accordion With Icons component. It’s pretty cool and he’s got ASDocs for it as well.

5 responses

  1. Nice application.It helped a lot in my application.One more concern for me that Can we use HeaderRenderer to made HeaderWordWrap ‘true’..If yes how can we??

    Thanks in Advance!.

  2. Thank you for the example.

    hmm, the MyCustomHeader class as it shown here is based on Label,
    and it has no logic to change the appearance when the header is selected or not.

    Maybe it’s not right renderer class … ?

  3. Can you please post the correct for this example? :s

  4. HeaderRenderer for mx..Accordion should be extended with mx..Button because onInit Flex attempts to convert it to this Type and TypeCoercionFailed will be thrown.

  5. your sources are incorrect, at least – wich extends Label, but not Button

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: