logoNamu Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
1.0.0
  • Components Overview
  • General
    • Button
    • FloatButtonNew
    • Icon
    • Typography
  • Layout
    • Divider
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPickerNew
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCodeNew
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • TourNew
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
  • Other
    • Affix
    • AppNew
    • ConfigProvider
Examples
Basic
Disabled
Centered
Icon
Slide
Extra content
Size
Position
Card type tab
Add & close tab
Customized trigger of new tab
Customized bar of tab
Draggable Tabs
API
Tabs
TabItemType
Design Token

Tabs

    • TableTag

    Resources

    Namu Design Charts
    Namu Design Pro
    Namu Design Pro Components
    Namu Design Mobile
    Namu Design Mini
    Namu Design Landing-Landing Templates
    Scaffolds-Scaffold Market
    Umi-React Application Framework
    dumi-Component doc generator
    qiankun-Micro-Frontends Framework
    ahooks-React Hooks Library
    Ant Motion-Motion Solution
    China Mirror 🇨🇳

    Community

    Awesome Namu Design
    Medium
    Twitter
    yuqueNamu Design in YuQue
    Namu Design in Zhihu
    Experience Cloud Blog
    seeconfSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTechMore Products

    yuqueYuQue-Document Collaboration Platform
    AntVAntV-Data Visualization
    EggEgg-Enterprise Node.js Framework
    kitchenKitchen-Sketch Toolkit
    xtechAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Namu Design Community

    Tabs make it easy to switch between different views.

    When To Use

    Namu 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.

    Examples

    Basic

    Default activate first tab.

    expand codeexpand code
    Disabled

    Disabled a tab.

    expand codeexpand code
    Centered

    Centered tabs.

    expand codeexpand code
    Icon

    The Tab with Icon.

    expand codeexpand code
    Slide

    In order to fit in more tabs, they can slide left and right (or up and down).

    expand codeexpand code
    Extra content

    You can add extra actions to the right or left or even both side of Tabs.

    expand codeexpand code
    Size

    Large size tabs are usually used in page header, and small size could be used in Modal.

    expand codeexpand code
    Position

    Tab's position: left, right, top or bottom. Will auto switch to top in mobile.

    expand codeexpand code
    Card type tab

    Another type of Tabs, which doesn't support vertical mode.

    expand codeexpand code
    Add & close tab

    Only card type Tabs support adding & closable. +Use closable={false} to disable close.

    expand codeexpand code
    Customized trigger of new tab

    Hide default plus icon, and bind event for customized trigger.

    expand codeexpand code
    Customized bar of tab

    Use react-sticky-box and renderTabBar.

    expand codeexpand code
    Draggable Tabs

    Use dnd-kit to make tabs draggable.

    expand codeexpand code

    API

    Common props ref：Common props

    Tabs

    PropertyDescriptionTypeDefaultVersion
    activeKeyCurrent TabPane's keystring-
    addIconCustomize add iconReactNode-4.4.0
    animatedWhether to change tabs with animation.`boolean | { inkBar: boolean, tabPane: boolean }{ inkBar: true, tabPane: false }
    centeredCenters tabsbooleanfalse4.4.0
    defaultActiveKeyInitial active TabPane's key, if activeKey is not setstring-
    hideAddHide plus icon or not. Only works while type="editable-card"booleanfalse
    itemsConfigure tab contentTabItemType[]4.23.0
    moreIconThe custom icon of ellipsisReactNode<EllipsisOutlined />4.14.0
    popupClassNameclassName for more dropdown.string-4.21.0
    renderTabBarReplace the TabBar(props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement-
    sizePreset tab bar sizelarge | middle | smallmiddle
    tabBarExtraContentExtra content in tab barReactNode | {left?: ReactNode, right?: ReactNode}-object: 4.6.0
    tabBarGutterThe gap between tabsnumber-
    tabBarStyleTab bar style objectCSSProperties-
    tabPositionPosition of tabstop | right | bottom | lefttop
    destroyInactiveTabPaneWhether destroy inactive TabPane when change tabbooleanfalse
    typeBasic style of tabsline | card | editable-cardline
    onChangeCallback executed when active tab is changedfunction(activeKey) {}-
    onEditCallback executed when tab is added or removed. Only works while type="editable-card"(action === 'add' ? event : targetKey, action): void-
    onTabClickCallback executed when tab is clickedfunction(key: string, event: MouseEvent)-
    onTabScrollTrigger when tab scrollfunction({ direction: left | right | top | bottom })-4.3.0

    More option at rc-tabs tabs

    TabItemType

    PropertyDescriptionTypeDefault
    closeIconCustomize 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 falseboolean | ReactNode-
    disabledSet TabPane disabledbooleanfalse
    forceRenderForced render of content in tabs, not lazy render after clicking on tabsbooleanfalse
    keyTabPane's keystring-
    labelTabPane's head display textReactNode-
    childrenTabPane's head display contentReactNode-

    Design Token

    Component Token

    Global Token

    Tab 1
    Tab 2
    Tab 3
    Content of Tab Pane 1
    Tab 1
    Tab 2
    Tab 3
    Tab 1
    Tab 1
    Tab 2
    Tab 3
    Content of Tab Pane 1
    Tab 1
    Tab 2
    Tab 2
    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
    Content of tab 1
    Tab 1
    Tab 2
    Tab 3
    Content of tab 1



    You can also specify its direction or both side


    Tab 1
    Tab 2
    Tab 3
    Content of tab 1
    Tab 1
    Tab 2
    Tab 3
    Content of tab 1
    Card Tab 1
    Card Tab 2
    Card Tab 3
    Content of card tab 1
    Tab position:
    Tab 1
    Tab 2
    Tab 3
    Content of Tab 1
    Tab 1
    Tab 2
    Tab 3
    Content of Tab Pane 1
    Tab 1
    Tab 2
    Tab 3
    Content of Tab 1
    Tab 1
    Tab 2
    Content of Tab Pane 1
    Tab 1
    Tab 2
    Tab 3
    Content of Tab Pane 1
    Tab 1
    Tab 2
    Tab 3
    Content of Tab Pane 1