禁用某一项,禁用组件

选项卡 tabs - 图2

  1. <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>

居中

  1. <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 - 图4

垂直居右

  1. <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>

标题模板自定义

  1. <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>

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

选项卡 tabs - 图7

  1. <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>
  1. var component = new NEKUI.Component({
    template: template,
    data: {
    source: [
    {name: '选项1'},
    {name: '选项2'},
    {name: '选项3'}
    ]
    }
    });

默认选中 Tab

需要同时设置 的 defaultKeytabkey

API

Classes

Functions

Tabs

Kind: global classExtend: Component

new Tabs()

Tab

Kind: global classExtend: Component

config()

Kind: global functionAccess: protected

Kind: global functionAccess: public

config()

Kind: global functionAccess: protected

“change 选项卡改变时触发”

Kind: event emittedProperties

“select 选择某一项时触发”

Kind: event emittedProperties