| 标签页 Tabs | 您所在的位置：网站首页 › react样式库 › 标签页 Tabs |
标签页 Tabs
|
何时使用 提供平级的区域将大块内容进行收纳和展现，保持界面整洁。 Ant Design 依次提供了三级选项卡，分别用于不同的场景。 卡片式的页签，提供可关闭的样式，常用于容器顶部。既可用于容器顶部，也可用于容器内部，是最通用的 Tabs。Radio.Button 可作为更次级的页签来使用。代码演示Tab 1Tab 2Tab 3Content of Tab Pane 1基本默认选中第一项。 External Link Icon  Tab 1Tab 2Tab 3Tab 1禁用禁用某一项。 External Link IconTab 1Tab 2Tab 3Content of Tab Pane 1居中标签居中展示。 External Link IconTab 1Tab 2Tab 2图标有图标的标签。 External Link IconTab 1Tab 2Tab 3Content of Tab Pane 1指示条设置 indicator 属性，自定义指示条宽度和对齐方式。 External Link IconTab-0Tab-1Tab-2Tab-3Tab-4Tab-5Tab-6Tab-7Tab-8Tab-9Tab-10Tab-11Tab-12Tab-13Tab-14Tab-15Tab-16Tab-17Tab-18Tab-19Tab-20Tab-21Tab-22Tab-23Tab-24Tab-25Tab-26Tab-27Tab-28Tab-29Content of tab 1滑动可以左右、上下滑动，容纳更多标签。 External Link IconTab 1Tab 2Tab 3Content of tab 1You can also specify its direction or both sideTab 1Tab 2Tab 3Content of tab 1附加内容可以在页签两边添加附加操作。 External Link IconTab 1Tab 2Tab 3Content of tab 1Card Tab 1Card Tab 2Card Tab 3Content of card tab 1大小大号页签用在页头区域，小号用在弹出框等较狭窄的容器内。 External Link IconTab position:Tab 1Tab 2Tab 3Content of Tab 1位置有四个位置，tabPosition="left|right|top|bottom"。在移动端下，left|right 会自动切换成 top。 External Link IconTab 1Tab 2Tab 3Content of Tab Pane 1卡片式页签另一种样式的页签，不提供对应的垂直样式。 External Link IconTab 1Tab 2Tab 3Content of Tab 1新增和关闭页签只有卡片样式的页签支持新增和关闭选项。使用 closable={false} 禁止关闭。 External Link IconTab 1Tab 2Content of Tab Pane 1自定义新增页签触发器隐藏默认的页签增加图标，给自定义触发器绑定事件。 External Link IconTab 1Tab 2Tab 3Content of Tab Pane 1自定义页签头使用 react-sticky-box 和 renderTabBar 实现吸顶效果。 External Link IconTab 1Tab 2Tab 3Content of Tab Pane 1可拖拽标签使用 dnd-kit 实现标签可拖拽。 External Link IconAPI通用属性参考：通用属性 Tabs参数说明类型默认值版本activeKey当前激活 tab 面板的 keystring-addIcon自定义添加按钮，设置 type="editable-card" 时有效ReactNode4.4.0animated是否使用动画切换 Tabsboolean| { inkBar: boolean, tabPane: boolean }{ inkBar: true, tabPane: false }centered标签居中展示booleanfalse4.4.0defaultActiveKey初始化选中面板的 key，如果没有设置 activeKeystring第一个面板的 keyhideAdd是否隐藏加号图标，在 type="editable-card" 时有效booleanfalseindicator自定义指示条的长度和对齐方式{ size?: number | (origin: number) => number; align: start | center | end; }-5.13.0items配置选项卡内容TabItemType[]4.23.0more自定义折叠MoreProps{ icon: , trigger: 'hover' }removeIcon自定义删除按钮，设置 type="editable-card" 时有效ReactNode5.15.0popupClassName更多菜单的 classNamestring-4.21.0renderTabBar替换 TabBar，用于二次封装标签头(props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement-size大小，提供 large middle 和 small 三种大小stringmiddletabBarExtraContenttab bar 上额外的元素ReactNode | {left?: ReactNode, right?: ReactNode}-object: 4.6.0tabBarGuttertabs 之间的间隙number-tabBarStyletab bar 的样式对象CSSProperties-tabPosition页签位置，可选值有 top right bottom leftstringtopdestroyInactiveTabPane被隐藏时是否销毁 DOM 结构booleanfalsetype页签的基本样式，可选 line、card editable-card 类型stringlineonChange切换面板的回调(activeKey: string) => void-onEdit新增和删除页签的回调，在 type="editable-card" 时有效(action === 'add' ? event : targetKey, action) => void-onTabClicktab 被点击的回调(key: string, event: MouseEvent) => void-onTabScrolltab 滚动时触发({ direction: left | right | top | bottom }) => void-4.3.0更多属性查看 rc-tabs tabs TabItemType参数说明类型默认值版本closeIcon自定义关闭图标，在 type="editable-card" 时有效。5.7.0：设置为 null 或 false 时隐藏关闭按钮ReactNode-destroyInactiveTabPane被隐藏时是否销毁 DOM 结构booleanfalse5.11.0disabled禁用某一项booleanfalseforceRender被隐藏时是否渲染 DOM 结构booleanfalsekey对应 activeKeystring-label选项卡头显示文字ReactNode-icon选项卡头显示图标ReactNode-5.12.0children选项卡头显示内容ReactNode-closable是否显示选项卡的关闭按钮，在 type="editable-card" 时有效booleantrueMoreProps参数说明类型默认值版本icon自定义折叠图标ReactNode-DropdownProps主题变量（Design Token）组件 Token如何定制？Token 名称描述类型默认值cardBg卡片标签页背景色stringrgba(0, 0, 0, 0.02)cardGutter卡片标签间距number2cardHeight卡片标签页高度number40cardPadding卡片标签页内间距string8px 16pxcardPaddingLG大号卡片标签页内间距string8px 16px 6pxcardPaddingSM小号卡片标签页内间距string6px 16pxhorizontalItemGutter横向标签页标签间距number32horizontalItemMargin横向标签页标签外间距stringhorizontalItemMarginRTL横向标签页标签外间距（RTL）stringhorizontalItemPadding横向标签页标签内间距string12px 0horizontalItemPaddingLG大号横向标签页标签内间距string16px 0horizontalItemPaddingSM小号横向标签页标签内间距string8px 0horizontalMargin横向标签页外间距string0 0 16px 0inkBarColor指示条颜色string#1677ffitemActiveColor标签激活态文本颜色string#0958d9itemColor标签文本颜色stringrgba(0, 0, 0, 0.88)itemHoverColor标签悬浮态文本颜色string#4096ffitemSelectedColor标签选中态文本颜色string#1677fftitleFontSize标齐页标题文本大小number14titleFontSizeLG大号标签页标题文本大小number16titleFontSizeSM小号标签页标题文本大小number14verticalItemMargin纵向标签页标签外间距string16px 0 0 0verticalItemPadding纵向标签页标签内间距string8px 24pxzIndexPopup下拉菜单 z-indexnumber1050全局 Token如何定制？ |
【本文地址】
公司简介
联系我们