Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including rmc-tabs with all npm packages installed. Try it out:

var rmcTabs = require("rmc-tabs")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

rmc-tabs v1.2.29

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:

属性说明类型默认值必选
tabstabs dataModels.TabData[]true
tabBarPositionTabBar's position'top' | 'bottom' | 'left' | 'right'topfalse
renderTabBarrender for TabBar((props: TabBarPropsType) => React.ReactNode) | falsefalse
initialPageinitial Tab, index or keynumber | stringfalse
pagecurrent tab, index or keynumber | stringfalse
swipeablewhether to switch tabs with swipe gestrue in the contentbooleantruefalse
useOnPan (web only)use scroll follow panbooleantruefalse
prerenderingSiblingsNumberpre-render nearby # sibling, Infinity: render all the siblings, 0: render current pagenumber1false
animatedwhether to change tabs with animationbooleantruefalse
onChangecallback when tab is switched(tab: Models.TabData, index: number) => voidfalse
onTabClickon tab click(tab: Models.TabData, index: number) => voidfalse
destroyInactiveTabdestroy inactive tabbooleanfalsefalse
distanceToChangeTabdistance to change tab, width rationumber0.3false
usePageduse pagedbooleantruefalse
tabDirectiontab paging direction'horizontal' | 'vertical'horizontalfalse
tabBarUnderlineStyletabBar underline styleReact.CSSProperties | anyfalse
tabBarBackgroundColortabBar background colorstringfalse
tabBarActiveTextColortabBar active text colorstringfalse
tabBarInactiveTextColortabBar inactive text colorstringfalse
tabBarTextStyletabBar text styleReact.CSSProperties | anyfalse

TabBarPropsType (Common):

属性说明类型默认值必选
goToTabcall this function to switch tab(index: number) => voidtrue
tabstabs dataModels.TabData[]true
activeTabcurrent active tabnumbertrue
animateduse animatebooleantruetrue
renderTabrender the tab of tabbar(tab: Models.TabData) => React.ReactNodefalse
pagepage size of tabbar's tabnumber5false
onTabClickon tab click(tab: Models.TabData, index: number) => voidfalse
tabBarPositiontabBar's position defualt: top'top' | 'bottom' | 'left' | 'right'false
tabBarUnderlineStyletabBar underline styleReact.CSSProperties | anyfalse
tabBarBackgroundColortabBar background colorstringfalse
tabBarActiveTextColortabBar active text colorstringfalse
tabBarInactiveTextColortabBar inactive text colorstringfalse
tabBarTextStyletabBar text styleReact.CSSProperties | anyfalse

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

rmc-tabs is released under the MIT license.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free