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

class App extends React.Component {
  render() {
    const bodyStyle = {
      padding: 20
    }
    const titleStyle = {
      transform: 'rotate(90deg)',
      transformOrigin: '0px 0px',
      width: 100,
      height: 25,
      lineHeight: '25px',
      position: 'absolute',
      top: 0,
      left: 25,
      textAlign: 'center'
    }
    const tabHeader = (title) => (
      <span className="f-full" style={{ position: 'relative' }}>
        <span style={titleStyle}>{title}</span>
      </span>
    )
    return (
      <div>
        <h2>Vertical Title</h2>
        <Tabs
          style={{ height: 320 }}
          tabPosition="left"
          headerWidth={50}
          tabHeight={100}
        >
          <TabPanel header={() => tabHeader('Modem')} bodyStyle={bodyStyle}>
            <img alt="" src={'https://www.jeasyui.com/demo/main/images/modem.png'} />
            <p>A modem (modulator-demodulator) is a device that modulates an analog carrier signal to encode digital information, and also demodulates such a carrier signal to decode the transmitted information.</p>
          </TabPanel>
          <TabPanel header={() => tabHeader('Scanner')} bodyStyle={bodyStyle}>
            <img alt="" src={'https://www.jeasyui.com/demo/main/images/scanner.png'} />
            <p>In computing, an image scanner—often abbreviated to just scanner—is a device that optically scans images, printed text, handwriting, or an object, and converts it to a digital image.</p>
          </TabPanel>
          <TabPanel header={() => tabHeader('Tablet')} bodyStyle={bodyStyle}>
            <img alt="" src={'https://www.jeasyui.com/demo/main/images/tablet.png'} />
            <p>A tablet computer, or simply tablet, is a one-piece mobile computer. Devices typically have a touchscreen, with finger or stylus gestures replacing the conventional computer mouse.</p>
          </TabPanel>
        </Tabs>
      </div>
    );
  }
}

export default App;