zent
Version:
一套前端设计语言和基于React的实现
61 lines (54 loc) • 943 B
Markdown
order: 5
zh-CN:
title: 不使用TabPanel,只使用Tab展示导航
tabOne: 选项一
tabTwo: 选项二
tabThree: 选项三
en-US:
title: Tabs without using TabPanel
tabOne: Tab One
tabTwo: Tab Two
tabThree: Tab Three
```jsx
import { Tabs } from 'zent';
class Simple extends Component {
constructor(props) {
super(props);
this.state = {
activeId: '2',
tabs: [{
title: '{i18n.tabOne}',
key: '1',
disabled: true
}, {
title: '{i18n.tabTwo}',
key: '2'
}, {
title: '{i18n.tabThree}',
key: '3'
}]
};
}
onTabChange(id) {
this.setState({
activeId: id
});
}
render() {
return (
<div>
<div style={{ marginTop: '10px' }}>
<Tabs
activeId={this.state.activeId}
onTabChange={this.onTabChange.bind(this)}
tabs={this.state.tabs} />
<h1>{this.state.activeId}</h1>
</div>
</div>
);
}
}
ReactDOM.render(<Simple />, mountNode);
```