Problem
Some UI designs that use rounded corners and accordion require to define rounded corners for accordion control to make UI design consistent. Making it require new renderer for Accordion header.
Solution
There is very simple way to define rounded corners and few other useful things for accordion headers. Instead of defining new accordion header renderer, other default Flex skin that supports rounded corners may be used. In this solution we use button skin that is the most close for design for accordion header.
Detailed explanation
Below is example of CSS to define custom accordion header styles and define Button skin for it instead of default one. Button skin supports rounded corners. Note that otehr styles for header need to be defined as for button too.
Accordion {
cornerRadius: 5;
headerStyleName: "myAccordionHeader";
}
.myAccordionHeader {
cornerRadius: 5;
downSkin: ClassReference("mx.skins.halo.ButtonSkin");
overSkin: ClassReference("mx.skins.halo.ButtonSkin");
upSkin: ClassReference("mx.skins.halo.ButtonSkin");
selectedDownSkin: ClassReference("mx.skins.halo.ButtonSkin");
selectedOverSkin: ClassReference("mx.skins.halo.ButtonSkin");
selectedUpSkin: ClassReference("mx.skins.halo.ButtonSkin");
disabledSkin: ClassReference("mx.skins.halo.ButtonSkin");
selectedDisabledSkin: ClassReference("mx.skins.halo.ButtonSkin");
}
