Flex 4.5 TabNavigator cornerRadius不能正常工作

我現在最難找到一種方法來簡單地向TabNavigator控件添加四捨五入的選項卡。Flex 4.5 TabNavigator cornerRadius不能正常工作

我看過一些看起來非常簡單的例子，但它們似乎在Flex 4.5中不起作用。下面是一些示例代碼：

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955"  minHeight="600"> 
    <fx:Declarations> 
    <!-- Place non-visual elements (e.g., services, value objects) here --> 
</fx:Declarations> 
<fx:Style source="style.css"/> 

<mx:TabNavigator x="93" y="90" width="571" height="293" tabStyleName="tabstyle"> 
    <s:NavigatorContent width="100%" height="100%" label="Tab 1"> 
    </s:NavigatorContent> 
</mx:TabNavigator> 
</s:Application>

和CSS：

/* CSS file */ 
@namespace s "library://ns.adobe.com/flex/spark"; 
@namespace mx "library://ns.adobe.com/flex/mx"; 

.tabstyle 
{ 
corner-radius: 10; 
}

我還試圖cornerRadius：10;

任何想法，爲什麼這是行不通的？任何容易遵循的解決方案（我是一個初學者）。

謝謝。

來源

2011-10-19 user1003505

-1

試試這個！

<mx:TabNavigator id="tabNavigator" tabOffset="20" cornerRadius="10" height="100%" width="100%">

來源

2011-10-20 02:05:53 kbgn

心中已經試過cornerRadius但只設置上的內容面積不得標籤的半徑。 – user1003505

問題是關於選項卡舍入，而不是內容。 –

您可以爲您的應用程序/標籤導航皮膚，使用選項「的創建副本」在Flash Builder中，並在矩形部分，設置半徑X，半徑Y值。然後使用肌膚的成分

來源

2011-10-20 09:08:39 Ryan

對不起，我在這裏真的不是很有經驗。我之前爲Spark組件創建了皮膚副本，但我沒有任何運氣爲mx控件創建皮膚副本。你能否引導我完成創建皮膚副本的步驟，然後將其應用於mx：TabNavigator控件？ – user1003505

它不能爲mx控件完成，對不起。這是一個完美的解決方法：http://devgirl.org/2009/11/16/tabbed-navigation-in-flex-4/ – Ryan

-1

這是示例代碼，你可以複製和運行

 <s:NavigatorContent id="search" label="Search" width="100%" height="100%" fontWeight="bold" 
          > 

      <s:layout> 

       <s:VerticalLayout horizontalAlign="center" 
            paddingTop="5" paddingLeft="5" 
            paddingRight="5" paddingBottom="5" /> 
      </s:layout> 

      <s:Label text="Search Panel" /> 
      <s:HGroup > 
       <s:TextInput id="Searchtxt" width="200" /> 
       <mx:Button label="search" click="Searchtxt.text=''" /> 
      </s:HGroup> 
     </s:NavigatorContent> 

     <s:NavigatorContent id="custInfo" label="Customer Info" backgroundColor="0xDCDCDC" 
          width="100%" height="100%" fontWeight="bold" > 

      <s:layout> 
       <s:VerticalLayout horizontalAlign="center" 
            paddingTop="5" paddingLeft="5" 
            paddingRight="5" paddingBottom="5" /> 
      </s:layout> 

      <s:Label text="Customer Info" /> 
      <s:HGroup> 
       <s:Label text="Email Address"/> 
       <s:TextInput id="email" width="200"/> 
       <s:Button label="Submit" click="email.text='';" /> 
      </s:HGroup> 
     </s:NavigatorContent> 

     <s:NavigatorContent id="accountInfo" label="Account Info" backgroundColor="0xDCDCDC" width="100%" height="100%" fontWeight="bold" > 

      <s:layout> 
       <s:VerticalLayout horizontalAlign="center" 
            paddingTop="5" paddingLeft="5" 
            paddingRight="5" paddingBottom="5" /> 
      </s:layout> 

      <s:Label text="Account Info" /> 
      <s:HGroup> 
       <s:Button label="Purchases" /> 
       <s:Button label="Sales" /> 
       <s:Button label="Reports" /> 
      </s:HGroup> 
     </s:NavigatorContent> 

    </mx:ViewStack>

來源

2012-07-08 02:41:20

這個答案也是主題。這甚至沒有標籤...... Flex 4.5中mx TabNavigator標籤的角半徑，這就是問題所在。 –

這是我知道這個問題的最佳和最簡單的解決方法。看來Adobe從未解決過這個錯誤。

<s:VGroup width="100%" height="100%" gap="0" > 
    <s:Group width="100%"> 
     <s:TabBar left="4" dataProvider="{tabNav}" cornerRadius="4" /> 
    </s:Group> 
    <s:BorderContainer width="100%" height="100%" cornerRadius="4"> 
     <mx:ViewStack id="tabNav" paddingBottom="10" width="100%" height="100%" > 
      <s:NavigatorContent label="Form" width="100%" height="100%"> 
       ... 
      </s:NavigatorContent> 
      <mx:Canvas id="treeNode" label="TreeNodeComponent" width="100%" height="100%"> 
       ... 
      </mx:Canvas> 
      <mx:Canvas id="melding" label="Melding" width="100%" height="100%" visible="{authorisation.moduleHasUserAutorization('melding')}" includeInLayout="{melding.visible}"> 
       ... 
      </mx:Canvas> 
     </mx:ViewStack> 
    </s:BorderContainer> 
</s:VGroup>

它的這種等價但在標籤（和身體）圓角：

<mx:TabNavigator id="tabNav" paddingBottom="10" width="100%" height="100%" > 
    <s:NavigatorContent label="Form" width="100%" height="100%"> 
     ... 
    </s:NavigatorContent> 
    <mx:Canvas id="treeNode" label="TreeNodeComponent" width="100%" height="100%"> 
     ... 
    </mx:Canvas> 
    <mx:Canvas id="melding" label="Melding" width="100%" height="100%" visible="{authorisation.moduleHasUserAutorization('melding')}" includeInLayout="{melding.visible}"> 
     ... 
    </mx:Canvas> 
</mx:TabNavigator>

來源

2012-09-07 09:08:08

Flex 4.5 TabNavigator cornerRadius不能正常工作

回答

相關問題