• Tabs 标签页

    选项卡切换组件。

    何时使用

    提供平级的区域将大块内容进行收纳和展现,保持界面整洁。

    Ant Design 依次提供了三级选项卡,分别用于不同的场景。

    默认选中第一项。

    禁用某一项。

    有图标的标签。

    可以左右、上下滑动,容纳更多标签。

    可以在页签右边添加附加操作。

    大号页签用在页头区域,小号用在弹出框等较狭窄的容器内。

    有四个位置,tabPosition="left|right|top|bottom"

    另一种样式的页签,不提供对应的垂直样式。

    只有卡片样式的页签支持新增和关闭选项。使用 closable={false} 禁止关闭。

    用于容器顶部,需要一点额外的样式覆盖。

    隐藏默认的页签增加图标,给自定义触发器绑定事件。

    API

    Tabs

    参数 说明 类型 默认值
    activeKey 当前激活 tab 面板的 key string
    animated 是否使用动画切换 Tabs,在 `tabPosition=top bottom` 时有效 boolean | {inkBar:boolean, tabPane:boolean}
    defaultActiveKey 初始化选中面板的 key,如果没有设置 activeKey string 第一个面板
    hideAdd 是否隐藏加号图标,在 type="editable-card" 时有效 boolean false
    size 大小,提供 large defaultsmall 三种大小 string ‘default’
    tabBarExtraContent tab bar 上额外的元素 React.ReactNode
    tabBarStyle tab bar 的样式对象 object -
    tabPosition 页签位置,可选值有 top right bottom left string ‘top’
    type 页签的基本样式,可选 linecard editable-card 类型 string ‘line’
    onChange 切换面板的回调 Function(activeKey) {}
    onEdit 新增和删除页签的回调,在 type="editable-card" 时有效 (targetKey, action): void
    onNextClick next 按钮被点击的回调 Function
    onPrevClick prev 按钮被点击的回调 Function
    onTabClick tab 被点击的回调 Function
    tabBarGutter tabs 之间的间隙 number

    Tabs.TabPane

    参数 说明 类型 默认值
    forceRender 被隐藏时是否渲染 DOM 结构 boolean false
    key 对应 activeKey string
    tab 选项卡头显示文字 string|ReactNode