1 | # bee-tabs
|
2 | [![npm version](https://img.shields.io/npm/v/bee-tabs.svg)](https://www.npmjs.com/package/bee-tabs)
|
3 | [![Build Status](https://travis-ci.org/tinper-bee/bee-tabs.svg?branch=master)](https://travis-ci.org/tinper-bee/bee-tabs)[![devDependency Status](https://img.shields.io/david/dev/tinper-bee/bee-tabs.svg)](https://david-dm.org/tinper-bee/bee-tabs#info=devDependencies)
|
4 |
|
5 |
|
6 | react bee-tabs component for tinper-bee
|
7 |
|
8 |
|
9 | ## 使用方法
|
10 |
|
11 | ```js
|
12 | <Tabs navtype="turn" contenttype="moveleft" defaultActiveKey="2">
|
13 | <TabPanel tab="Tab 1" key="1">测试测试 1</TabPanel>
|
14 | <TabPanel tab="Tab 2" key="2">Content of Tab Pane 2</TabPanel>
|
15 | <TabPanel tab="Tab 3" key="3">测试测试 3</TabPanel>
|
16 | <TabPanel tab="Tab 4" key="4">Content of Tab Pane 4</TabPanel>
|
17 | </Tabs>
|
18 | ```
|
19 |
|
20 |
|
21 |
|
22 | ## API
|
23 |
|
24 | ### Tabs
|
25 |
|
26 | #### props:
|
27 |
|
28 | <table class="table table-bordered table-striped">
|
29 | <thead>
|
30 | <tr>
|
31 | <th style="width: 100px;">name</th>
|
32 | <th style="width: 50px;">type</th>
|
33 | <th>default</th>
|
34 | <th>description</th>
|
35 | </tr>
|
36 | </thead>
|
37 | <tbody>
|
38 | <tr>
|
39 | <td>activeKey</td>
|
40 | <td>String</td>
|
41 | <th></th>
|
42 | <td>current active tabPanel's key</td>
|
43 | </tr>
|
44 | <tr>
|
45 | <td>tabBarPosition</td>
|
46 | <td>String</td>
|
47 | <th></th>
|
48 | <td>tab nav 's position. one of ['left','right','top','bottom']</td>
|
49 | </tr>
|
50 | <tr>
|
51 | <td>defaultActiveKey</td>
|
52 | <td>String</td>
|
53 | <th>first active tabPanel's key</th>
|
54 | <td>initial active tabPanel's key if activeKey is absent</td>
|
55 | </tr>
|
56 | <tr>
|
57 | <td>renderTabBar</td>
|
58 | <td>():React.Node</td>
|
59 | <th></th>
|
60 | <td>How to render tab bar</td>
|
61 | </tr>
|
62 | <tr>
|
63 | <td>renderTabContent</td>
|
64 | <td>():React.Node</td>
|
65 | <th></th>
|
66 | <td>How to render tab content</td>
|
67 | </tr>
|
68 | <tr>
|
69 | <td>onChange</td>
|
70 | <td>(key: string): void</td>
|
71 | <th></th>
|
72 | <td>called when tabPanel is changed</td>
|
73 | </tr>
|
74 | <tr>
|
75 | <td>destroyInactiveTabPane</td>
|
76 | <td>Boolean</td>
|
77 | <th>false</th>
|
78 | <td>whether destroy inactive tabpane when change tab</td>
|
79 | </tr>
|
80 | <tr>
|
81 | <td>prefixCls</td>
|
82 | <td>String</td>
|
83 | <th>rc-tabs</th>
|
84 | <td>prefix class name, use to custom style</td>
|
85 | </tr>
|
86 | </tbody>
|
87 | </table>
|
88 |
|
89 | ### TabPane
|
90 |
|
91 | #### props:
|
92 |
|
93 | <table class="table table-bordered table-striped">
|
94 | <thead>
|
95 | <tr>
|
96 | <th style="width: 100px;">name</th>
|
97 | <th style="width: 50px;">type</th>
|
98 | <th>default</th>
|
99 | <th>description</th>
|
100 | </tr>
|
101 | </thead>
|
102 | <tbody>
|
103 | <tr>
|
104 | <td>key</td>
|
105 | <td>Object</td>
|
106 | <th></th>
|
107 | <td>corresponding to activeKey</td>
|
108 | </tr>
|
109 | <tr>
|
110 | <td>style</td>
|
111 | <td>Object</td>
|
112 | <th></th>
|
113 | <td></td>
|
114 | </tr>
|
115 | <tr>
|
116 | <td>placeholder</td>
|
117 | <td>React.Node</td>
|
118 | <th></th>
|
119 | <td>lazyrender children</td>
|
120 | </tr>
|
121 | <tr>
|
122 | <td>tab</td>
|
123 | <td>React.Node</td>
|
124 | <th></th>
|
125 | <td>current tab's title corresponding to current tabPane</td>
|
126 | </tr>
|
127 | </tbody>
|
128 | </table>
|
129 |
|
130 | ### src/TabBar
|
131 |
|
132 | <table class="table table-bordered table-striped">
|
133 | <thead>
|
134 | <tr>
|
135 | <th style="width: 100px;">name</th>
|
136 | <th style="width: 50px;">type</th>
|
137 | <th>default</th>
|
138 | <th>description</th>
|
139 | </tr>
|
140 | </thead>
|
141 | <tbody>
|
142 | <tr>
|
143 | <td>onTabClick</td>
|
144 | <td>(key: string): void</td>
|
145 | <th></th>
|
146 | <td>callback when tab clicked</td>
|
147 | </tr>
|
148 | <tr>
|
149 | <td>style</td>
|
150 | <td></td>
|
151 | <th></th>
|
152 | <td>bar style</td>
|
153 | </tr>
|
154 | <tr>
|
155 | <td>extraContent</td>
|
156 | <td>React Node</td>
|
157 | <th></th>
|
158 | <td>extra content placed one the right of tab bar</td>
|
159 | </tr>
|
160 | </tbody>
|
161 | </table>
|
162 |
|
163 | ### src/InkTabBar
|
164 |
|
165 | tab bar with ink indicator, in addition to tab bar props, extra props:
|
166 |
|
167 | <table class="table table-bordered table-striped">
|
168 | <thead>
|
169 | <tr>
|
170 | <th style="width: 100px;">name</th>
|
171 | <th style="width: 50px;">type</th>
|
172 | <th>default</th>
|
173 | <th>description</th>
|
174 | </tr>
|
175 | </thead>
|
176 | <tbody>
|
177 | <tr>
|
178 | <td>styles</td>
|
179 | <td>{ inkBar }</td>
|
180 | <th></th>
|
181 | <td>can set inkBar style</td>
|
182 | </tr>
|
183 | </tbody>
|
184 | </table>
|
185 |
|
186 | ### src/ScrollableTabBar
|
187 |
|
188 | scrollable tab bar, in addition to tab bar props, extra props:
|
189 |
|
190 | <table class="table table-bordered table-striped">
|
191 | <thead>
|
192 | <tr>
|
193 | <th style="width: 100px;">name</th>
|
194 | <th style="width: 50px;">type</th>
|
195 | <th>default</th>
|
196 | <th>description</th>
|
197 | </tr>
|
198 | </thead>
|
199 | <tbody>
|
200 | <tr>
|
201 | <td>onPrevClick</td>
|
202 | <td>(e: Event): void</td>
|
203 | <th></th>
|
204 | <td>callback when prev button is clicked</td>
|
205 | </tr>
|
206 | <tr>
|
207 | <td>onNextClick</td>
|
208 | <td>(e: Event): void</td>
|
209 | <th></th>
|
210 | <td>callback when next button is clicked</td>
|
211 | </tr>
|
212 | </tbody>
|
213 | </table>
|
214 |
|
215 | ### src/ScrollableInkTabBar
|
216 |
|
217 | scrollable tab bar with ink indicator, same with tab bar and ink bar and scrollable bar props.
|
218 |
|
219 | ### src/SwipeableInkTabBar (Use for Mobile)
|
220 |
|
221 | swipeable tab bar with ink indicator, same with tab bar/ink bar props, and below is the additional props.
|
222 |
|
223 | <table class="table table-bordered table-striped">
|
224 | <thead>
|
225 | <tr>
|
226 | <th style="width: 100px;">name</th>
|
227 | <th style="width: 50px;">type</th>
|
228 | <th>default</th>
|
229 | <th>description</th>
|
230 | </tr>
|
231 | </thead>
|
232 | <tbody>
|
233 | <tr>
|
234 | <td>pageSize</td>
|
235 | <td>number</td>
|
236 | <th>5</th>
|
237 | <td>show how many tabs at one page</td>
|
238 | </tr>
|
239 | <tr>
|
240 | <td>speed</td>
|
241 | <td>number</td>
|
242 | <th>5</th>
|
243 | <td>swipe speed, 1 to 10, more bigger more faster</td>
|
244 | </tr>
|
245 | <tr>
|
246 | <td>hammerOptions</td>
|
247 | <td>Object</td>
|
248 | <td></td>
|
249 | <td>options for react-hammerjs</td>
|
250 | </tr>
|
251 | </tbody>
|
252 | </table>
|
253 |
|
254 | ### src/TabContent
|
255 |
|
256 | <table class="table table-bordered table-striped">
|
257 | <thead>
|
258 | <tr>
|
259 | <th style="width: 100px;">name</th>
|
260 | <th style="width: 50px;">type</th>
|
261 | <th>default</th>
|
262 | <th>description</th>
|
263 | </tr>
|
264 | </thead>
|
265 | <tbody>
|
266 | <tr>
|
267 | <td>style</td>
|
268 | <td>Object</td>
|
269 | <td></td>
|
270 | <td>tab content style</td>
|
271 | </tr>
|
272 | <tr>
|
273 | <td>animated</td>
|
274 | <td>Boolean</td>
|
275 | <td>true</td>
|
276 | <td>whether tabpane change with animation</td>
|
277 | </tr>
|
278 | <tr>
|
279 | <td>animatedWithMargin</td>
|
280 | <td>Boolean</td>
|
281 | <td>false</td>
|
282 | <td>whether animate tabpane with css margin</td>
|
283 | </tr>
|
284 | <tr>
|
285 | <td>forceRender</td>
|
286 | <td>Boolean</td>
|
287 | <td>false</td>
|
288 | <td>forced render of content in tabs, not lazy render after clicking on tabs</td>
|
289 | </tr>
|
290 | </tbody>
|
291 | </table>
|
292 |
|
293 | ### src/SwipeableTabContent
|
294 |
|
295 | swipeable tab panes, in addition to lib/TabContent props, extra props:
|
296 |
|
297 | <table class="table table-bordered table-striped">
|
298 | <thead>
|
299 | <tr>
|
300 | <th style="width: 100px;">name</th>
|
301 | <th style="width: 50px;">type</th>
|
302 | <th>default</th>
|
303 | <th>description</th>
|
304 | </tr>
|
305 | </thead>
|
306 | <tbody>
|
307 | <tr>
|
308 | <td>hammerOptions</td>
|
309 | <td>Object</td>
|
310 | <td></td>
|
311 | <td>options for react-hammerjs</td>
|
312 | </tr>
|
313 | </tbody>
|
314 | </table>
|
315 |
|
316 |
|
317 | #### 开发调试
|
318 |
|
319 | ```sh
|
320 | $ npm install -g bee-tools
|
321 | $ git clone https://github.com/tinper-bee/bee-tabs
|
322 | $ cd bee-tabs
|
323 | $ npm install
|
324 | $ npm run dev
|
325 | ```
|
326 |
|
327 | ## TODOS
|
328 |
|
329 | - [x] [css样式层级问题]
|
330 | - [x] [动态计算样式]
|
331 | - [x] [autoprefix] 产出工具集成
|
332 | - [x] [测试用例]
|