Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/react-component/m-tabs
React Mobile Tabs Component (web & react-native)
https://github.com/react-component/m-tabs
Last synced: 22 days ago
JSON representation
React Mobile Tabs Component (web & react-native)
- Host: GitHub
- URL: https://github.com/react-component/m-tabs
- Owner: react-component
- Created: 2017-08-30T10:01:05.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-08-10T11:10:25.000Z (over 3 years ago)
- Last Synced: 2024-10-04T17:36:04.620Z (2 months ago)
- Language: TypeScript
- Homepage: http://react-component.github.io/m-tabs/
- Size: 1.61 MB
- Stars: 143
- Watchers: 5
- Forks: 47
- Open Issues: 34
-
Metadata Files:
- Readme: README.md
- Changelog: HISTORY.md
Awesome Lists containing this project
- awesome-star-libs - react-component / m-tabs
README
# rmc-tabs
---
React Mobile Tabs Component (web & react-native), inspired by [react-native-scrollable-tab-view](https://github.com/skv-headless/react-native-scrollable-tab-view)
[![NPM version][npm-image]][npm-url]
[![build status][travis-image]][travis-url]
[![Test coverage][coveralls-image]][coveralls-url]
[![gemnasium deps][gemnasium-image]][gemnasium-url]
[![npm download][download-image]][download-url]
[npm-image]: http://img.shields.io/npm/v/rmc-tabs.svg?style=flat-square
[npm-url]: http://npmjs.org/package/rmc-tabs
[travis-image]: https://img.shields.io/travis/react-component/m-tabs.svg?style=flat-square
[travis-url]: https://travis-ci.org/react-component/m-tabs
[coveralls-image]: https://img.shields.io/coveralls/react-component/m-tabs.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/react-component/m-tabs?branch=master
[gemnasium-image]: http://img.shields.io/gemnasium/react-component/m-tabs.svg?style=flat-square
[gemnasium-url]: https://gemnasium.com/react-component/m-tabs
[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
[node-url]: http://nodejs.org/download/
[download-image]: https://img.shields.io/npm/dm/rmc-tabs.svg?style=flat-square
[download-url]: https://npmjs.org/package/rmc-tabs
## Screenshots
## Development
```
npm i
npm start
```
## Example
http://localhost:8000/examples/
online example: http://react-component.github.io/m-tabs/
## install
[](https://npmjs.org/package/rmc-tabs)
# docs
## Usage
```jsx
// normal
content1
content2
content3
content4
content5
// single content
{
this.setState({
scData: JSON.stringify({ index: index + Math.random(), tab })
});
}}
>
single content
{this.state.scData}
// single content function
{
(index, tab) =>
single content
{JSON.stringify({ index: index + Math.random(), tab })}
}
// 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.