Flex TabNavigator 的按钮样式

发布于 2024-09-02 05:00:03 字数 367 浏览 14 评论 0原文

我创建了一个 TabNavigator，其中包含一堆 NavigatorContent，并且只想为选项卡本身的按钮设置外观。所以我添加了一个 skinClass，但看起来在文档中，没有专门针对按钮的皮肤部分。

我是否必须设置 mx:TabNavigator 本身的样式才能实现此目的？我希望不会，因为我不知道如何设置 mx 组件的样式，并且更喜欢设置 spark 的样式。

还有其他我没有想到的替代方案吗？

原文

分享到QQ

分享到微博

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

发布评论

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

心清如水 2024-09-09 05:00:03

由于 TabNavigator 是一个 mx 组件，因此您必须以旧方式设置其样式。您可以通过设置“tabStyleName”样式来设置按钮样式，即：

TabNavigator{
   tabStyleName: "myTabButton";
}

.myTabButton{
   skin: ClassReference("com.yournamespace.skins.TabButtonSkin");
}

您必须以旧方式创建外观，您可能需要查看 mx.skins.halo.Button 类作为示例，或者您可以使用degrafa 或者你可以使用 png。

请注意，如果您愿意，还可以单独设置firstTabStyleName 或lastTabStyleName。

程序化皮肤示例：
http://www.davidflatley.com /2007/12/17/programmatic-button-skins-in-flex-3/

degrafa 示例：
http://styleanderror.net/2010/02 /在-degrafa中创建动画程序按钮皮肤/

Since TabNavigator is a mx component, you'll have to style it the old way. You can style the buttons by setting the 'tabStyleName' style, ie:

TabNavigator{
   tabStyleName: "myTabButton";
}

.myTabButton{
   skin: ClassReference("com.yournamespace.skins.TabButtonSkin");
}

You'll have to create the skins the old way, you may want to look at the mx.skins.halo.Button class for an example, or you can use degrafa or you can use pngs.

Note you can also set a firstTabStyleName or lastTabStyleName seperately if you so desire.

programmatic skin example:
http://www.davidflatley.com/2007/12/17/programmatic-button-skins-in-flex-3/

degrafa example:
http://styleanderror.net/2010/02/creating-animated-programmatic-button-skins-in-degrafa/

回复收藏 0 原文

伏妖词 2024-09-09 05:00:03

您可以编写自己的按钮皮肤或使用此处的按钮皮肤 http://www.wabysabi.com/flex/增强按钮皮肤/
命名为EnhancedButtonSkin.as（右键单击，查看源代码）。
然后声明您的 TabNavigator 组件并指定其 tabStyleName。

<mx:TabNavigator y="0" height="100%" right="0" left="0" id="navigator" tabStyleName="tab">

现在 css：

 <fx:Style>
  .tab
  {
   upSkin:ClassReference('com.EnhancedButtonSkin');
   overSkin:ClassReference('com.EnhancedButtonSkin');
   downSkin:ClassReference('com.EnhancedButtonSkin');
   disabledSkin:ClassReference('com.EnhancedButtonSkin');
   selectedUpSkin:ClassReference('com.EnhancedButtonSkin');
   selectedOverSkin:ClassReference('com.EnhancedButtonSkin');
   selectedDownSkin:ClassReference('com.EnhancedButtonSkin');
   selectedDisabledSkin:ClassReference('com.EnhancedButtonSkin');

   cornerRadii: 5, 5, 0, 0;
   borderColors: #CC0000, #000000;
   overBorderColors: #003399, #003399;
   selectedBorderColors: #666666, #FFFFFF;
   borderThickness: 1;
   borderAlpha: 1;
   fillColors: #CC3300, #F98900;
   fillAlphas: 1, 1;
   fillColorRatios: 0, 255;
   overFillColors: #999999, #FFFFFF;
   overFillAlphas: 1, 1;
   overFillColorRatios: 0, 255;
   selectedFillColors: #999999, #FFFFFF;
   selectedFillAlphas: 1, 1;
   selectedFillColorRatios: 111, 255;
   highlightAlphas: 0, 0;
   color: #000000;
   textRollOverColor: #000000;
   fontSize: 13;
  }
 </fx:Style>

这个 css 将显示：
i.imgur.com/4HwD3.png

雷米

You can write you own button skin or use the one here http://www.wabysabi.com/flex/enhancedbuttonskin/
named EnhancedButtonSkin.as (right-click, View-Source).
Then declare your TabNavigator component and specify its tabStyleName.

<mx:TabNavigator y="0" height="100%" right="0" left="0" id="navigator" tabStyleName="tab">

And now the css:

 <fx:Style>
  .tab
  {
   upSkin:ClassReference('com.EnhancedButtonSkin');
   overSkin:ClassReference('com.EnhancedButtonSkin');
   downSkin:ClassReference('com.EnhancedButtonSkin');
   disabledSkin:ClassReference('com.EnhancedButtonSkin');
   selectedUpSkin:ClassReference('com.EnhancedButtonSkin');
   selectedOverSkin:ClassReference('com.EnhancedButtonSkin');
   selectedDownSkin:ClassReference('com.EnhancedButtonSkin');
   selectedDisabledSkin:ClassReference('com.EnhancedButtonSkin');

   cornerRadii: 5, 5, 0, 0;
   borderColors: #CC0000, #000000;
   overBorderColors: #003399, #003399;
   selectedBorderColors: #666666, #FFFFFF;
   borderThickness: 1;
   borderAlpha: 1;
   fillColors: #CC3300, #F98900;
   fillAlphas: 1, 1;
   fillColorRatios: 0, 255;
   overFillColors: #999999, #FFFFFF;
   overFillAlphas: 1, 1;
   overFillColorRatios: 0, 255;
   selectedFillColors: #999999, #FFFFFF;
   selectedFillAlphas: 1, 1;
   selectedFillColorRatios: 111, 255;
   highlightAlphas: 0, 0;
   color: #000000;
   textRollOverColor: #000000;
   fontSize: 13;
  }
 </fx:Style>

This css will display:
i.imgur.com/4HwD3.png

Remy

回复收藏 0 原文

~没有更多了~