设计
设计指南
设计原则
样式指南
设计资源
Klein - Figma
Klein Font
官方图标库
开发
开发文档
React
Vue Web
敬请期待
开发资源
GitHub 代码仓库
生态产品
生态产品
Orion Fonts
敬请期待
Orio Market
敬请期待
Klein Pro
敬请期待
Klein Editor
敬请期待
选项卡 Tabs
选项卡切换组件提供平级的区域将大块内容进行收纳和展现,保持界面整洁。
基础示例
有icon Tabs
卡片模式
尺寸大小
更多标签页
支持编辑的标签页
Tabs Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
activeKey | 当前激活 tab 面板的 key | string | - |
size | 尺寸 | "small" | - |
defaultActiveKey | 默认激活 tab 面板的 key | string | - |
onChange | 改变回调 | ((activeKey: ReactText) => void) | - |
onTabClick | 点击回调 | ((activeKey: ReactText) => void) | - |
type | 页签的基本样式,可选 line、card 类型 | "line" | line |
moreIcon | 自定义折叠 icon | ReactNode | - |
renderTabBar | 替换TabBar,用于二次封装标签头 | (props: any, DefaultTabBar: React.ComponentType) => React.ReactElement | - |
tabLine | 控制是否显示tabs下的横线 | boolean | - |
editable | tabpane是否允许新增删除 | boolean | - |
hideAdd | 是否隐藏添加按钮 | boolean | - |
addIcon | 自定义新增icon | ReactNode | - |
isHoverClose | 删除icon是否hover展示 | boolean | - |
deleteIcon | 自定义删除icon | ReactNode | - |
destroyInactiveTabPane | 被隐藏时是否销毁 DOM 结构 | boolean | - |
onEdit | 新增和删除页签的回调,仅在editable为true时有效 | ((e: string | - |
Tabs.TabPane
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
key | 对应 activeKey | string | - |
tab | 选项卡头显示文字 | React.ReactNode | - |
disabled | 是否禁用 | boolean | - |