<custom chineseName="标签栏" engName="tabs"></custom>
<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">默认样式</view>
        <tabs
            class="tabs border-bottom"
            active-name="{{activeNameOne}}"
            bindtabchange="tabsOne">
            <tab-item s-for="tab in tabs" name="{{tab.name}}" label="{{tab.label}}" />
        </tabs>
        <view class="intro">
            <view>标签{{content}}内容展示区</view>
        </view>
    </view>
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>可横滑显示</view>
            <view>max-tab-item-amount="5"</view>
        </view>
        <tabs
            class="tabs border-bottom"
            active-name="{{activeNameTwo}}"
            max-tab-item-amount="5"
            bindtabchange="tabsTwo">
            <tab-item s-for="tab in tabsTwo" name="{{tab.name}}" label="{{tab.label}}" />
        </tabs>
        <view class="intro">
            <view>标签{{contentTwo}}内容展示区</view>
        </view>
    </view>
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>自定义样式</view>
        </view>
        <tabs
            class="tabs border-bottom"
            tabs-background-color="#3388ff"
            tabs-underline-color = "#fff"
            tabs-inactive-text-color="#fff"
            tabs-active-text-color="#fff"
            bindtabchange="tabsThree"
            active-name="{{activeNameThree}}">
            <tab-item s-for="tab in tabsThree" name="{{tab.name}}" label="{{tab.label}}" />
        </tabs>
        <view class="intro">
            <view>标签{{contentThree}}内容展示区</view>
        </view>
    </view>
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>显示徽标</view>
        </view>
        <tabs
            class="tabs border-bottom"
            bindtabchange="tabsFour"
            active-name="{{activeNameFour}}">
            <tab-item
                class="item"
                s-for="tab in tabsFour"
                badge-type="{{tab.badgeType}}"
                badge-text="{{tab.badgeText}}"
                name="{{tab.name}}"
                label="{{tab.label}}" />
        </tabs>
        <view class="intro">
            <view>标签{{contentFour}}内容展示区</view>
        </view>
    </view>
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>支持寻址</view>
        </view>
       <button type="primary" bind:tap="enterNewTabsPage">进入页面并定位到标签二</button>
    </view>
</view>