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