Jun 05

Flex中如何通过设定headerStyleName样式在Accordion控件中使用嵌入字体的例子

FlexAdd comments

Accordion控件可以说是一个非常不错的东西，在很多场合可以为我们节省应用程序的空间。Accordion中使用自定义字体的话可以使我们的应用更加个性化。接下来的例子演示了Flex中如何通过设定headerStyleName样式，在Accordion控件中使用嵌入字体。

我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里查看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Style>
  8.         @font-face {
  9.             src: local("Base 02");
  10.             fontFamily: EmbeddedBase02;
  11.         }
  12.  
  13.         Accordion {
  14.             headerStyleName: accordionHeaderStyleName;
  15.         }
  16.  
  17.         .accordionHeaderStyleName {
  18.             fontFamily: EmbeddedBase02;
  19.             fontWeight: normal;
  20.         }
  21.     </mx:Style>
  22.  
  23.     <mx:Accordion id="accordion"
  24.             creationPolicy="all"
  25.             width="100%"
  26.             height="100%">
  27.         <mx:VBox label="Red"
  28.                 backgroundColor="red"
  29.                 width="100%"
  30.                 height="100%">
  31.         </mx:VBox>
  32.         <mx:VBox label="Orange"
  33.                 backgroundColor="haloOrange"
  34.                 width="100%"
  35.                 height="100%">
  36.         </mx:VBox>
  37.         <mx:VBox label="Yellow"
  38.                 backgroundColor="yellow"
  39.                 width="100%"
  40.                 height="100%">
  41.         </mx:VBox>
  42.         <mx:VBox label="Green"
  43.                 backgroundColor="haloGreen"
  44.                 width="100%"
  45.                 height="100%">
  46.         </mx:VBox>
  47.         <mx:VBox label="Blue"
  48.                 backgroundColor="haloBlue"
  49.                 width="100%"
  50.                 height="100%">
  51.         </mx:VBox>
  52.     </mx:Accordion>
  53.  
  54. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

written by Minidxer  |  tags: , , , ,

Related Post

One Response to “Flex中如何通过设定headerStyleName样式在Accordion控件中使用嵌入字体的例子”

Trackbacks

Leave a Reply