Skip to content
React Mobile Tabs Component (web & react-native)
TypeScript CSS JavaScript
Branch: master
Clone or download
Latest commit 6ccb098 Jan 24, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode feat: support react-native. Sep 5, 2017
assets fix: sometimes swipe is not correct. Nov 10, 2017
examples fix RN doc, up deps May 25, 2018
src fix: goToTab error (#44) Jan 24, 2019
tests feat: aria 无障碍优化 Jul 11, 2018
typings init Aug 30, 2017
.editorconfig init Aug 30, 2017
.gitignore feat: support react-native. Sep 5, 2017
.stylelintrc add features. add test. Aug 31, 2017
.travis.yml init Aug 30, 2017
HISTORY.md bump version Jan 24, 2019
README.md fix doc May 25, 2018
index.android.js code format. Sep 6, 2017
index.ios.js code format. Sep 6, 2017
package.json bump version Jan 24, 2019
tsconfig.json feat: support react-native. Sep 5, 2017
tslint.json init Aug 30, 2017

README.md

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.

You can’t perform that action at this time.