넣어 아이콘 4

Question

안녕하세요 모두 내가 가지고있는 다음

<s:ButtonBar id="tabs" y="15" left="0" height="31" 
      change="VideosMenuBar_changeHandler(event)" requireSelection="true"> 
    <s:layout> 
     <s:HorizontalLayout gap="1" columnWidth="180" variableColumnWidth="false" 
          /> 
    </s:layout> 

    <s:ArrayCollection> 
     <fx:String>Latest Videos</fx:String> 
     <fx:String>Last Week Videos</fx:String> 
     <fx:String>Last Month Videos</fx:String> 
    </s:ArrayCollection> 

</s:ButtonBar> 

난이 (스파크)의 각 버튼의 왼쪽에 아이콘을 삽입 할 수있는 방법을 누군가가 말해 줄 수 ButtonBar ?? 나는 모든 웹을 수색했다!

미리 감사드립니다.

Answer 1

에 ButtonBarButton 년대의 skinClass 속성을 ButtonBar (예 : CustomButtonBarSkin)

버튼이 구성 요소로 정의 된 부분의 스킨 클래스보기에서

<s:ButtonBar id="tabs" y="15" left="0" height="31" 
      skinClass="CustomButtonBarSkin"  
      change="VideosMenuBar_changeHandler(event)" requireSelection="true"> 
    <s:layout> 
     <s:HorizontalLayout gap="1" columnWidth="180" variableColumnWidth="false" 
          /> 
    </s:layout> 

    <s:ArrayCollection> 
     <fx:String>Latest Videos</fx:String> 
     <fx:String>Last Week Videos</fx:String> 
     <fx:String>Last Month Videos</fx:String> 
    </s:ArrayCollection> 

</s:ButtonBar> 

의 스킨 클래스를 생성, 변경 사용자 정의 스킨 클래스 (예 : CustomButtonBarButtonSkin).

<fx:Component id="firstButton"> 
    <!-- <s:ButtonBarButton skinClass="spark.skins.spark.ButtonBarFirstButtonSkin" /> --> 
    <s:ButtonBarButton skinClass="CustomButtonBarButtonSkin" /> 
</fx:Component> 
[...] 

사용자 정의 ButtonBar 피부 클래스는 spark.skins.spark.ButtonBarFirstButtonSkin, spark.skins.spark.ButtonBarMiddleButtonSkin 또는 spark.skins.spark.ButtonBarLastButtonSkin을 기반으로합니다. 당신이 원하는대로 사용자 정의 ButtonBarButton 피부 클래스에서

, 당신은 구성 요소를 추가 할 수 있습니다. 그가 떠날 이미지의 경우, 클래스는 이와 같이 보일 것입니다.

<!-- layer 8: text --> 
<!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay --> 
<s:Image source="@Embed('bricks.png')" /> 
<s:Label id="labelDisplay" 
     textAlign="center" 
     verticalAlign="middle" 
     maxDisplayedLines="1" 
     horizontalCenter="0" verticalCenter="1" 
     left="10" right="10" top="2" bottom="2"> 
</s:Label>! 

And this it how it looks