Tabset
tabset选项卡组件
- 通过activeIndex指定默认的选中tab的索引值。
- 选项卡默认横排, 可通过vertical设置为竖排。
- 当设置为vertical后, 可通过width设置tab标题部分的宽度占比。
- 可通过onTabsetChange设置点击选项卡的回调函数。
- 可自定义className等常用属性以及事件。
具体属性和接口如下：
- activeIndex:默认选中的标签卡索引值，默认0第一个tab
- vertical:是否竖排，如需要直接添加改属性即可，默认不竖排
- width:选项卡头部的宽度，取值0-100之间, 只有设置vertical下生效, 默认20
- onTabsetChange:点击选项卡执行的回调函数
示例:
- 横排
<Tabset activeIndex ={this.state.index} onTabsetChange={(index)=>{console.log(index);}> <Tab heading='标题1' className='tab-test'> 横向内容1 </Tab> <Tab heading='标题2' clickCallback={(index)=>{console.log(index);}> 横向内容2 </Tab> </Tabset> - 竖排
<Tabset vertical width={30} activeIndex ={this.state.index} onTabsetChange={(index)=>{console.log(index);}> <Tab heading='标题1'> 竖向内容1 </Tab> <Tab heading='标题2' clickCallback={(index)=>{console.log(index);}> 竖向内容2 </Tab> </Tabset>
Constructor
Tabset
Tabset
()
Example:
import React, { Component } from "react";
import {Tabset,Tab} from "phoenix-ui";
import Code from "./code/code";
export default class tab extends Component{
constructor(props,context){
super(props,context);
}
onTabsetChange(index){
alert("测试tabset回调", "index: " + index);
}
onTabChange(index){
alert("测试tab回调", "index: " + index);
}
render(){
return(
<div>
<h2 className="comp-title">Tabset/Tab</h2>
<h3 className="comp-type"><strong>Tabset</strong></h3>
<h3 className="comp-type">activeIndex(默认0) 默认选中选项卡的索引值</h3>
<div className="content">
<Tabset activeIndex={1}>
<Tab heading="标题1">
横向内容1
</Tab>
<Tab heading="标题2">
横向内容2
</Tab>
</Tabset>
</div>
<Code target="tabset-activeindex" />
<h3 className="comp-type">vertical(默认false) 设置选项卡竖排</h3>
<div className="content">
<Tabset vertical>
<Tab heading="标题1">
竖向内容1
</Tab>
<Tab heading="标题2">
竖向内容2
</Tab>
</Tabset>
</div>
<br/>
<Code target="tabset-vertical" />
<h3 className="comp-type">width(默认20) 设置vertical之后标题的占比</h3>
<div className="content">
<Tabset vertical width={30}>
<Tab heading="标题1">
竖向内容1
</Tab>
<Tab heading="标题2">
竖向内容2
</Tab>
</Tabset>
</div>
<br/>
<Code target="tabset-width" />
<h3 className="comp-type">onTabsetChange 点击选项卡的回调函数</h3>
<div className="content">
<Tabset onTabsetChange={::this.onTabsetChange}>
<Tab heading="标题1">
横向内容1
</Tab>
<Tab heading="标题2">
横向内容2
</Tab>
</Tabset>
</div>
<Code target="tabset-ontabsetchange" />
<h3 className="comp-type"><strong>Tab</strong></h3>
<h3 className="comp-type">heading(默认"tab") 选项卡的标题内容</h3>
<div className="content">
<Tabset>
<Tab heading="Tab heading 1">
横向内容1
</Tab>
<Tab heading="Tab heading 2">
横向内容2
</Tab>
</Tabset>
</div>
<Code target="tab-heading" />
<h3 className="comp-type">onTabChange 点击单个选项卡的回调函数</h3>
<div className="content">
<Tabset>
<Tab heading="标题1" onTabChange={::this.onTabChange}>
横向内容1
</Tab>
<Tab heading="标题2">
横向内容2
</Tab>
</Tabset>
</div>
<Code target="tab-ontabchange" />
</div>
);
}
}方法
onTabsetChange
onTabsetChange
()
点击事件的回调函数,返回当前选中项
属性
activeIndex
Number
指定默认选中的选项卡，默认为0
Default:
0
vertical
Boolean
是否竖排
Default:
false || null
width
Number
设置选项卡头部的宽度，只有竖排的情况下才起作用
Default:
'20'