Flex 4.5 TabNavigator cornerRadius не работает

Мне труднее всего найти способ просто добавить закругленные вкладки в элемент управления TabNavigator.

Я видел примеры, которые кажутся очень простыми, но не работают во 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;

Есть идеи, почему это не работает? Любое простое решение (я новичок).

Спасибо.


cornerradius tabnavigator apache-flex
person user1003505    schedule 19.10.2011    source источник

Ответы (4)


arrow_upward
0
arrow_downward

Вы можете создать обложку для своего приложения / навигатора вкладок, использовать параметр «Создать копию» в Flash Builder и в разделе «Прямоугольник» установить значения radiusX и radiusY. Затем используйте эту обложку для компонента

person Drenai    schedule 20.10.2011
comment
Извините, я действительно не очень опытен здесь. Раньше я создавал копии скинов для компонентов Spark, но мне не удалось создать копию скинов для элемента управления mx. Не могли бы вы рассказать мне, как создать копию скина и затем применить ее к элементу управления mx: TabNavigator? - person user1003505; 21.10.2011
comment
Это невозможно сделать для элементов управления mx, извините. Это идеальный обходной путь: devgirl.org/2009/11 / 16 / tabbed-navigation-in-flex-4 - person Drenai; 21.10.2011

arrow_upward
0
arrow_downward

Это лучший и самый простой способ решения этой проблемы, который я знаю. Кажется, 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>
person Olivier de Jonge    schedule 07.09.2012

arrow_upward
-1
arrow_downward

Попробуй это!

<mx:TabNavigator id="tabNavigator" tabOffset="20" cornerRadius="10" height="100%" width="100%">
person kbgn    schedule 20.10.2011
comment
Я попробовал cornerRadius, но он устанавливает радиус только в области содержимого, а не на вкладках. - person user1003505; 21.10.2011
comment
Проблема заключается в округлении вкладок, а не в их содержании. - person Olivier de Jonge; 07.09.2012

arrow_upward
-1
arrow_downward

Это образец кода, который вы можете скопировать и запустить.

        <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>
person Le Truong Uy Phu    schedule 08.07.2012
comment
Этот ответ тоже не по теме. Здесь даже вкладок нет ... Угловой радиус вкладок mx TabNavigator во Flex 4.5, вот в чем проблема. - person Olivier de Jonge; 07.09.2012