поместите значок слева от каждой кнопки в искре ButtonBar Flex 4 - PullRequest
Новая
       53

поместите значок слева от каждой кнопки в искре ButtonBar Flex 4

0 голосов
/ 08 февраля 2012

Привет всем, у меня есть следующее: 

<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 ??Я искал всю сеть!

Заранее спасибо!

1 Ответ

2 голосов
/ 09 февраля 2012

Создайте класс обложки для 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>

В классе обложки найдите часть, где кнопки определены как компоненты, и измените атрибут skinClassиз ButtonBarButton в пользовательский класс скина (например, 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>!

И вот как это выглядит

...