zent
Version:
一套前端设计语言和基于React的实现
99 lines (89 loc) • 1.95 kB
JavaScript
import React from 'react';
import Tabs from '../src';
import '../assets/index.scss';
const TabPanel = Tabs.TabPanel;
/*
## Write Something here
You can write guides for users here
*/
let uniqId = 4;
const Simple = React.createClass({
getInitialState() {
return {
align: 'left',
size: 'normal',
type: 'normal',
candel: true,
canadd: true,
onTabChange: ((id) => {
this.setState({
activeId: id
});
}),
onTabAdd: (() => {
let { panels } = this.state;
panels.push({
tab: `选项${uniqId}`,
id: `${uniqId++}`,
disabled: false,
content: Date.now()
});
this.setState({
panels
});
}),
onTabDel: ((id) => {
let { panels } = this.state;
let index = -1;
panels.some((p, i) => {
if (p.id === id) {
index = i;
return true;
}
return false;
});
if (index > -1) {
panels.splice(index, 1);
this.setState({
panels
});
}
}),
activeId: '2',
panels: [{
tab: '选项一',
id: '1',
disabled: true,
content: '选项一的内容'
}, {
tab: '选项二',
id: '2',
content: <div>选项二的内容</div>
}, {
tab: '选项三',
id: '3',
content: '选项三的内容'
}]
};
},
renderPanels() {
let { panels } = this.state;
let PanelEls = [];
panels.forEach((p) => {
PanelEls.push(<TabPanel {...p} key={p.id}>{p.content}</TabPanel>);
});
return PanelEls;
},
render() {
return (
<div>
<div style={{ marginTop: '10px' }}>
<Tabs {...this.state} >
{this.renderPanels()}
</Tabs>
</div>
</div>
);
}
});
export default Simple;