установить радиус угла для нижних углов вкладки в навигаторе вкладок - PullRequest
Новая
       9

установить радиус угла для нижних углов вкладки в навигаторе вкладок

1 голос
/ 26 апреля 2010

Используя CSS, я могу установить угловой радиус верхних углов вкладки в tabnavigator: 

<mx:Style>
    .tabstyle
    {
        corner-radius: 10;
    }
</mx:Style>

<mx:TabNavigator tabStyleName="tabstyle" />

Однако я также хочу, чтобы нижние углы имели радиус. Кто-нибудь знает, как это сделать ??

Ответы [ 3 ]

1 голос
/ 27 апреля 2010

Предполагая, что элементы, которые вы помещаете в TabNavigator, являются частью стандартного набора элементов управления Flex, вы можете использовать их для создания пользовательского программного скина, который рисует их фон / границу в соответствии с вашим желаемым видом. К счастью, довольно просто создать программный скин, который захватывает информацию о стиле (например, значение углового радиуса) и использует ее для контроля за тем, как рисуется графика - просто покопайтесь в Интернете, и вы Обязательно найдете учебники по скину в Flex 3.

0 голосов
/ 27 апреля 2010

расширение ответа от @ZackBeNimble Может быть проще использовать degrafa:

компонент кожи: 

<degrafa:GraphicBorderSkin xmlns:degrafa="namespaceLovin">

<degrafa:geometry>
    <degrafa:GeometryComposition>
        <degrafa:RoundedRectangleComplex topLeftRadius="0" topRightRadius="0" bottomLeftRadius="5" bottomRightRadius="5"
                        height="{skinHeight}"
                        width="{skinWidth}"
                        fill="{someFill}" />

</degrafa:geometry>


</degrafa:GraphicBorderSkin>

вам понадобится заполнить. Кроме того, skinWidth и height являются внутренними переменными degrafa, которые они добавили в бета-версию - вам придется переопределить обновленный список воспроизведения, если вы используете старую версию, чтобы получить немасштабированную ширину и немасштабированную высоту.

затем в компоненте, который вы снимаете, установите этот стиль: borderSkin = "package.class.location"

Может быть немного быстрее, если вы не знакомы с традиционным программным скином ... Я больше фанат el degrafa.

0 голосов
/ 27 апреля 2010

Ответ ZackBeNimble сработал хорошо, но у меня действительно было дополнительное требование, чтобы любой макет был легко изменить. Итак, теперь я установил обложку вкладок для изображения с желаемым угловым радиусом. 

<mx:Style>
    .tabstyle
    {
        skin: Embed(source="../images/corner_radius_tabs.png", scaleGridLeft="44", scaleGridRight="45", scaleGridTop="1", scaleGridBottom="2"); 
        padding-left: 44;
        padding-right: 44;
    }
</mx:Style>

<mx:TabNavigator tabStyleName="tabstyle" />
...