是否可以像旧的 Halo Button 一样设计 Spark Button 的样式？（仅使用 CSS）

发布于 2024-12-10 14:13:15 字数 657 浏览 2 评论 0原文

我认为 Adobe 搞乱了我，从所有文档和教程来看，在 Flex 4 (Spark) 中设计一个简单的按钮样式似乎变得更加困难。我曾经能够让我的设计师创建 CSS，因为它与 Web 标准 CSS 相差不远。现在看来我需要先制作一个皮肤，如这篇文章？

下面是旧的按钮样式。

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;  
}

谢谢！

原文

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?

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!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

美胚控场 2024-12-17 14:13:15

Spark 按钮的外观是一种编程方法，您可以非常接近地模仿 Halo mx:button。

如果您只想让应用程序使用 Halo 主题，则可以使用 Halo 主题。

同样重要的是要注意 mx:Button 包含图标等内容，而 Spark Button 不包含这些内容。

正如您表示只想使用 CSS 一样，您必须深入了解 mx 皮肤类：

mx.skins.halo.ButtonSkin

Spark theme:

Spark theme

Halo 主题：

Halo theme

基于您的 Spark CSS：

<?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>

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

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

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

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

mx.skins.halo.ButtonSkin

Spark theme:

Spark theme

Halo theme:

Halo theme

Based upon your 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>

回复收藏 0 原文