1 | # rc-tabs
|
2 |
|
3 | ---
|
4 |
|
5 | React Tabs component.
|
6 |
|
7 | [![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Test coverage][coveralls-image]][coveralls-url] [![Dependencies][david-image]][david-url] [![DevDependencies][david-dev-image]][david-dev-url] [![npm download][download-image]][download-url] [![bundle size][bundlephobia-image]][bundlephobia-url]
|
8 |
|
9 | [npm-image]: http://img.shields.io/npm/v/rc-tabs.svg?style=flat-square
|
10 | [npm-url]: http://npmjs.org/package/rc-tabs
|
11 | [github-actions-image]: https://github.com/react-component/tabs/workflows/CI/badge.svg
|
12 | [github-actions-url]: https://github.com/react-component/tabs/actions
|
13 | [circleci-image]: https://img.shields.io/circleci/react-component/tabs/master?style=flat-square
|
14 | [circleci-url]: https://circleci.com/gh/react-component/tabs
|
15 | [coveralls-image]: https://img.shields.io/coveralls/react-component/tabs.svg?style=flat-square
|
16 | [coveralls-url]: https://coveralls.io/r/react-component/tabs?branch=master
|
17 | [david-url]: https://david-dm.org/react-component/tabs
|
18 | [david-image]: https://david-dm.org/react-component/tabs/status.svg?style=flat-square
|
19 | [david-dev-url]: https://david-dm.org/react-component/tabs?type=dev
|
20 | [david-dev-image]: https://david-dm.org/react-component/tabs/dev-status.svg?style=flat-square
|
21 | [download-image]: https://img.shields.io/npm/dm/rc-tabs.svg?style=flat-square
|
22 | [download-url]: https://npmjs.org/package/rc-tabs
|
23 | [bundlephobia-url]: https://bundlephobia.com/result?p=rc-tabs
|
24 | [bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-tabs
|
25 |
|
26 |
|
27 | ## Screenshot
|
28 |
|
29 | <img src='https://zos.alipayobjects.com/rmsportal/JwLASrsOYJuFRIt.png' width='408'>
|
30 |
|
31 | ## Example
|
32 |
|
33 | http://localhost:8000/examples
|
34 |
|
35 | online example: https://tabs.react-component.now.sh/
|
36 |
|
37 | ## install
|
38 |
|
39 | [![rc-tabs](https://nodei.co/npm/rc-tabs.png)](https://npmjs.org/package/rc-tabs)
|
40 |
|
41 | ## Feature
|
42 |
|
43 | ### Keyboard
|
44 |
|
45 | - left and up: tabs to previous tab
|
46 | - right and down: tabs to next tab
|
47 |
|
48 | ## Usage
|
49 |
|
50 | ```js
|
51 | import Tabs, { TabPane } from 'rc-tabs';
|
52 |
|
53 | var callback = function(key) {};
|
54 |
|
55 | React.render(
|
56 | <Tabs defaultActiveKey="2" onChange={callback}>
|
57 | <TabPane tab="tab 1" key="1">
|
58 | first
|
59 | </TabPane>
|
60 | <TabPane tab="tab 2" key="2">
|
61 | second
|
62 | </TabPane>
|
63 | <TabPane tab="tab 3" key="3">
|
64 | third
|
65 | </TabPane>
|
66 | </Tabs>,
|
67 | document.getElementById('t2'),
|
68 | );
|
69 | ```
|
70 |
|
71 | ## API
|
72 |
|
73 | ### Tabs
|
74 |
|
75 | | name | type | default | description |
|
76 | | --- | --- | --- | --- |
|
77 | | activeKey | string | - | current active tabPanel's key |
|
78 | | animated | boolean \| { inkBar: boolean, tabPane: boolean } | `{ inkBar: true, tabPane: false }` | config animation |
|
79 | | defaultActiveKey | string | - | initial active tabPanel's key if activeKey is absent |
|
80 | | destroyInactiveTabPane | boolean | false | whether destroy inactive TabPane when change tab |
|
81 | | direction | `'ltr' | 'rlt'` | `'ltr'` | Layout direction of tabs component |
|
82 | | editable | { onEdit(type: 'add' | 'remove', info: { key, event }), showAdd: boolean, removeIcon: ReactNode, addIcon: ReactNode } | - | config tab editable |
|
83 | | locale | { dropdownAriaLabel: string, removeAriaLabel: string, addAriaLabel: string } | - | Accessibility locale help text |
|
84 | | moreIcon | ReactNode | - | collapse icon |
|
85 | | tabBarGutter | number | 0 | config tab bar gutter |
|
86 | | tabBarPosition | `'left' | 'right' | 'top' | 'bottom'` | `'top'` | tab nav 's position |
|
87 | | tabBarStyle | style | - | tab nav style |
|
88 | | tabBarExtraContent | ReactNode \| `{ left: ReactNode, right: ReactNode }` | - | config extra content |
|
89 | | renderTabBar | (props, TabBarComponent) => ReactElement | - | How to render tab bar |
|
90 | | prefixCls | string | `'rc-tabs'` | prefix class name, use to custom style |
|
91 | | onChange | (key) => void | - | called when tabPanel is changed |
|
92 | | onTabClick | (key) => void | - | called when tab click |
|
93 | | onTabScroll | ({ direction }) => void | - | called when tab scroll |
|
94 |
|
95 | ### TabPane
|
96 |
|
97 | | name | type | default | description |
|
98 | | --- | --- | --- | --- |
|
99 | | key | string | - | corresponding to activeKey, should be unique |
|
100 | | forceRender | boolean | false | forced render of content in tabs, not lazy render after clicking on tabs |
|
101 | | tab | ReactNode | - | current tab's title corresponding to current tabPane |
|
102 | | closeIcon | ReactNode | - | Config close icon |
|
103 |
|
104 | ## Development
|
105 |
|
106 | ```
|
107 | npm install
|
108 | npm start
|
109 | ```
|
110 |
|
111 | ## Test Case
|
112 |
|
113 | ```
|
114 | npm test
|
115 | npm run chrome-test
|
116 | ```
|
117 |
|
118 | ## Coverage
|
119 |
|
120 | ```
|
121 | npm run coverage
|
122 | ```
|
123 |
|
124 | open coverage/ dir
|
125 |
|
126 | ## License
|
127 |
|
128 | rc-tabs is released under the MIT license.
|