rc-tabs

React Tabs

Showing:

Popularity

Downloads/wk

625K

GitHub Stars

449

Maintenance

Last Commit

5d ago

Contributors

55

Package

Dependencies

6

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Readme

rc-tabs


React Tabs component.

NPM version dumi 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

nametypedefaultdescription
activeKeystring-current active tabPanel's key
animatedboolean | { inkBar: boolean, tabPane: boolean }{ inkBar: true, tabPane: false }config animation
defaultActiveKeystring-initial active tabPanel's key if activeKey is absent
destroyInactiveTabPanebooleanfalsewhether 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
moreIconReactNode-collapse icon
tabBarGutternumber0config tab bar gutter
tabBarPosition`'left''right''top'
tabBarStylestyle-tab nav style
tabBarExtraContentReactNode | { left: ReactNode, right: ReactNode }-config extra content
renderTabBar(props, TabBarComponent) => ReactElement-How to render tab bar
prefixClsstring'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

nametypedefaultdescription
keystring-corresponding to activeKey, should be unique
forceRenderbooleanfalseforced render of content in tabs, not lazy render after clicking on tabs
tabReactNode-current tab's title corresponding to current tabPane
closeIconReactNode-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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial