0

TabNavigatorその中にたくさんのを作成しNavigatorContent、タブ自体のボタンだけをスキンしたいと考えています。を追加しましたskinClassが、ドキュメントのように見えますが、特にボタンをターゲットにするスキン パーツはありません。

mx:TabNavigatorこれを達成するには、それ自体をスタイルする必要がありますか? コンポーネントをスタイルする方法がわからずmx、スタイリングに慣れているので、そうではないことを望んでいましたspark。

私が考えていなかった他の選択肢はありますか？

4

2 に答える 2

1

独自のボタン スキンを作成するか、http: //www.wabysabi.com/flex/enhancedbuttonskin/ 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

レミー

于 2011-01-13T12:51:45.127 に答える
1

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/creating-animated-programmatic-button-skins-in-degrafa/

于 2010-05-22T22:53:48.890 に答える