是否可以像旧的Halo Button一样设置Spark Button？ （仅限CSS）

I think Adobe are messing with me, from all the docs and tutorials it seems like styling a simple button got much more difficult in Flex 4 (Spark). I used to be able to have my designer create the CSS as it wasn't too far off from web standard CSS. Now it seems like I need to make a skin first as outlined in this post?

我认为Adobe正在搞乱我，从所有的文档和教程看起来，在Flex 4（Spark）中设计一个简单的按钮变得更加困难。我曾经能够让我的设计师创建CSS，因为它离Web标准CSS不太远。现在好像我需要先制作皮肤，如本文所述？

Below is the old button style.

下面是旧按钮样式。

Button {
    fontFamily: "Arial, Helvetica";
    fontWeight: bold;
    fontSize: 11px;
    paddingTop: 0px;
    paddingBottom: 0px;
    highlightAlphas: 0.42, 0.13;
    fillAlphas: 1, 1, 1, 1;
    fillColors: #B9DEF8, #9AC3EB, #B9DEF8, #9AC3EB;
    color: #477199;
    textRollOverColor: #477199;
    textSelectedColor: #3399cc;
    borderStyle: none;  
}

thanks!

谢谢！

2 个解决方案

#1

Skinning the Spark Button would be a programmatic approach to which you could mimic the Halo mx:button very closely.

为Spark按钮设置外观将是一种编程方法，您可以非常接近地模仿Halo mx：按钮。

If you just wanted your application to use the Halo theme, you could use Halo theme.

如果您只是希望您的应用程序使用Halo主题，您可以使用Halo主题。

It's also important to note mx:Button included things like icon, which Spark Button does not.

注意mx也很重要：按钮包括像icon这样的东西，Spark Button没有。

As you denote you want to use CSS only, you'll have to dive in to mx skin class at:

当你表示你只想使用CSS时，你将不得不潜入mx skin class：

mx.skins.halo.ButtonSkin

Spark theme:

Spark主题：

Halo theme:

光环主题：

Based upon your CSS for spark:

基于你的CSS for spark：

<?xml version="1.0" encoding="utf-8"?>
<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"
               minWidth="955"
               minHeight="600">

    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";

        s|Button
        {
            fontFamily: "Arial, Helvetica";
            fontWeight: bold;
            fontSize: 11px;
            paddingTop: 0px;
            paddingBottom: 0px;
            highlightAlphas: 0.42, 0.13;
            fillAlphas: 1, 1, 1, 1;
            fillColors: #B9DEF8, #9AC3EB, #B9DEF8, #9AC3EB;
            color: #477199;
            textRollOverColor: #477199;
            textSelectedColor: #3399cc;
            borderStyle: none;  
        }
    </fx:Style>

    <s:VGroup width="100%"
              height="100%"
              paddingTop="10"
              paddingLeft="10">

        <s:Button label="Hello, world!" />

        <mx:Button label="Hello, world!" />

    </s:VGroup>

</s:Application>

#2

Yes, it is possible.

对的，这是可能的。

Check out the styles on the Spark Button to find out what can be modified using CSS.

查看Spark按钮上的样式，找出可以使用CSS修改的内容。