@dimorphic/rc-tabs

    11.7.4 • Public • Published

    rc-tabs


    React Tabs component.

    NPM version build status Test coverage Dependencies DevDependencies npm download bundle size

    Screenshot

    Example

    http://localhost:8000/examples

    online example: https://tabs.react-component.now.sh/

    install

    rc-tabs

    Feature

    Keyboard

    • left and up: tabs to previous tab
    • right and down: tabs to next tab

    Usage

    import Tabs, { TabPane } from 'rc-tabs';
    
    var callback = function(key) {};
    
    React.render(
      <Tabs defaultActiveKey="2" onChange={callback}>
        <TabPane tab="tab 1" key="1">
          first
        </TabPane>
        <TabPane tab="tab 2" key="2">
          second
        </TabPane>
        <TabPane tab="tab 3" key="3">
          third
        </TabPane>
      </Tabs>,
      document.getElementById('t2'),
    );

    API

    Tabs

    name type default description
    activeKey string - current active tabPanel's key
    animated boolean | { inkBar: boolean, tabPane: boolean } { inkBar: true, tabPane: false } config animation
    defaultActiveKey string - initial active tabPanel's key if activeKey is absent
    destroyInactiveTabPane boolean false whether destroy inactive TabPane when change tab
    direction `'ltr' 'rlt'` 'ltr'
    editable { onEdit(type: 'add' 'remove', info: { key, event }), showAdd: boolean, removeIcon: ReactNode, addIcon: ReactNode } -
    locale { dropdownAriaLabel: string, removeAriaLabel: string, addAriaLabel: string } - Accessibility locale help text
    moreIcon ReactNode - collapse icon
    morePopupContainer (menuDOMNode) => HTMLElement () => document.body DOM node container for 'more' dropdown popup
    tabBarGutter number 0 config tab bar gutter
    tabBarPosition `'left' 'right' 'top'
    tabBarStyle style - tab nav style
    tabBarExtraContent ReactNode | { left: ReactNode, right: ReactNode } - config extra content
    renderTabBar (props, TabBarComponent) => ReactElement - How to render tab bar
    prefixCls string 'rc-tabs' prefix class name, use to custom style
    onChange (key) => void - called when tabPanel is changed
    onTabClick (key) => void - called when tab click
    onTabScroll ({ direction }) => void - called when tab scroll

    TabPane

    name type default description
    key string - corresponding to activeKey, should be unique
    forceRender boolean false forced render of content in tabs, not lazy render after clicking on tabs
    tab ReactNode - current tab's title corresponding to current tabPane
    closeIcon ReactNode - Config close icon

    Development

    npm install
    npm start
    

    Test Case

    npm test
    npm run chrome-test
    

    Coverage

    npm run coverage
    

    open coverage/ dir

    License

    rc-tabs is released under the MIT license.

    Install

    npm i @dimorphic/rc-tabs

    DownloadsWeekly Downloads

    2

    Version

    11.7.4

    License

    MIT

    Unpacked Size

    133 kB

    Total Files

    69

    Last publish

    Collaborators

    • avatar