如何在Super TabNavigator中为不同的选项卡使用不同的颜色。

时间:2010-04-02 21:26:13

标签: flex actionscript-3

如何在SuperTabNavigator中为不同的标签设置不同的颜色。

下面是我的SuperTabNavigator的代码,有三个标签:

<containers:SuperTabNavigator x="0"
                     y="10"
                     width="100%"
                     height="100%"
                     right="1"
                     top="1"
                     left="1"
                     bottom="1" color="black"
                     creationPolicy="all"
                     id="tab_nav" popUpButtonPolicy="{SuperTabNavigator.POPUPPOLICY_OFF}">
        <mx:Canvas label="My Friends" id="friends_container" width="100%" height="100%"/>
<mx:Canvas label="My Groups" id="groups_container" width="100%" height="100%"/>
<mx:Canvas label="Address Book" id="address_container" width="100%" height="100%"/>
</containers:SuperTabNavigator>

我希望每个不同的标签都有不同的颜色。

我该怎么办?

我知道有一个firstTabStyleName和lastTabStyleName: 有什么方法可以使用secondTab或middleTab,这样的任何东西都可以帮助我在标签上有不同的颜色。

2 个答案:

答案 0 :(得分:0)

看起来不像他们的风格。如果没有自己的标签栏扩展名,您可能无法使用单独的样式。

答案 1 :(得分:0)

哦,我真的没有得到很好的答案。但我发现了一种解决我目的的方法。

<containers:SuperTabNavigator x="0"
                 y="10"
                 width="100%"
                 height="100%"
                 right="1"
                 top="1"
                 left="1"
                 bottom="1" color="black"
                 creationPolicy="all"
                 tabStyleName="secondTabGradient"
                 firstTabStyleName="firstTabGradient"                    
                 lastTabStyleName="lastTabGradient"
                 id="tab_nav" popUpButtonPolicy="{SuperTabNavigator.POPUPPOLICY_OFF}">
    <mx:Canvas label="My Friends" id="friends_container" width="100%" height="100%"/>

因此firstTabGradient获取第一个选项卡的样式,secondTabGradient获取第二个选项卡,lastTabGradient获取最后一个选项卡,这对我来说是第三个选项卡。

这种方式获得三种不同颜色的标签。

我还在研究css部分。但它足以引用任何参考文献:

    <mx:Style>
    .firstTabGradient
    {
        backgroundImage: ClassReference("custom.GradientBackground");
        backgroundSize: "100%";
        background-color: green;
        fillColors: #23b34d, #06832a;
        fillAlphas: 1, 1;           
    }
    .lastTabGradient
    {
        backgroundImage: ClassReference("custom.GradientBackground");
        backgroundSize: "100%";
        background-color: blue;
        fillColors: #028edf, #02bba0;
        fillAlphas: 1, 1;
    }
    .secondTabGradient
    {
        backgroundImage: ClassReference("custom.GradientBackground");
        backgroundSize: "100%";
        background-color: red;
        fillColors: #d70324, #a6001a;
        fillAlphas: 1, 1;
    }

</mx:Style>

谢谢 Zeeshan