display: Tabs family: Navigation

Tabs

用于让用户在不同的视图中进行切换。

API

Props

| 名称 | 说明 | 类型 | 默认值 | | :----------------- | :------------------------------------------- | :------------ | :----- | | activeValue | （受控）指定激活 Tabs.Tab 的 value | string/number | | | defaultActiveValue | （非受控）指定默认激活 Tabs.Tab 的 value | string/number | | | type | 类型 可选值： normal, primary | enum | normal | | bottom | 是否是底部导航 | bool | false | | tabs | 标签页 | TabProps[] | | | fullWidth | 是否占满空间 | bool | true | | renderTab | 渲染标签页 | ({ title, icon, active, styles: { title, icon } }) => RaxNode | | | renderTool | 渲染 tabs 最右侧的部分 | (): node | | | onChange | tab 变化时触发的回调 | (key): void | |

TabProps

| 名称 | 说明 | 类型 | 默认值 | | :----------------- | :------------------------------------------- | :------------ | :----- | | value | 标签页的值，与 activeValue 一致是被选中 | string / number | | | title | 标题 | string | | | icon | 图标 | string | |

CSS API

| 名称 | 说明 | | :-------------------------------- | :----------------------------- | | tabs | 容器样式 | | tabs__divider | 底部分割线样式 | | tabs__container | 滚动容器样式 | | tabs__tab | tab 项样式 | | tabs__tab--full-width | 设置 fullWidth 时的 tab 样式 | | tabs__active-line | | | tabs__tab-text | tab 文字样式 | | tabs__tab-icon | tab 图标样式 | | tabs__tab--active-text | 激活 tab 文字样式 | | tabs__tab--active-icon | 激活 tab 图标样式 | | tabs--primary | primary 类型下 tabs 容器样式 | | tabs--primary__active-line | | | tabs--primary__tab-text | primay 类型下 tab 文字样式 | | tabs--primary__tab-icon | primay 类型下 tab 图标样式 | | tabs--primary__tab--active-text | primay 类型下激活 tab 文字样式 | | tabs--primary__tab--active-icon | primay 类型下激活 tab 图标样式 | | tabs--bottom | 底部导航 tabs 样式 | | tabs--bottom__divider | 底部导航分割线样式 | | tabs--bottom__tab | 底部导航 tab 样式 | | tabs--bottom__tab-text | 底部导航 tab 文字样式 | | tabs--bottom__tab-icon | 底部导航 tab 图标样式 |