源代码
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;