1 | # rmc-tabs
|
2 | ---
|
3 |
|
4 | React Mobile Tabs Component (web & react-native), inspired by [react-native-scrollable-tab-view](https://github.com/skv-headless/react-native-scrollable-tab-view)
|
5 |
|
6 | [![NPM version][npm-image]][npm-url]
|
7 | ![react](https://img.shields.io/badge/react-%3E%3D_15.2.0-green.svg)
|
8 | [![build status][travis-image]][travis-url]
|
9 | [![Test coverage][coveralls-image]][coveralls-url]
|
10 | [![gemnasium deps][gemnasium-image]][gemnasium-url]
|
11 | [![npm download][download-image]][download-url]
|
12 |
|
13 | [npm-image]: http://img.shields.io/npm/v/rmc-tabs.svg?style=flat-square
|
14 | [npm-url]: http://npmjs.org/package/rmc-tabs
|
15 | [travis-image]: https://img.shields.io/travis/react-component/m-tabs.svg?style=flat-square
|
16 | [travis-url]: https://travis-ci.org/react-component/m-tabs
|
17 | [coveralls-image]: https://img.shields.io/coveralls/react-component/m-tabs.svg?style=flat-square
|
18 | [coveralls-url]: https://coveralls.io/r/react-component/m-tabs?branch=master
|
19 | [gemnasium-image]: http://img.shields.io/gemnasium/react-component/m-tabs.svg?style=flat-square
|
20 | [gemnasium-url]: https://gemnasium.com/react-component/m-tabs
|
21 | [node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
|
22 | [node-url]: http://nodejs.org/download/
|
23 | [download-image]: https://img.shields.io/npm/dm/rmc-tabs.svg?style=flat-square
|
24 | [download-url]: https://npmjs.org/package/rmc-tabs
|
25 |
|
26 | ## Screenshots
|
27 |
|
28 | ## Development
|
29 |
|
30 | ```
|
31 | npm i
|
32 | npm start
|
33 | ```
|
34 |
|
35 | ## Example
|
36 |
|
37 | http://localhost:8000/examples/
|
38 |
|
39 | online example: http://react-component.github.io/m-tabs/
|
40 |
|
41 |
|
42 | ## install
|
43 |
|
44 | [![rmc-tabs](https://nodei.co/npm/rmc-tabs.png)](https://npmjs.org/package/rmc-tabs)
|
45 |
|
46 |
|
47 | # docs
|
48 |
|
49 | ## Usage
|
50 | ```jsx
|
51 | // normal
|
52 | <Tabs tabs={[
|
53 | { key: 't1', title: 't1' },
|
54 | { key: 't2', title: 't2' },
|
55 | { key: 't3', title: 't3' },
|
56 | { key: 't4', title: 't4' },
|
57 | { key: 't5', title: 't5' },
|
58 | ]} initalPage={'t2'}
|
59 | >
|
60 | <div key="t1"><p>content1</p></div>
|
61 | <div key="t2"><p>content2</p></div>
|
62 | <div key="t3"><p>content3</p></div>
|
63 | <div key="t4"><p>content4</p></div>
|
64 | <div key="t5"><p>content5</p></div>
|
65 | </Tabs>
|
66 |
|
67 | // single content
|
68 | <Tabs tabs={[
|
69 | { title: 't1' },
|
70 | { title: 't2' },
|
71 | { title: 't3' },
|
72 | { title: 't4' },
|
73 | { title: 't5' },
|
74 | ]} onChange={(tab, index) => {
|
75 | this.setState({
|
76 | scData: JSON.stringify({ index: index + Math.random(), tab })
|
77 | });
|
78 | }}
|
79 | >
|
80 | <div>
|
81 | <p>single content</p>
|
82 | <p>{this.state.scData}</p>
|
83 | </div>
|
84 | </Tabs>
|
85 |
|
86 | // single content function
|
87 | <Tabs tabs={[
|
88 | { title: 't1' },
|
89 | { title: 't2' },
|
90 | { title: 't3' },
|
91 | { title: 't4' },
|
92 | { title: 't5' },
|
93 | ]}
|
94 | >
|
95 | {
|
96 | (index, tab) =>
|
97 | <div>
|
98 | <p>single content</p>
|
99 | <p>{JSON.stringify({ index: index + Math.random(), tab })}</p>
|
100 | </div>
|
101 | }
|
102 | </Tabs>
|
103 |
|
104 | // renderTabBar e.g: Sticky, react-sticky
|
105 | ./examples/sticky.tsx
|
106 | ```
|
107 |
|
108 | ## react-native
|
109 |
|
110 | ```
|
111 | npm run rn-init
|
112 | npm run watch-tsc
|
113 | react-native start
|
114 | react-native run-ios
|
115 | ```
|
116 |
|
117 | ## API
|
118 |
|
119 | ### Tabs:
|
120 | 属性 | 说明 | 类型 | 默认值 | 必选
|
121 | ----|-----|------|------|------
|
122 | tabs | tabs data | Models.TabData[] | | true
|
123 | tabBarPosition | TabBar's position | 'top' \| 'bottom' \| 'left' \| 'right' | top | false
|
124 | renderTabBar | render for TabBar | ((props: TabBarPropsType) => React.ReactNode) \| false | | false
|
125 | initialPage | initial Tab, index or key | number \| string | | false
|
126 | page | current tab, index or key | number \| string | | false
|
127 | swipeable | whether to switch tabs with swipe gestrue in the content | boolean | true | false
|
128 | useOnPan (`web only`) | use scroll follow pan | boolean | true | false
|
129 | prerenderingSiblingsNumber | pre-render nearby # sibling, Infinity: render all the siblings, 0: render current page | number | 1 | false
|
130 | animated | whether to change tabs with animation | boolean | true | false
|
131 | onChange | callback when tab is switched | (tab: Models.TabData, index: number) => void | | false
|
132 | onTabClick | on tab click | (tab: Models.TabData, index: number) => void | | false
|
133 | destroyInactiveTab | destroy inactive tab | boolean | false | false
|
134 | distanceToChangeTab | distance to change tab, width ratio | number | 0.3 | false
|
135 | usePaged | use paged | boolean | true | false
|
136 | tabDirection | tab paging direction | 'horizontal' \| 'vertical' | horizontal | false
|
137 | tabBarUnderlineStyle | tabBar underline style | React.CSSProperties \| any | | false
|
138 | tabBarBackgroundColor | tabBar background color | string | | false
|
139 | tabBarActiveTextColor | tabBar active text color | string | | false
|
140 | tabBarInactiveTextColor | tabBar inactive text color | string | | false
|
141 | tabBarTextStyle | tabBar text style | React.CSSProperties \| any | | false
|
142 |
|
143 | ### TabBarPropsType (Common):
|
144 | 属性 | 说明 | 类型 | 默认值 | 必选
|
145 | ----|-----|------|------|------
|
146 | goToTab | call this function to switch tab | (index: number) => void | | true
|
147 | tabs | tabs data | Models.TabData[] | | true
|
148 | activeTab | current active tab | number | | true
|
149 | animated | use animate | boolean | true | true
|
150 | renderTab | render the tab of tabbar | (tab: Models.TabData) => React.ReactNode | | false
|
151 | page | page size of tabbar's tab | number | 5 | false
|
152 | onTabClick | on tab click | (tab: Models.TabData, index: number) => void | | false
|
153 | tabBarPosition | tabBar's position defualt: top | 'top' \| 'bottom' \| 'left' \| 'right' | | false
|
154 | tabBarUnderlineStyle | tabBar underline style | React.CSSProperties \| any | | false
|
155 | tabBarBackgroundColor | tabBar background color | string | | false
|
156 | tabBarActiveTextColor | tabBar active text color | string | | false
|
157 | tabBarInactiveTextColor | tabBar inactive text color | string | | false
|
158 | tabBarTextStyle | tabBar text style | React.CSSProperties \| any | | false
|
159 |
|
160 | ## Test Case
|
161 |
|
162 | ```
|
163 | npm test
|
164 | npm run chrome-test
|
165 | ```
|
166 |
|
167 | ## Coverage
|
168 |
|
169 | ```
|
170 | npm run coverage
|
171 | ```
|
172 |
|
173 | open coverage/ dir
|
174 |
|
175 | ## License
|
176 |
|
177 | rmc-tabs is released under the MIT license.
|