Радиус угла применяется только к определенным углам - PullRequest
Новая
       21

Радиус угла применяется только к определенным углам

1 голос
/ 05 октября 2010

У меня есть эти вкладки, которые я хотел сделать закругленными только в верхнем правом и верхнем левом углах.Но в итоге все четыре угла округлились.

Что я сделал: 

<mx:TabNavigator id="myTabNav" x="58" y="61" width="584"  height="200" creationComplete="setColors(event)" styleName="myTabStyle">
  <pages:One  label="ThisOne" id="one"  name="One"/>
  <pages:Two label="Twoooooooooooh" id="two"  width="584" name="two" />
  <pages:Three label="Threeeeeeeeh" id="three"  width="583" name="three" />
</mx:TabNavigator>

и

мой файл pageStyles.css: 

.myTabStyle {
 tabStyleName: "myTabs"; 

 corner-radius:15;
}

.myTabs {
 backgroundColor: #FF0080;
 corner-radius:10;
 focusRoundedCorners: "tl tr";
 skin:ClassReference('mx.skins.spark.ButtonSkin'); 
 chromeColor: #FF0080;  /* this is the tab widget itself, not the content */
 border-style:outset;
}

Как видите, у меня есть «focusRoundedCorners», указывающие на верхний правый и верхний левый, но не повезло.Что я получил:

Что я делаю не так, ребята ??

Заранее спасибо.

Ответы [ 2 ]

1 голос
/ 05 октября 2010

Посмотрите на этот инструмент http://www.wabysabi.com/flex/enhancedbuttonskin/

Я бы предположил, что focus часть focusRoundedCorners относится к тому, что должно быть, когда у него только фокус ...

0 голосов
/ 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 будет отображаться:

...