React-rayr-tab NPM

react-rayr-tab

Description

base on react,a tab component.

Install

npm install react-rayr-tab --save

Usage

import {RayrTab, RayrTabPane} from 'react-rayr-tab';

<RayrTab classPrefix={"tabs"} defaultActiveIndex={0} className="tab-wrapper" onChange={(data)=>{}}>
        <RayrTabPane key={`tab_0`} order={'0'} tab={'tab1'}>
            tab1 content
        </RayrTabPane>
        <RayrTabPane key={`tab_1`} order={'1'} tab={'tab2'}>
            tab2 content
        </RayrTabPane>
        <RayrTabPane key={`tab_2`} order={'2'} tab={'tab3'}>
            tab3 content
        </RayrTabPane>
        <RayrTabPane key={`tab_3`} order={'3'} tab={'tab4'}>
            tab4 content
        </RayrTabPane>
</RayrTab>

Params

RayrTab

name	type	desc
classPrefix	String	prefix of classname
defaultActiveIndex	Number	order of default active tab
className	String	customize style classname
onChange	Function	callback of tab change, will receive an object about prev index and active index

RayrTabPane

name	type	desc
key	String	only key value of a tab panel
order	String	the order number of tab&tab panel
tab	String\|React Component	tab content,allow use string or a React Component

note: The tab panel content is add inner RayrTabPane component.Is the children node of RayrTabPane component.

Note

Do not forget to import style file(.css) to your project.

react-component react component react-rayr-tab

classnames prop-types react-transition-group

@everything-registry/sub-chunk-2605

0.0.2

6 years ago

0.0.1

6 years ago