UNPKG

zent

Version:

一套前端设计语言和基于React的实现

61 lines (54 loc) 943 B
--- 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); ```