Web Demo Mobile Demo Angular Demo Vue Demo React Demo
源代码
import React from 'react';
import { Tabs, TabPanel, SwitchButton, Label } from 'rc-easyui';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      plain: false,
      narrow: false,
      justified: false
    }
  }
  render() {
    const switchButton = (field) => {
      const id = field + '_id';
      return (
        <div style={{ marginBottom: 4 }}>
          <Label htmlFor={id}>{field}:</Label>
          <SwitchButton
            inputId={id}
            value={this.state[field]}
            onChange={(value) => this.setState({ [field]: value })}
          />
        </div>
      )
    }
    return (
      <div>
        <h2>Tab Style</h2>
        {switchButton('plain')}
        {switchButton('narrow')}
        {switchButton('justified')}
        <Tabs {...this.state} style={{ height: 250 }}>
          <TabPanel title="Tab1">
            <p>Tab Panel1</p>
          </TabPanel>
          <TabPanel title="Tab2">
            <p>Tab Panel2</p>
          </TabPanel>
          <TabPanel title="Tab3">
            <p>Tab Panel3</p>
          </TabPanel>
          <TabPanel title="Help" closable iconCls="icon-help">
            <p>This is the help content.</p>
          </TabPanel>
        </Tabs>
      </div>
    );
  }
}

export default App;