ygq-rc-tabs v3.0.1

React-Tab

基于react 的标签页组件(适用于移动端)

• 基于css-modules
• 基于wepack打包
• 样式灵活，可深度定制

引用方法

安装
npm install ygq-rc-tabs
或者
yarn add ygq-rc-tabs

引用
import {Nav, Panel} from 'ygq-rc-tabs'

使用

import React from 'react';
import {Nav, Panel} from '../../src/index.js';

class Demo1 extends React.Component {
  state = {activeKey: 0}
  onChange = idx => this.setState({activeKey: idx});

  render() {
    return (
      <Nav
        activeKey={this.state.activeKey}
        onChange={this.onChange}
        items={['栏目1','栏目2']}
      />
      <Panels
        activeKey={this.state.activeKey}
        showAll={false}
      >
        <div>我是栏目1</div>
        <div>我是栏目2</div>
      </Panels>
    );
  }
}

样式自定义

/* 默认动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Nav 组件样式 */
.nav-wrap {
  width: 100%;
  position: relative;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.nav {
  display: block;
  line-height: 40px;
  flex: 1;
  &.active {
  }
}

/* Panels组件样式 */
.panels {
  width: 100%;
}

.panel {
  width: 100%;
  height: 100%;
  &.active {
    animation: fadeIn .8s;
  }
}

/* Tab 游标样式 */
.cursor-wrap {
  position: absolute;
  left: 0;
  bottom: 0;
  transition: transform 300ms ease-out;
}

.cursor {
  width: 100%;
  height: 2px;
  margin: auto;
  background-color: #4A86EA;
}

当前项目依赖css-modules，新建一份自己的自定义css|less文件， 比如tabstyle.less;

• 命名需和默认样式名字保持一致
• 如果需要全部自定义，开启组件clean属性为true，消除默认样式

import styles form './tabstyle.less';

将styles作为mergeStyle传入对应react 组件即可

API

Nav

Panel

example

https://fdt-component.github.io/rc-tabs/docs/index.html