Problem
You want to use an embedded font for the Flex Accordion container's header.
Solution
The following examples show how you can use an embedded font with the Flex Accordion container by setting the headerStyleName style.
Detailed explanation
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>
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>
For more information, see "Using embedded fonts with the Accordion container in Flex" at FlexExamples.com.
Report abuse
