选项卡 Tabs

示例

基本形式

<tabs>
    <tab title="Tab1">Content1</tab>
    <tab title="Tab2">Content2</tab>
    <tab title="Tab3">Content3</tab>
    <tab title="Tab4">Content4</tab>
</tabs>

current和selected

<div class="g-row">
    <div class="g-col g-col-6">
        <tabs current=1>
            <tab title="Tab1">Content1</tab>
            <tab title="Tab2">Content2</tab>
            <tab title="Tab3">Content3</tab>
            <tab title="Tab4">Content4</tab>
        </tabs>
    </div>
    <div class="g-col g-col-6">
        <tabs>
            <tab title="Tab1">Content1</tab>
            <tab title="Tab2">Content2</tab>
            <tab title="Tab3" selected>Content3</tab>
            <tab title="Tab4">Content4</tab>
        </tabs>
    </div>
</div>

禁用某一项，禁用组件

<div class="g-row">
    <div class="g-col g-col-6">
        <tabs>
            <tab title="Tab1">Content1</tab>
            <tab title="Tab2">Content2</tab>
            <tab title="Tab3" disabled>Content3</tab>
            <tab title="Tab4">Content4</tab>
        </tabs>
    </div>
    <div class="g-col g-col-6">
        <tabs disabled>
            <tab title="Tab1">Content1</tab>
            <tab title="Tab2">Content2</tab>
            <tab title="Tab3">Content3</tab>
            <tab title="Tab4">Content4</tab>
        </tabs>
    </div>
</div>

隐藏某一项

<tabs>
    <tab title="Tab1">Content1</tab>
    <tab title="Tab2" visible={false}>Content2</tab>
    <tab title="Tab3">Content3</tab>
    <tab title="Tab4">Content4</tab>
</tabs>

居中

<tabs class="m-tabs-center">
    <tab title="Tab1">Content1</tab>
    <tab title="Tab2">Content2</tab>
    <tab title="Tab3">Content3</tab>
    <tab title="Tab4">Content4</tab>
</tabs>

垂直居左

<tabs class="m-tabs-left">
    <tab title="Tab1">Content1</tab>
    <tab title="Tab2">Content2</tab>
    <tab title="Tab3">Content3</tab>
    <tab title="Tab4">Content4</tab>
</tabs>

垂直居右

<tabs class="m-tabs-right">
    <tab title="Tab1">Content1</tab>
    <tab title="Tab2">Content2</tab>
    <tab title="Tab3">Content3</tab>
    <tab title="Tab4">Content4</tab>
</tabs>

标题模板自定义

<tabs titleTemplate={@(this.titleTemplate)}>
    <tab title="Tab1">Content1</tab>
    <tab title="Tab2" success={true}>Content2</tab>
    <tab title="Tab3" success={true}>Content3</tab>
    <tab title="Tab4">Content4</tab>
</tabs>

let component = new RGUI.Component({
    template,
    titleTemplate: `<span>{item.data.title} {#if item.data.success}<span class="u-text u-text-success"><i class="u-icon u-icon-check-circle"></i></span>{/if}</span>`
});

数据绑定

<tabs current={current}>
    <tab title="Tab0">Content0</tab>
    <tab title="Tab1">Content1</tab>
    <tab title="Tab2">Content2</tab>
    <tab title="Tab3">Content3</tab>
</tabs>
<p><span>当前页：{current}</span></p>
<a class="u-btn u-btn-info" on-click={current -= 1}>上一页</a>
<a class="u-btn u-btn-info" on-click={current += 1}>下一页</a>

let component = new RGUI.Component({
    template,
    data: {current: 2},
});

事件

请打开浏览器的控制台查看结果。

<tabs current={2} on-select={console.log('on-select:', '$event.current:', $event.current)}
      on-change={console.log('on-change:', '$event.current:', $event.current)}>
    <tab title="Tab0">Content0</tab>
    <tab title="Tab1">Content1</tab>
    <tab title="Tab2">Content2</tab>
    <tab title="Tab3">Content3</tab>
</tabs>

API

Class

Tabs

继承自。

Options

new Tabs()

参数	类型	默认值	数据流向	描述
`data`	Object			绑定属性
`data.current`	number	`0`	outside <=> inside	当前选择页索引
`data.titleTemplate`	string		outside @=> inside	标题模板
`data.readonly`	boolean	`false`	outside => inside	是否只读
`data.disabled`	boolean	`false`	outside => inside	是否禁用
`data.visible`	boolean	`true`	outside => inside	是否显示
`data.class`	string	`''`	outside => inside	补充class

Methods

tabs.select(tab)

选择某一项

参数	类型	默认值	描述
`tab`	Tab		选择项
返回值	类型	描述
无返回值

Events

tabs.$on('change')

选择页改变时触发

属性	类型	描述
`sender`	object	事件发送对象
`current`	number	改变后的选择页索引
`selected`	Tab	改变后的选择页

tabs.$on('select')

选择某一项时触发

属性	类型	描述
`sender`	object	事件发送对象
`current`	number	当前选择页索引
`selected`	Tab	当前选择页