React-Tab
基于react 的标签页组件(适用于移动端)
- 基于css-modules
- 基于wepack打包
- 样式灵活,可深度定制
引用方法
安装
npm install ygq-rc-tabs
或者
yarn add ygq-rc-tabs
引用
import {Nav, Panel} from 'ygq-rc-tabs'
使用
;;Componentstate = activeKey: 0this;{return<NavactiveKey=thisstateactiveKeyonChange=thisonChangeitems='栏目1''栏目2'/><PanelsactiveKey=thisstateactiveKeyshowAll=false><div>我是栏目1</div><div>我是栏目2</div></Panels>;}
样式自定义
/* 默认动画效果 */@keyframes fadeInfromopacity: 0;toopacity: 1;/* Nav 组件样式 */.nav-wrapwidth: 100%;position: relative;text-align: center;display: flex;align-items: center;justify-content: center;flex-direction: row;.navdisplay: block;line-height: 40px;flex: 1;&.active/* Panels组件样式 */.panelswidth: 100%;.panelwidth: 100%;height: 100%;&.activeanimation: fadeIn .8s;/* Tab 游标样式 */.cursor-wrapposition: absolute;left: 0;bottom: 0;transition: transform 300ms ease-out;.cursorwidth: 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 | 无 |
Panel
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 | 无 |