11.7.4 • Published 3 years ago
@dimorphic/rc-tabs v11.7.4
rc-tabs
React Tabs component.
Screenshot
Example
http://localhost:8000/examples
online example: https://tabs.react-component.now.sh/
install
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' | Layout direction of tabs component | |
editable | { onEdit(type: 'add' | 'remove', info: { key, event }), showAdd: boolean, removeIcon: ReactNode, addIcon: ReactNode } | - | config tab editable |
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' | 'bottom' | 'top' | tab nav 's position | |
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.
11.7.4
3 years ago