禁用某一项,禁用组件
<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-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>
请打开浏览器的控制台查看结果。
<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
需要同时设置 的 defaultKey
和 tab
的 key
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