The following example shows you how you can use an embedded font with the Flex Accordion container by setting the headerStyleName style.
Full code after the jump.
By default, the Accordion header’s text is bold. The following example shows how you can set the accordion header’s font weight to “normal” by setting the fontWeight style in the custom accordion headerStyleName style:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/31/using-embedded-fonts-with-the-accordion-container-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
@font-face {
src: local("Base 02");
fontFamily: EmbeddedBase02;
}
Accordion {
headerStyleName: accordionHeaderStyleName;
}
.accordionHeaderStyleName {
fontFamily: EmbeddedBase02;
fontWeight: normal;
}
</mx:Style>
<mx:Accordion id="accordion"
creationPolicy="all"
width="100%"
height="100%">
<mx:VBox label="Red"
backgroundColor="red"
width="100%"
height="100%">
</mx:VBox>
<mx:VBox label="Orange"
backgroundColor="haloOrange"
width="100%"
height="100%">
</mx:VBox>
<mx:VBox label="Yellow"
backgroundColor="yellow"
width="100%"
height="100%">
</mx:VBox>
<mx:VBox label="Green"
backgroundColor="haloGreen"
width="100%"
height="100%">
</mx:VBox>
<mx:VBox label="Blue"
backgroundColor="haloBlue"
width="100%"
height="100%">
</mx:VBox>
</mx:Accordion>
</mx:Application>
View source is enabled in the following example.
The following example shows how you can set the accordion header’s font weight to “bold” by setting the fontWeight style in the @font-face style:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/31/using-embedded-fonts-with-the-accordion-container-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
@font-face {
src: local("Base 02");
fontFamily: EmbeddedBase02;
fontWeight: bold;
}
Accordion {
headerStyleName: accordionHeaderStyleName;
}
.accordionHeaderStyleName {
fontFamily: EmbeddedBase02;
}
</mx:Style>
<mx:Accordion id="accordion"
creationPolicy="all"
width="100%"
height="100%">
<mx:VBox label="Red"
backgroundColor="red"
width="100%"
height="100%">
</mx:VBox>
<mx:VBox label="Orange"
backgroundColor="haloOrange"
width="100%"
height="100%">
</mx:VBox>
<mx:VBox label="Yellow"
backgroundColor="yellow"
width="100%"
height="100%">
</mx:VBox>
<mx:VBox label="Green"
backgroundColor="haloGreen"
width="100%"
height="100%">
</mx:VBox>
<mx:VBox label="Blue"
backgroundColor="haloBlue"
width="100%"
height="100%">
</mx:VBox>
</mx:Accordion>
</mx:Application>
{ 2 comments… read them below or add one }
Hi,
Great example.
Just wondering if it is possible to have two lines in the header, one with specific font (or color or any possible style), the other with another one ?
For example, I’d like to have a calendar with details in the accordion, with 3 headers, the first one would be :
<big>Day</big>
<bold>2008/07/20</bold>
and so on for the two other headers :
Week
From 07/14 to 07/21
Month
July
?
Try McCune’s example
http://dougmccune.com/blog/2007/09/18/using-complex-headers-with-the-flex-accordion/