Стайлинг кнопок Flex TabNavigator - PullRequest
Новая
       28

Стайлинг кнопок Flex TabNavigator

0 голосов
/ 22 мая 2010

Я создал TabNavigator с кучей NavigatorContent внутри, и хочу обшить только кнопки самих вкладок.Поэтому я добавил skinClass, но, похоже, в документации нет части скина, специально предназначенной для кнопки.

Нужно ли самому стилизовать mx:TabNavigator для этого?Я надеялся, что нет, так как я не знаю, как стилизовать компоненты mx, и мне больше нравится стайлинг spark.

Есть ли другие альтернативы, о которых я не думал?

Ответы [ 2 ]

1 голос
/ 13 января 2011

Вы можете написать свой собственный скин кнопки или использовать здесь http://www.wabysabi.com/flex/enhancedbuttonskin/ с именем EnhancedButtonSkin.as (щелчок правой кнопкой мыши, View-Source).Затем объявите свой компонент 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

Remy

1 голос
/ 23 мая 2010

Поскольку TabNavigator является компонентом mx, вам придется стилизовать его по-старому. Вы можете стилизовать кнопки, установив стиль tabStyleName, то есть: 

TabNavigator{
   tabStyleName: "myTabButton";
}

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

Вам придется создавать скины по-старому, вы можете посмотреть на класс mx.skins.halo.Button, например, вы можете использовать degrafa или pngs.

Обратите внимание, что вы также можете установить firstTabStyleName или lastTabStyleName отдельно, если хотите.

программный пример скина: http://www.davidflatley.com/2007/12/17/programmatic-button-skins-in-flex-3/

пример degrafa: http://styleanderror.net/2010/02/creating-animated-programmatic-button-skins-in-degrafa/

...