kara-react-components-mobileweb/dev/root.js

kara项目移动端react组件库

import React from 'react'

import Scaffold from '../src/components/scaffold/index'
import Button from '../src/components/button/index'
import Tabs from '../src/components/tabs/index'
import '../src/components/tabs/index.scss'

const scaffoldProps = {
  hasFooter: true,
  title: '测试下参数',
  footer: <div>
    <div>123123</div>
    <Button size="full-width">测试下button</Button>
  </div>,
  right: '关闭',
}

const TabPane = Tabs.TabPane

function callback(key) {
  console.log('onChange', key)
}
function handleTabClick(key) {
  console.log('onTabClick', key)
}
const TabExample = () => (
  <div>
    <Tabs defaultActiveKey="2" onChange={callback} onTabClick={handleTabClick}>
      <TabPane tab="选项卡一" key="1">
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '5rem', backgroundColor: '#fff' }}>
          选项卡一内容
        </div>
      </TabPane>
      <TabPane tab="选项卡二" key="2">
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '5rem', backgroundColor: '#fff' }}>
          选项卡二内容
        </div>
      </TabPane>
      <TabPane tab="选项卡三" key="3">
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '5rem', backgroundColor: '#fff' }}>
          选项卡三内容
        </div>
      </TabPane>
    </Tabs>
  </div>
)


export default function Root() {
  return (
    <Scaffold {...scaffoldProps}>
      <TabExample />
    </Scaffold>
  )
}