Css自定义Button的皮肤

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
             xmlns:s="library://ns.adobe.com/flex/spark"
             xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Metadata>
        <![CDATA[
        [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>
    <!--Add dropshadow for the up state only-->
    <s:Rect radiusX="4"
            radiusY="4"
            top="0"
            bottom="0"
            left="0"
            right="0"
            includeIn="up">
        <s:fill>
            <s:SolidColor color="0"/>
        </s:fill>
        <s:filters>
            <mx:DropShadowFilter knockout="false"
                                 blurX="5"
                                 blurY="5"
                                 alpha="0.6"
                                 distance="5"/>
        </s:filters>
    </s:Rect>
 
    <!--Orginal FXG-->
    <s:Rect id="myBorder"
            radiusX="4"
            radiusY="4"
            top="0"
            bottom="0"
            left="0"
            right="0">
        <s:fill>
            <s:SolidColor color="0x3c5297"/>
        </s:fill>
        <s:stroke>
            <s:SolidColorStroke color="0x434859"
                                weight="2"
                                color.over="0xacd4fc"
                                color.down="0xfd0303"/>
        </s:stroke>
    </s:Rect>
 
    <!--Add Hight Light on the top-->
    <s:Rect radiusX="4"
            radiusY="4"
            top="2"
            left="2"
            right="2"
            height="50%">
        <s:fill>
            <s:LinearGradient rotation="180">
                <s:GradientEntry color="0xFFFFFF"
                                 alpha=".3"/>
                <s:GradientEntry color="0xFFFFFF"
                                 alpha=".1"/>
            </s:LinearGradient>
        </s:fill>
 
    </s:Rect>
    <s:Label text="{hostComponent.label}"
             color="0xFFFFFF"
             textAlign="center"
             verticalAlign="middle"
             horizontalCenter="0"
             verticalCenter="1"
             left="12"
             right="12"
             top="6"
             bottom="6"/>
 
    <!--Add More effect -->
    <s:transitions>
        <s:Transition>
            <s:CrossFade target="{myBorder}"/>
        </s:Transition>
    </s:transitions>
<?xml version="1.0" encoding="utf-8"?>
<!--created:Nov 9, 2010 file:CSSandSkin.mxml  author:Michael -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" viewSourceURL="srcview/index.html">
    <s:layout>
        <s:VerticalLayout verticalAlign="middle"
                          horizontalAlign="center"
                          gap="30"/>
    </s:layout>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        s|Button
        {
            skin-class:ClassReference("skins.MyButtonSkin1");
        }
    </fx:Style>
    <s:Button label="button with skin 1"/>
    <s:Button label="button with skin 2"/>
    <s:Button label="button with skin 3"/>
</s:Application> </s:SparkSkin>

 

评论

1 楼 Javakeith 2010-12-07  

看下效果呗！