Never Pet Mermaids

    rc-tabs
    TypeScript icon, indicating that this package has built-in type declarations

    12.4.2 • Public • Published

    rc-tabs


    React Tabs component.

    NPM version dumi build status Test coverage 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
    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.

    FAQ

    Resposive Tabs

    There are 3 cases when handling resposive tabs: image

    We get hidden tabs through useVisibleRange.ts. If enconter the third case, in order to make tabs responsive, some tabs should be hidden. So we minus addSize when calculating basicSize manully, even though there's no addNode in container. In this way, case 3 turns to case 2, tabs become stable again.

    Install

    npm i rc-tabs

    DownloadsWeekly Downloads

    955,377

    Version

    12.4.2

    License

    MIT

    Unpacked Size

    156 kB

    Total Files

    84

    Last publish

    Collaborators

    • benjycui
    • yesmeck
    • afc163
    • paranoidjk
    • zombiej
    • picodoth
    • madccc