代码演示

基本形式

<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 class
Extend: Component

new Tabs()

Param Type Default Description
[options.data] object = 绑定属性
[options.data.selected] object <=> 当前选择卡
[options.data.titleTemplate] string null @=> 标题模板
[options.data.defaultKey] string null => 默认显示对应 key 的 Tab
[options.data.readonly] boolean false => 是否只读
[options.data.disabled] boolean false => 是否禁用
[options.data.visible] boolean true => 是否显示
[options.data.class] string => 补充class

Tab

Kind: global class
Extend: Component

new Tab()

Param Type Default Description
[options.data] object = 绑定属性
[options.data.title] object '' => 标题
[options.data.key] string null => key 标识

config()

Kind: global function
Access: protected

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

Kind: global function
Access: public

Param Type Description
item object 选择项

config()

Kind: global function
Access: protected

“change 选项卡改变时触发”

Kind: event emitted
Properties

Name Type Description
sender object 事件发送对象
selected object 改变后的选项卡

“select 选择某一项时触发”

Kind: event emitted
Properties

Name Type Description
sender object 事件发送对象
selected object 当前选择卡
← 步骤
想让文档更完善？ 来 GitHub 提个 PR 吧！