Question

使用CSS，我可以在tabnavigator中设置选项卡顶角的角半径：

<mx:Style>
    .tabstyle
    {
        corner-radius: 10;
    }
</mx:Style>

<mx:TabNavigator tabStyleName="tabstyle" />

但是，我也希望底角有半径。有谁知道怎么做？

Answer 1

假设您在TabNavigator中放置的项目是标准Flex控件集的一部分，您可以让它们使用自定义编程皮肤绘制背景/边框以匹配您想要的外观。幸运的是，制作程序化的皮肤grabs style information（如角半径值）并使用它来控制绘制图形的方式相对容易 - 只需在互联网上查找，你就必然会找到{ Flex 3中的{3}}。

Answer 2

ZackBeNimble的答案运作良好，但我实际上有额外的要求，任何布局都应该很容易改变。所以我现在所做的就是将标签的外观设置为具有我想要的角半径的图像。

<mx:Style>
    .tabstyle
    {
        skin: Embed(source="../images/corner_radius_tabs.png", scaleGridLeft="44", scaleGridRight="45", scaleGridTop="1", scaleGridBottom="2"); 
        padding-left: 44;
        padding-right: 44;
    }
</mx:Style>

<mx:TabNavigator tabStyleName="tabstyle" />

Answer 3

扩展@ZackBeNimble的答案使用degrafa可能更容易：

皮肤成分：

<degrafa:GraphicBorderSkin xmlns:degrafa="namespaceLovin">

<degrafa:geometry>
    <degrafa:GeometryComposition>
        <degrafa:RoundedRectangleComplex topLeftRadius="0" topRightRadius="0" bottomLeftRadius="5" bottomRightRadius="5"
                        height="{skinHeight}"
                        width="{skinWidth}"
                        fill="{someFill}" />

</degrafa:geometry>


</degrafa:GraphicBorderSkin>

你需要填充。另外，skinWidth和height是他们在测试版中添加的degrafa内部变量 - 如果您使用的是旧版本来获取未缩放的宽度和未缩放的高度，则必须覆盖updatedisplaylist。

然后在你要剥皮的组件中，设置这个样式：borderSkin =“package.class.location”

如果你不熟悉传统的程序化皮肤，可能会更快一点......我更喜欢el degrafa。

在选项卡导航器中为选项卡的下角设置角半径

3 个答案: