react-tabs 组件库 标签页
基于css-modules 基于wepack打包 样式灵活，可深度定制 引用方法基于react 的标签页组件(适用于移动端)
安装
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| Properties | Descrition | Type | isRequired | Default |
|---|---|---|---|---|
| activeKey | 初始化时展示的标签页 | number | no | 0 |
| items | Nav标签内容 | array | yes | null |
| onChange | 切换标签页的回调(回调参数为当前点击Nav的key值) | func | yes | 无 |
| clean | 是否清除默认样式 | bool | no | false |
| noCursor | 清除nav游标 | bool | no | false |
| mergeStyle | 样式覆盖 | object(tab, tab-list, item, active, tab-panels, panel, cursor) | no | 无 |
| Properties | Descrition | Type | isRequired | Default |
|---|---|---|---|---|
| activeKey | 初始化时展示的标签页 | number | no | 0 |
| name | 标签的名字或展示内容 | string/node | yes | 无 |
| clean | 是否清除默认样式 | bool | no | false |
| showAll | 是否展示全部面板 | bool | no | true |
| mergeStyle | 样式覆盖 | object(tab, tab-list, item, active, tab-panels, panel, cursor) | no | 无 |
https://fdt-component.github.io/rc-tabs/docs/index.html
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
