Search
Tabs
Tabs make it easy to switch between different views
When to use
PCB Design has 3 types of Tabs for different situations.
Card Tabs: for managing too many closeable views.
Normal Tabs: for functional aspects of a page.
Radio.Button: for secondary tabs.
Card Tabs: for managing too many closeable views.
Normal Tabs: for functional aspects of a page.
Radio.Button: for secondary tabs.
Basic
Default activate first tab.
Default
Active
Disabled
Icon
The tab with icon
Tab 1
Tab 2
Tab 3
Tab 4
Slide
In order to fit in more tabs, they can slide left and right (or up and down).
Tab-0
Tab-1
Tab-2
Tab-3
Tab-4
Tab-5
Tab-6
Tab-7
Tab-8
Tab-9
Tab-10
Tab-11
Tab-12
Tab-13
Tab-14
Tab-15
Tab-16
Tab-17
Tab-18
Tab-19
Tab-20
Tab-21
Tab-22
Tab-23
Tab-24
Tab-25
Tab-26
Tab-27
Tab-28
Tab-29
Tabs content 1
Extra content
You can add extra actions to the right of Tabs.
Tab 1
Tab 2
Tab 3
Tab 4
Position
Tab's position: left, right, top or bottom. Will auto switch to top in mobile.
Tab position
Top
Tab 1
Tab 2
Tab 3
Tab 4
Card type tab
Card type tab
Tab 1
Tab 2
Tab 3
Tab 4
Tab content 1
Add & close tab
Only card type Tabs support adding & closable. +Use closable={false} to disable close.
Tab
Tab
Tab
Tab
Tab content
Container of card type Tab
Should be used at the top of container, needs to override styles.
Tab 1
Tab 2
Tab 3
Tab 4
Tab content 1
Customized trigger of new tab
Hide default plus icon, and bind event for customized trigger.
Tab
Tab
Tab
Tab
Tab content
Customized bar of tab
Use react-sticky.
Tab content
Draggable Tabs
Use react-dnd to make tabs draggable.
Default
Active
Disabled
Tab content 2
API
Tabs
| Property | Description | Type | Default |
|---|---|---|---|
addIcon | Customize add icon | ReactNode | - |
activeKey | Current TabPane's key | string | - |
animated | Whether to change tabs with animation. Only works while tabPosition="top"\|"bottom" | boolean | {inkBar:boolean, tabPane:boolean} | false |
renderTabBar | replace the TabBar | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - |
defaultActiveKey | Initial active TabPane's key, if activeKey is not set. | string | - |
hideAdd | Hide plus icon or not. Only works while type="editable-card" | boolean | false |
size | preset tab bar size | large | default | small | default |
centered | Centers tabs | boolean | false |
tabBarExtraContent | Extra content in tab bar | React.ReactNode | - |
tabBarGutter | The gap between tabs | number | - |
tabBarStyle | Tab bar style object | object | - |
tabPosition | Position of tabs | top | right | bottom | left | top |
type | Basic style of tabs | line | card | editable-card | line |
onChange | Callback executed when active tab is changed | Function(activeKey) {} | - |
onEdit | Callback executed when tab is added or removed. Only works while type="editable-card" | (targetKey, action): void | - |
onTabClick | Callback executed when tab is clicked | Function(key: string, event: MouseEvent) | - |
onTabScroll | Trigger when tab scroll | Function({ direction: 'left' | 'right' | 'top' | 'bottom' }) | - |
keyboard | whether to turn on keyboard navigation | boolean | true |
API
Tabs.TabPane
| Property | Description | Type | Default |
|---|---|---|---|
forceRender | Forced render of content in tabs, not lazy render after clicking on tabs | boolean | false |
key | TabPane's key | string | - |
tab | Show text in TabPane's head | string|ReactNode | - |
closeIcon | Customize close icon in TabPane's head. Only works while type="editable-card" | ReactNode | - |