代码演示

基本形式

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

禁用某一项，禁用组件

<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 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" mark={true}>Content2</tab>
    <tab title="Tab3" mark={true}>Content3</tab>
    <tab title="Tab4">Content4</tab>
</tabs>

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

事件

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

<tabs on-select={console.log('on-select:', '$event.selected:', $event.selected)}
      on-change={console.log('on-change:', 'key:', $event.key)}>
    <tab title="Tab1" key="1">Content1</tab>
    <tab title="Tab2" key="2">Content2</tab>
    <tab title="Tab3" key="3">Content3</tab>
    <tab title="Tab4" key="4">Content4</tab>
</tabs>

var component = new NEKUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1'},
            {name: '选项2'},
            {name: '选项3'}
        ]
    }
});

默认选中 Tab

需要同时设置 tabs 的 defaultKey 和 tab 的 key

<tabs defaultKey="3">
    <tab title="Tab1" key="1">Content1</tab>
    <tab title="Tab2" key="2">Content2</tab>
    <tab title="Tab3" key="3">Content3</tab>
    <tab title="Tab4" key="4">Content4</tab>
</tabs>

API

Classes

• Tabs
• Tab

Functions

• config()
• select(item) 选择某一项(item) 选择某一项) ⇒ void
• config()

Events

• “change 选项卡改变时触发”
• “select 选择某一项时触发”

Tabs

Kind: global classExtend: Component

new Tabs()

Tab

Kind: global classExtend: Component

new Tab()

config()

Kind: global functionAccess: protected

select(item) 选择某一项(item) ⇒ void

Kind: global functionAccess: public

config()

Kind: global functionAccess: protected

“change 选项卡改变时触发”

Kind: event emittedProperties

“select 选择某一项时触发”

Kind: event emittedProperties