zent
Version:
一套前端设计语言和基于React的实现
138 lines (124 loc) • 3.3 kB
JavaScript
import React from 'react';
import ReactDom from 'react-dom';
import Tabs from '../src';
import '../assets/index.scss';
const TabPanel = Tabs.TabPanel;
/*
## Write Something here
You can write guides for users here
*/
const Simple = React.createClass({
getInitialState() {
return {
align: 'left',
size: 'normal',
type: 'normal',
candel: false,
canadd: false,
activeId: '2',
panels: [{
tab: <span>哈哈哈</span>,
id: '1',
disabled: true,
content: '选项二'
}, {
tab: <span>空间选项二</span>,
id: '2',
content: <div>选项一的内容</div>
}, {
tab: '选项三',
id: '3',
content: '选项三的内容'
}],
onTabChange: ((id) => {
this.setState({
activeId: id
});
})
};
},
alignChange() {
this.setState({
align: this.aselect.value
});
},
sizeChange() {
this.setState({
size: this.asize.value
});
},
typeChange() {
this.setState({
type: this.atype.value
});
},
canaddChange() {
this.setState({
canadd: this.canaddDom.checked
});
},
candelChange() {
this.setState({
candel: this.candelDom.checked
});
},
renderPanels() {
let { panels } = this.state;
let PanelEls = [];
panels.forEach((p) => {
PanelEls.push(<TabPanel {...p} key={p.id}>{p.content}</TabPanel>);
});
return PanelEls;
},
render() {
let oStyle = {
border: '1px solid black',
marginRight: '10px',
display: 'inline-block',
padding: '10px'
};
return (
<div>
<div style={oStyle}>
align:
<select onChange={this.alignChange} ref={(c) => { this.aselect = ReactDom.findDOMNode(c) }}>
<option value="left">left</option>
<option value="right">right</option>
<option value="center">center</option>
</select>
</div>
<div style={oStyle}>
type:
<select ref={(c) => { this.atype = ReactDom.findDOMNode(c) }} onChange={this.typeChange}>
<option value="normal">normal</option>
<option value="card">card</option>
<option value="slider">slider</option>
</select>
</div>
<div style={oStyle}>
size:
<select ref={(c) => { this.asize = ReactDom.findDOMNode(c) }} onChange={this.sizeChange}>
<option value="normal">normal</option>
<option value="huge">huge</option>
</select>
</div>
<div style={oStyle}>
canadd:
<input type="checkbox" onChange={this.canaddChange} ref={(c) => { this.canaddDom = ReactDom.findDOMNode(c) }}></input>
candel
<input type="checkbox" onChange={this.candelChange} ref={(c) => { this.candelDom = ReactDom.findDOMNode(c) }}></input>
</div>
<div style={{ marginTop: '10px' }}>
<Tabs activeId="1" type="slider" >
<TabPanel tab="sdfasf" id="1">
<Tabs {...this.state} >
{this.renderPanels()}
</Tabs>
</TabPanel>
</Tabs>
</div>
</div>
);
}
});
export default Simple;