设置选项卡的下角，拐角半径的标签导航

使用CSS，我可以设置一个选项卡的顶部边角的圆角半径在TabNavigator的：设置选项卡的下角，拐角半径的标签导航

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

<mx:TabNavigator tabStyleName="tabstyle" />

不过，我也想底角有一个半径。有谁知道这是怎么做到的吗？？

来源

2010-04-26 Maurits de Boer

你在tabnavigator中放置了哪些物品？帆布？ – ilikeorangutans 2010-04-26 14:56:52

的确，5个Canvas组件。但它是关于标签本身，而不是Tabnavigator的孩子。 – 2010-04-27 07:55:37

假设您在TabNavigator中放置的项目是标准Flex控件集的一部分，您可以让他们使用自定义编程皮肤来绘制其背景/边框以匹配您所需的外观。幸运的是，制作一个程序化皮肤相对容易，该程序皮肤的角度半径值（grabs style information）就像是使用它来控制图形的绘制方式 - 只需在互联网上进行浏览，就可以在Flex 3中找到tutorials on skinning。

来源

2010-04-27 00:04:18 ZackBeNimble

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" />

来源

2010-04-27 08:53:40

扩大从@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会降低它们在测试版中添加的内部变量 - 如果您使用较旧版本来获取未缩放宽度和未缩放高度，则必须覆盖updatedisplaylist。

然后在你剥皮组件，设置此样式：borderSkin =“package.class.location”

可能是有点快，如果你用传统编程剥皮不familliar ...我”我更喜欢el degrafa的粉丝。

来源

2010-04-27 16:42:00

设置选项卡的下角，拐角半径的标签导航

回答

相关问题