Tabs
Props
| Prop Name | Type | Required | Default | Description |
|---|---|---|---|---|
| activeKey | string | 当前激活的 tab key，受控 | ||
| defaultActiveKey | string | 默认激活的 tab key，非受控 | ||
| onChange | (activeKey: string) => void | tab 修改时的回调 | ||
| destroyInactiveTabPane | boolean | false | 是否销毁不展示的 tab 内容 | |
| children | ReactElement<TabPaneProps>[] | ReactNode | required | panes | |
| tabBarPosition | TabBarPosition | 'top' | bar 的定位 | |
| styleType | StyleType | 'default' | 样式风格 | |
| size | Size | 'sm' | 尺寸 | |
| extra | ReactNode | 头部插槽 |
说明
- 所有的 pane 必须传入唯一 key
- 支持键盘切换 tab
- tab 数量多时会自动出现滚动按钮
演示
演示
position - 位置
styleType - 样式风格
destroyInactiveTabPane - 销毁不活动的 tab
scroll - 滚动
uncontrolled
child - 嵌套
边界测试
手动测试
Pane
Props
| Prop Name | Type | Required | Default | Description |
|---|---|---|---|---|
| forceRender | boolean | 是否强制渲染 | ||
| children | ReactNode | 面板内容 | ||
| disabled | boolean | 是否禁用 | ||
| tab | ReactNode | required | tab 的 title | |
| tabKey | string | tab 的 key，由于 react 会在某些情况下改变传递的 key，顾直接使用 key 是不安全的，如发现 key 被修改，可使用 tabKey 来替换 |
说明
tabs 的面板，必须传入唯一的 key 才可正常工作