importTabs,{TabPane}from'rc-tabs';varcallback=function(key){};React.render(<TabsdefaultActiveKey="2"onChange={callback}><TabPanetab="tab 1"key="1">
first
</TabPane><TabPanetab="tab 2"key="2">
second
</TabPane><TabPanetab="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
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:
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.
请发表评论