Tabs
Tabs
Tabs make it easy to explore and switch between different views.
가져오기import{ Tabs }from"antd"; |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
가져오기import{ Tabs }from"antd"; |
Ant Design has 3 types of Tabs for different situations.
Common props ref：Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| activeKey | Current TabPane's key | string | - | |
| addIcon | Customize add icon, only works with type="editable-card" | ReactNode | <PlusOutlined /> | 4.4.0 |
| animated | Whether to change tabs with animation. | boolean | { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | |
| centered | Centers tabs | boolean | false | 4.4.0 |
| defaultActiveKey | Initial active TabPane's key, if activeKey is not set | string | The key of first tab | |
| hideAdd | Hide plus icon or not. Only works while type="editable-card" | boolean | false | |
| indicator | Customize size and align of indicator | { size?: number | (origin: number) => number; align: start | center | end; } | - | 5.13.0 |
| items | Configure tab content | TabItemType | [] | 4.23.0 |
| more | 自定义折叠菜单属性 | MoreProps | { icon: <EllipsisOutlined /> , trigger: 'hover' } | |
| removeIcon | The custom icon of remove, only works with type="editable-card" | ReactNode | <CloseOutlined /> | 5.15.0 |
| popupClassName | className for more dropdown. | string | - | 4.21.0 |
| renderTabBar | Replace the TabBar | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | |
| size | Preset tab bar size | large | middle | small | middle | |
| tabBarExtraContent | Extra content in tab bar | ReactNode | {left?: ReactNode, right?: ReactNode} | - | object: 4.6.0 |
| tabBarGutter | The gap between tabs | number | - | |
| tabBarStyle | Tab bar style object | CSSProperties | - | |
| tabPosition | Position of tabs | top | right | bottom | left | top | |
| destroyInactiveTabPane | Whether destroy inactive TabPane when change tab | boolean | false | |
| type | Basic style of tabs | line | card | editable-card | line | |
| onChange | Callback executed when active tab is changed | (activeKey: string) => void | - | |
| onEdit | Callback executed when tab is added or removed. Only works while type="editable-card" | (action === 'add' ? event : targetKey, action) => void | - | |
| onTabClick | Callback executed when tab is clicked | (key: string, event: MouseEvent) => void | - | |
| onTabScroll | Trigger when tab scroll | ({ direction: left | right | top | bottom }) => void | - | 4.3.0 |
More option at rc-tabs tabs
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| closeIcon | Customize close icon in TabPane's head. Only works while type="editable-card". 5.7.0: close button will be hidden when setting to null or false | ReactNode | - | |
| destroyInactiveTabPane | Whether destroy inactive TabPane when change tab | boolean | false | 5.11.0 |
| disabled | Set TabPane disabled | boolean | false | |
| forceRender | Forced render of content in tabs, not lazy render after clicking on tabs | boolean | false | |
| key | TabPane's key | string | - | |
| label | TabPane's head display text | ReactNode | - | |
| icon | TabPane's head display icon | ReactNode | - | 5.12.0 |
| children | TabPane's head display content | ReactNode | - | |
| closable | Whether a close (x) button is visible, Only works while type="editable-card" | boolean | true |
| 토큰 이름 | 설명 | 타입 | 기본값 |
|---|---|---|---|
| cardBg | 卡片标签页背景色 | string | rgba(0, 0, 0, 0.02) |
| cardGutter | 卡片标签间距 | number | 2 |
| cardHeight | 卡片标签页高度 | string | number | 40 |
| cardPadding | 卡片标签页内间距 | string | 8px 16px |
| cardPaddingLG | 大号卡片标签页内间距 | string | 8px 16px 6px |
| cardPaddingSM | 小号卡片标签页内间距 | string | 6px 16px |
| horizontalItemGutter | 横向标签页标签间距 | number | 32 |
| horizontalItemMargin | 横向标签页标签外间距 | string | |
| horizontalItemMarginRTL | 横向标签页标签外间距（RTL） | string | |
| horizontalItemPadding | 横向标签页标签内间距 | string | 12px 0 |
| horizontalItemPaddingLG | 大号横向标签页标签内间距 | string | 16px 0 |
| horizontalItemPaddingSM | 小号横向标签页标签内间距 | string | 8px 0 |
| horizontalMargin | 横向标签页外间距 | string | 0 0 16px 0 |
| inkBarColor | 指示条颜色 | string | #1677ff |
| itemActiveColor | 标签激活态文本颜色 | string | #0958d9 |
| itemColor | 标签文本颜色 | string | rgba(0, 0, 0, 0.88) |
| itemHoverColor | 标签悬浮态文本颜色 | string | #4096ff |
| itemSelectedColor | 标签选中态文本颜色 | string | #1677ff |
| titleFontSize | 标签页标题文本大小 | number | 14 |
| titleFontSizeLG | 大号标签页标题文本大小 | number | 16 |
| titleFontSizeSM | 小号标签页标题文本大小 | number | 14 |
| verticalItemMargin | 纵向标签页标签外间距 | string | 16px 0 0 0 |
| verticalItemPadding | 纵向标签页标签内间距 | string | 8px 24px |
| zIndexPopup | 下拉菜单 z-index | number | 1050 |
Content of Tab Pane 1
Content of Tab Pane 1
Content of Tab Pane 1
