代码演示

基本形式

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

禁用某一项，禁用组件

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

居中

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

垂直居左

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

垂直居右

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

标题模板自定义

<jr-tabs titleTemplate={@(this.titleTemplate)}>
    <jr-tab title="Tab1">Content1</jr-tab>
    <jr-tab title="Tab2" mark={true}>Content2</jr-tab>
    <jr-tab title="Tab3" mark={true}>Content3</jr-tab>
    <jr-tab title="Tab4">Content4</jr-tab>
</jr-tabs>
var component = new JRUI.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}`
});

事件

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

<jr-tabs on-select={console.log('on-select:', '$event.selected:', $event.selected)}
      on-change={console.log('on-change:', 'key:', $event.key)}>
    <jr-tab title="Tab1" key="1">Content1</jr-tab>
    <jr-tab title="Tab2" key="2">Content2</jr-tab>
    <jr-tab title="Tab3" key="3">Content3</jr-tab>
    <jr-tab title="Tab4" key="4">Content4</jr-tab>
</jr-tabs>
var component = new JRUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1'},
            {name: '选项2'},
            {name: '选项3'}
        ]
    }
});

默认选中 Tab

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

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

API

Classes

JRTab
JRTabs

Constants

Component

JRTabs 选项卡

Functions

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

Events

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

JRTab

Kind: global class
Extend: Component

new JRTab()

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

JRTabs

Kind: global class
Extend: Component

new JRTabs()

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

Component

JRTabs 选项卡

Kind: global constant

Author: sensen(rainforest92@126.com)

config()

Kind: global function
Access: protected

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

Kind: global function
Access: public

Param Type Description
item object 选择项

“change 选项卡改变时触发”

Kind: event emitted
Properties

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

“select 选择某一项时触发”

Kind: event emitted
Properties

Name Type Description
sender object 事件发送对象
selected object 当前选择卡
← 步骤