Встраивание изображений в CSS для расширенной кнопки зажигания (IconButton) - PullRequest
Новая
       28

Встраивание изображений в CSS для расширенной кнопки зажигания (IconButton)

0 голосов
/ 01 апреля 2011

У меня есть эта иконка:

Класс 

package extra {

    import spark.components.Button;
    import spark.primitives.BitmapImage;

    public class IconButton extends Button {

        private var _icon:Class;

        [SkinPart(required="false")]
        public var iconElement:BitmapImage;

        public function get icon():Class {

            return _icon;

        }

        public function set icon(val:Class):void {

            _icon = val;

            if (iconElement != null) {

                iconElement.source = _icon;

            }

        }

        override protected function partAdded(partName:String, instance:Object):void {

            super.partAdded(partName, instance);

            if (icon !== null && instance == iconElement) {

                iconElement.source = icon;

            }

        }

    }

}

Кожа 

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" minWidth="40" minHeight="22">

    <fx:Metadata>
       [HostComponent("spark.components.Button")]
    </fx:Metadata>

    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>

    <!-- background -->
    <s:BitmapImage id="iconElement" width="104" height="54"/>

    <!-- label -->
    <s:Label
    id="labelDisplay"
    textAlign="center"
    color="0xffffff"
    fontFamily="AudiNormal"
    fontWeight="bold"
    fontSize="15"
    width="100%"
    top="64"
    />
</s:Skin>

CSS 

e|IconButton {
    skinClass: ClassReference('skins.IconButton');
}

Это прекрасно работает с:

MXML 

<extra:IconButton icon="@Embed('../assets/img/animals/dog.png')">Dog Name</extra:IconButton>

Но как я могу это сделать?:

MXML 

<extra:IconButton styleName="dog">Dog Name</extra:IconButton>

CSS 

e|IconButton {
    skinClass: ClassReference('skins.IconButton');
}

.dog {
    icon: Embed('../assets/img/animals/dog.png');
}

1 Ответ

0 голосов
/ 01 апреля 2011

Удалите свойство icon и используйте вместо него стиль: 

[Style(name="icon", type="Class", inherit="no")]

В файле скина: 

<s:BitmapImage id="iconElement" width="104" height="54" icon="{hostComponent.getStyle('icon')}/>

Только догадка, хотя я и не проверял его ...

...