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> <! ]]> </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.mxmlauthor: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]