ttk-app-core/src/apps/app-demo/tabs/default-tabs/app.js

@ttk/recat enterprise develop framework

import React, { useEffect, useCallback, useState } from 'react'
import { Tabs, Radio } from 'antd'
import { useData, useActions } from '@ttk/app-loader'
import "./style.less"
const { TabPane } = Tabs

export default React.memo(Page)
function Page(props) {

  const actions = useActions(props)
  const panes = useData([props, 'panes']).toJS()
  const [activeKey, setActiveKey] = useState(panes[0].key)
  const [size, setSize] = useState('small')
  const [position, setPosition] = useState('top')

  // 切换tab
  const onChange = useCallback((key) => {
    setActiveKey(key)
  })

  // 变更tab大小
  const onChangeSize = useCallback((e) => {
    setSize(e.target.value)
  })

  // 变更tab展示方位
  const onChangePosition = useCallback((e) => {
    setPosition(e.target.value)
  })

  return (
    <div className="tabs-container">
      可变位置：
      <Radio.Group value={position} onChange={onChangePosition} style={{ marginBottom: 16 }}>
        <Radio.Button value="left">Left</Radio.Button>
        <Radio.Button value="top">Top</Radio.Button>
        <Radio.Button value="right">Right</Radio.Button>
        <Radio.Button value="bottom">Bottom</Radio.Button>
      </Radio.Group>
      <br />
      可变大小：
      <Radio.Group value={size} onChange={onChangeSize} style={{ marginBottom: 16 }}>
        <Radio.Button value="small">Small</Radio.Button>
        <Radio.Button value="default">Default</Radio.Button>
        <Radio.Button value="large">Large</Radio.Button>
      </Radio.Group>
      <Tabs
        tabBarGutter={4}
        onChange={onChange}
        activeKey={activeKey}
        size={size}
        tabPosition={position}
      >
        {panes.map(pane => (
          <TabPane tab={pane.title} key={pane.key} closable={pane.closable}>
            {pane.content}
          </TabPane>
        ))}
      </Tabs>
    </div>
  )
}