Package Exports

rmc-tabs
rmc-tabs/assets/index.css
rmc-tabs/es/index
rmc-tabs/lib/index

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rmc-tabs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

rmc-tabs

React Mobile Tabs Component (web)

Screenshots

Development

npm i 
npm start

Example

http://localhost:8000/examples/

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

install

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><p>content1</p></div>
    <div><p>content2</p></div>
    <div><p>content3</p></div>
    <div><p>content4</p></div>
    <div><p>content5</p></div>
</Tabs>

// single content
<Tabs tabs={[
    { title: 't1' },
    { title: 't2' },
    { title: 't3' },
    { title: 't4' },
    { title: 't5' },
]} onChangeTab={(index, tab) => {
    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
<StickyContainer>
    <Tabs tabs={[
        { title: 't1' },
        { title: 't2' },
        { title: 't3' },
        { title: 't4' },
        { title: 't5' },
    ]} renderTabBar={(props) => {
            return <Sticky style={{ zIndex: 1 }}>
                <DefaultTabBar {...props} />
            </Sticky>;
        }}
    >
        ...
    </Tabs>
</StickyContainer>

API

Tabs:

属性	说明	类型	默认值	必选
prefixCls	prefix class (web only)	string	rmc-tabs	false
tabs	tabs data	Models.TabData[]		true
tabBarPosition	TabBar's position	'top' \| 'bottom' // TODO left, right		false
renderTabBar	replace the TabBar	(props: TabBarPropsType) => React.ReactNode		false
initalPage	the tab when inital, 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
prerenderingSiblingsNumber	pre-render nearby # sibling, Infinity === render all the siblings, default to 0 === render current page.	number	1	false
animated	Whether to change tabs with animation	boolean	true	false
onChangeTab	Callback when tab is switched	(index: number, tabData: Models.TabData) => void		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	Whether to change tabs with animation	boolean	true
tabBarPosition	TabBar's position	'top' \| 'bottom' // TODO left, right	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.