• Stars
    star
    139
  • Rank 254,841 (Top 6 %)
  • Language
    TypeScript
  • Created over 6 years ago
  • Updated almost 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

React Mobile Tabs Component (web & react-native)

rmc-tabs


React Mobile Tabs Component (web & react-native), inspired by react-native-scrollable-tab-view

NPM version react build status Test coverage gemnasium deps npm download

Screenshots

Development

npm i
npm start

Example

http://localhost:8000/examples/

online example: http://react-component.github.io/m-tabs/

install

rmc-tabs

docs

Usage

// normal
<Tabs tabs={[
    { key: 't1', title: 't1' },
    { key: 't2', title: 't2' },
    { key: 't3', title: 't3' },
    { key: 't4', title: 't4' },
    { key: 't5', title: 't5' },
]} initalPage={'t2'}
>
  <div key="t1"><p>content1</p></div>
  <div key="t2"><p>content2</p></div>
  <div key="t3"><p>content3</p></div>
  <div key="t4"><p>content4</p></div>
  <div key="t5"><p>content5</p></div>
</Tabs>

// single content
<Tabs tabs={[
    { title: 't1' },
    { title: 't2' },
    { title: 't3' },
    { title: 't4' },
    { title: 't5' },
]} onChange={(tab, index) => {
    this.setState({
        scData: JSON.stringify({ index: index + Math.random(), tab })
    });
}}
>
    <div>
        <p>single content</p>
        <p>{this.state.scData}</p>
    </div>
</Tabs>

// single content function
<Tabs tabs={[
    { title: 't1' },
    { title: 't2' },
    { title: 't3' },
    { title: 't4' },
    { title: 't5' },
]}
>
    {
        (index, tab) =>
            <div>
                <p>single content</p>
                <p>{JSON.stringify({ index: index + Math.random(), tab })}</p>
            </div>
    }
</Tabs>

// renderTabBar e.g: Sticky, react-sticky
./examples/sticky.tsx

react-native

npm run rn-init
npm run watch-tsc
react-native start
react-native run-ios

API

Tabs:

属性 说明 类型 默认值 必选
tabs tabs data Models.TabData[] true
tabBarPosition TabBar's position 'top' | 'bottom' | 'left' | 'right' top false
renderTabBar render for TabBar ((props: TabBarPropsType) => React.ReactNode) | false false
initialPage initial Tab, index or key number | string false
page current tab, index or key number | string false
swipeable whether to switch tabs with swipe gestrue in the content boolean true false
useOnPan (web only) use scroll follow pan boolean true false
prerenderingSiblingsNumber pre-render nearby # sibling, Infinity: render all the siblings, 0: render current page number 1 false
animated whether to change tabs with animation boolean true false
onChange callback when tab is switched (tab: Models.TabData, index: number) => void false
onTabClick on tab click (tab: Models.TabData, index: number) => void false
destroyInactiveTab destroy inactive tab boolean false false
distanceToChangeTab distance to change tab, width ratio number 0.3 false
usePaged use paged boolean true false
tabDirection tab paging direction 'horizontal' | 'vertical' horizontal false
tabBarUnderlineStyle tabBar underline style React.CSSProperties | any false
tabBarBackgroundColor tabBar background color string false
tabBarActiveTextColor tabBar active text color string false
tabBarInactiveTextColor tabBar inactive text color string false
tabBarTextStyle tabBar text style React.CSSProperties | any false

TabBarPropsType (Common):

属性 说明 类型 默认值 必选
goToTab call this function to switch tab (index: number) => void true
tabs tabs data Models.TabData[] true
activeTab current active tab number true
animated use animate boolean true true
renderTab render the tab of tabbar (tab: Models.TabData) => React.ReactNode false
page page size of tabbar's tab number 5 false
onTabClick on tab click (tab: Models.TabData, index: number) => void false
tabBarPosition tabBar's position defualt: top 'top' | 'bottom' | 'left' | 'right' false
tabBarUnderlineStyle tabBar underline style React.CSSProperties | any false
tabBarBackgroundColor tabBar background color string false
tabBarActiveTextColor tabBar active text color string false
tabBarInactiveTextColor tabBar inactive text color string false
tabBarTextStyle tabBar text style React.CSSProperties | any false

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

rmc-tabs is released under the MIT license.

More Repositories

1

slider

React Slider
JavaScript
2,962
star
2

form

React High Order Form Component(web & react-native)
JavaScript
1,799
star
3

calendar

React Calendar
JavaScript
1,681
star
4

table

React Table
TypeScript
1,183
star
5

tree

React Tree
TypeScript
1,113
star
6

field-form

⚡️ React Performance First Form Component
TypeScript
914
star
7

tooltip

React Tooltip
TypeScript
896
star
8

select

React Select
TypeScript
854
star
9

upload

React Upload
TypeScript
766
star
10

progress

React Progress Bar
TypeScript
678
star
11

animate

anim react element easily
JavaScript
675
star
12

menu

React Menu
TypeScript
655
star
13

virtual-list

🧾 React Virtual List Component which worked with animation
TypeScript
645
star
14

pagination

React Pagination
TypeScript
629
star
15

util

Common Utils For React Component
TypeScript
604
star
16

tabs

React Tabs
TypeScript
540
star
17

queue-anim

Animate React Component in queue
TypeScript
474
star
18

time-picker

React TimePicker
JavaScript
463
star
19

dialog

React Dialog
TypeScript
424
star
20

color-picker

React ColorPicker
TypeScript
419
star
21

m-date-picker

React Mobile DatePicker(web & react-native)
TypeScript
400
star
22

react-component.github.io

docs and site of react-component
HTML
378
star
23

drawer

React Drawer
TypeScript
372
star
24

tween-one

Animate One React Element
TypeScript
370
star
25

notification

React Notification
TypeScript
364
star
26

trigger

Abstract React Trigger
TypeScript
345
star
27

collapse

React Collapse / Accordion
TypeScript
319
star
28

steps

React Steps
TypeScript
311
star
29

scroll-anim

Animate Scroll React Component
JavaScript
301
star
30

input-number

React Input Number
TypeScript
296
star
31

tree-select

React Tree Select
TypeScript
272
star
32

picker

📅 All Date Pickers you need.
TypeScript
253
star
33

m-picker

React Mobile Picker(web & react-native)
TypeScript
246
star
34

swipeout

React Swipeout(web & react-native)
TypeScript
213
star
35

rc-tools

Tools For React Component
JavaScript
205
star
36

cascader

cascade select in one box
TypeScript
198
star
37

switch

React Switch
JavaScript
187
star
38

image

🖼 React Image Component
TypeScript
179
star
39

banner-anim

Animate Banner React Component
JavaScript
170
star
40

m-pull-to-refresh

React Mobile Pull To Refresh
TypeScript
166
star
41

dropdown

React Dropdown
TypeScript
163
star
42

texty

React Text Animate
TypeScript
154
star
43

resize-observer

👓 Resize observer for React
JavaScript
153
star
44

checkbox

React Checkbox
TypeScript
130
star
45

motion

⛷ CSS Animation for React
TypeScript
120
star
46

gesture

Support gesture for react component.
TypeScript
103
star
47

rate

React Rate
JavaScript
91
star
48

form-validation

This project is deprecated, you can try https://github.com/react-component/form
JavaScript
86
star
49

m-list-view

ReactNative ListView Web Port
JavaScript
85
star
50

footer

🐾 Pretty Footer react component used in ant.design
JavaScript
83
star
51

align

Abstract React Align
TypeScript
81
star
52

mentions

React Mentions
TypeScript
67
star
53

rn-packager

Standalone ReactNative Packager
JavaScript
66
star
54

generator-rc

yeoman generator for react component
JavaScript
58
star
55

editor-core

a draft-js based editor
TypeScript
56
star
56

m-drawer

React Drawer
JavaScript
54
star
57

cropping

image cropping
TypeScript
54
star
58

editor-mention

React Mention
JavaScript
53
star
59

m-cascader

React Mobile Cascader Component(web and react-native)
TypeScript
51
star
60

m-dialog

React Mobile Dialog(web & react-native)
TypeScript
45
star
61

spider

React Tree Diagrams
JavaScript
44
star
62

overflow

📦 Auto collapse box util component
TypeScript
42
star
63

css-transition-group

standalone CSSTransitionGroup for React.addons.CSSTransitionGroup
JavaScript
38
star
64

m-calendar

React Mobile Calendar Component (web)
TypeScript
36
star
65

m-feedback

:active pseudo-class with react for mobile
TypeScript
36
star
66

tour

TypeScript
30
star
67

input

React Input Component
TypeScript
29
star
68

pager

React Pager
JavaScript
26
star
69

m-notification

JavaScript
23
star
70

dropzone

React Dropzone
JavaScript
23
star
71

textarea

React Textarea
TypeScript
22
star
72

radio

[DEPRECATED] React Radio
CSS
19
star
73

m-input-number

input-number mobile ui component for react (web & react-native)
TypeScript
17
star
74

portal

TypeScript
16
star
75

touchable

React Touchable Component
TypeScript
16
star
76

rc-server

This project is deprecated, use rc-tools run server
JavaScript
15
star
77

gulp-jsx2example

Compile JSX file to HTML (react demo)
JavaScript
13
star
78

cascade-select

React CascadeSelect
JavaScript
13
star
79

icon-anim

Icon cutover or morph animate React Element
JavaScript
12
star
80

m-select-list

React Mobile Select List Component
JavaScript
12
star
81

segmented

React Segmented Controls
TypeScript
12
star
82

rc-test

test react component
JavaScript
11
star
83

mobile

ant design mobile components
TypeScript
10
star
84

m-tooltip

React Tooltip for mobile
TypeScript
8
star
85

context

TypeScript
7
star
86

rn-tools

tools for react-native
JavaScript
7
star
87

m-trigger

React Trigger Component for mobile
JavaScript
6
star
88

rn-core

Standalone ReactNative Framework
Objective-C
6
star
89

record

Record audio from microphone
JavaScript
5
star
90

.github

5
star
91

RNPlayground

react-native playground container
Objective-C
5
star
92

mutate-observer

TypeScript
5
star
93

editor-plugin-emoji

HTML
4
star
94

m-steps

React Steps for mobile
CSS
4
star
95

editor-plugin-basic-style

TypeScript
3
star
96

mini-decimal

TypeScript
3
star
97

editor-utils

editor utilities
TypeScript
2
star
98

father-plugin

father plugin for all react-component project
TypeScript
1
star
99

editor-plugin-image

TypeScript
1
star