eui-eui.TabBar

TabBar 作為版面切換的控件

以下為 exml

<?xml version='1.0' encoding='utf-8'?>
<e:Skin class="skins.MySkin" width="640" height="1136" xmlns:e="http://ns.egret.com/eui">
    <e:Rect fillColor="0x000000" width="100%" height="100%" />
    <e:Group horizontalCenter="0" top="20">
        <!-- tabbar 區 -->
        <e:TabBar dataProvider="{viewStack}">
            <!-- 自訂 tabbar 皮膚 -->
            <e:itemRendererSkinName>
                <e:Skin states="up,down">
                    <e:Group>
                        <e:Rect fillColor="0x333333" width="100" height="50" />
                        <e:Label text="{data}" textColor.down="0xFFFFFF" textColor.up="0x666666" horizontalCenter="0"
                                 verticalCenter="0" />
                    </e:Group>
                </e:Skin>
            </e:itemRendererSkinName>
            <e:layout>
                <e:HorizontalLayout gap="1" />
            </e:layout>
        </e:TabBar>
        <!-- 內容區 -->
        <e:Group width="600" height="200">
            <e:Rect fillColor="0x333333" width="100%" height="100%" />
            <!-- 內容顯示區有兩組內容 -->
            <e:ViewStack id="viewStack" width="100%" height="100%">
                <e:Group name="tab1" width="100%" height="100%">
                    <e:Label text="TestPanel1" horizontalCenter="0" verticalCenter="0" />
                </e:Group>
                <e:Group name="tab2" width="100%" height="100%">
                    <e:Label text="TestPanel2" horizontalCenter="0" verticalCenter="0" />
                </e:Group>
            </e:ViewStack>
        </e:Group>
        <e:layout>
            <e:VerticalLayout gap="0" />
        </e:layout>
    </e:Group>
</e:Skin>