rmc-tabs@1.2.29

EXAMPLES

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.

Fork me on GitHub