Flex中Accordion圆角标题栏的实现

 

问题概要

     一些UI设计使用到了圆角并且accordion要求定义圆角以使得它与UI设计一致。这就需要为Accordion header添加新的渲染（renderer）。

 

 

解决办法

一种很简单的方法是为accordion定义一些圆角和其他的一些东西。而不是定义新的渲染（renderer），其他支持圆角的Flex皮肤都可以使用。在这个解决办法中，我们使用和accordion header设计最接近的按钮皮肤。

 

示例

 

下面的示例定制了accordion header的样式并为它定义了按钮皮肤，而不是使用Accordion默认的。按钮皮肤支持圆角。请注意，header的其他样式也要被定义。

 

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");
}


                                                                         摘自：Accordion with rounded corner headers

by Vlad Grynch