qm-bus/src/Tab/TabPane.js

千米公有云业务组件库

import React from 'react'
import styled from 'styled-components'

const Container = styled.div`
  position: absolute;
`

/**
 * 标签页
 */
export class Tabs extends React.Component {
  static defaultProps = {
    active: '', // 当前激活 Tab 面板 key值
    defaultActive: '', // 默认激活 Tab 面板 key值
    onChange: () => {}, // 切换面板回调
    onTabClick: () => {}, // 点击 Tab 回调
  }

  constructor(props) {
    super(props)
    this.state = {}
  }

  render() {
    return <Container></Container>
  }
}

const TabTitles = styled.div`
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  height: 100%;
  margin: 0 32px 0 0;
  padding: 12px 16px;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  color: #1890ff;
  font-weight: 500;
`

const TabLine = styled.div`
  position: absolute;
  bottom: 1px;
  left: 0;
  z-index: 1;
  box-sizing: border-box;
  height: 2px;
  background-color: #1890ff;
  transform-origin: 0 0;
  /*  */
  display: block;
  transform: translate3d(100px, 0px, 0px);
  width: 69px;
`

export class TabPane extends React.Component {
  static defaultProps = {
    key: '', // Tab#active
    tab: '', // 选项卡显示文字
  }
  constructor(props) {
    super(props)
    this.state = {}
  }

  render() {
    return (
      <div>
        <TabTitles />
        <div>
          <div role="tab" class="ant-tabs-tab">
            Tab 1
          </div>
          <div role="tab" class="ant-tabs-tab ant-tabs-tab-active">
            Tab 2
          </div>
          <div role="tab" class="ant-tabs-tab">
            Tab 3
          </div>
        </div>
        <TabLine />
        <div
          class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
          style="display: block; transform: translate3d(100px, 0px, 0px); width: 69px;"></div>
      </div>
    )
  }
}