Rayon d'angle appliqué uniquement aux coins spécifiques

Question

J'ai ces onglets que je voulais arrondir uniquement dans les coins supérieur droit et supérieur gauche. Mais il a fini par arrondir les 4 coins.

Ce que je l'ai fait:

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

et

mon fichier est 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; 
} 

Comme vous pouvez le voir je les "focusRoundedCorners" pour pointer vers le haut droit et en haut à gauche mais pas de chance. Ce que j'ai obtenu est:

Qu'est-ce que je fais mal?

Merci d'avance.

Answer 1

Jetez un oeil à cet outil http://www.wabysabi.com/flex/enhancedbuttonskin/

Je suppose que la mise au point partie du focusRoundedCorners fait référence à la façon dont il devrait être quand il a concentrer uniquement ..

Answer 2

est la solution Voici.

Vous pouvez écrire votre propre bouton ou utiliser celui ici http://www.wabysabi.com/flex/enhancedbuttonskin/ nommé EnhancedButtonSkin.as (clic droit, View-Source). Ensuite, déclarez votre composant TabNavigator et spécifiez son tabStyleName.

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

Et maintenant le 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> 

Cette css affichera: