设计
设计指南
设计原则
样式指南
设计资源
Klein - Figma
Klein Font
官方图标库
开发
开发文档
React
Vue Web
敬请期待
开发资源
GitHub 代码仓库
生态产品
生态产品
Orion Fonts
敬请期待
Orio Market
敬请期待
Klein Pro
敬请期待
Klein Editor
敬请期待

选项卡 Tabs

选项卡切换组件提供平级的区域将大块内容进行收纳和展现,保持界面整洁。

基础示例

有icon Tabs

卡片模式

尺寸大小

更多标签页

支持编辑的标签页

Tabs Props

参数说明类型默认值
activeKey当前激活 tab 面板的 keystring-
size尺寸"small"-
defaultActiveKey默认激活 tab 面板的 keystring-
onChange改变回调((activeKey: ReactText) => void)-
onTabClick点击回调((activeKey: ReactText) => void)-
type页签的基本样式,可选 line、card 类型"line"line
moreIcon自定义折叠 iconReactNode-
renderTabBar替换TabBar,用于二次封装标签头(props: any, DefaultTabBar: React.ComponentType) => React.ReactElement-
tabLine控制是否显示tabs下的横线boolean-
editabletabpane是否允许新增删除boolean-
hideAdd是否隐藏添加按钮boolean-
addIcon自定义新增iconReactNode-
isHoverClose删除icon是否hover展示boolean-
deleteIcon自定义删除iconReactNode-
destroyInactiveTabPane被隐藏时是否销毁 DOM 结构boolean-
onEdit新增和删除页签的回调,仅在editable为true时有效((e: string-

Tabs.TabPane

参数说明类型默认值
key对应 activeKeystring-
tab选项卡头显示文字React.ReactNode-
disabled是否禁用boolean-

贡献者