标签页组件
@beisen-phoenix/tabs
###changelog 2019-11-19 3.3.35版本 1、新增 contentAnimated:是否使用动画切换content
概述
选项卡切换组件。
API
Tabs
参数 | 说明 | 类型 | 默认值 | 必须 |
---|---|---|---|---|
activeKey | 当前激活 tab 面板的 key | string | - | No |
navWrapper | - | function | arg => arg | No |
onChange | 切换面板的回调 | function(activeKey) | () => {} | No |
prefixCls | 样式前缀 | string | 'beisen-phoenix-tabs' | No |
className | 类名 | string | - | No |
tabBarPosition | 页签位置,可选值有 'top' 'right' 'bottom' 'left' | string | 'top' | No |
tabType | 页签的基本样式,可选值包括(base、button、super、secondary) | string | 'base' | No |
style | tab bar 的样式 | object | {} | No |
disableKeyEvent | 是否禁用上下左右键切换tab | boolean | false | No |
defaultActiveKey | 初始化选中面板的 key,如果没有设置 activeKey | string | - | No |
destroyInactiveTabPane | 是否销毁未激活的tabPane | boolen | false | No |
renderTabBar | 替换 TabBar,用于二次封装标签头 | () => React.ReactNode | - | No |
renderTabContent | 替换 TabContent,用于二次封装标签内容 | () => React.ReactNode | - | No |
showMoreBtn | 是否开启更多按钮功能需要开发者参数控制 | boolean | - | No |
customStyle | 用于tabType为button 页签,配置自定义选中按钮颜色: {index: {background:"#FFAB24"}} |
object | - | No |
contentAnimated | 是否使用动画切换content | boolean | true | No |
TabContent
参数 | 说明 | 类型 | 默认值 | 必须 |
---|---|---|---|---|
animatedWithMargin | 动画切换是否改变外边距样式 | boolean | - | No |
animated | 是否使用动画切换 Tabs | boolean | true | No |
prefixCls | 样式前缀 | string | - | No |
activeKey | 当前激活 tab 面板的 key | string | - | No |
style | 样式 | object | - | No |
tabBarPosition | 页签位置,可选值有 'top' 'right' 'bottom' 'left' | string | - | No |
className | 类名 | string | - | No |
Tabs.TabPane
参数 | 说明 | 类型 | 默认值 | 是否必传 |
---|---|---|---|---|
classname | 类名 | string | - | No |
active | 当前激活 tab 面板的 key | boolean | - | No |
style | 样式 | object | - | No |
destroyInactiveTabPane | 是否销毁未激活的tabPane | string | - | No |
forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | - | No |
placeholder | 描述输入字段预期值的简短的提示信息 | string | - | No |
rootPrefixCls | 根样式前缀 | string | - | No |
key | 对应 activeKey | string | - | No |
tab | 选项卡头显示文字 | string | ReactNode | No |
disabled | 禁用 | boolean | false | No |