1.0.0-beta.62 • Published 5 years ago
@rax-ui/tabs
Licence
—
Version
1.0.0-beta.62
Deps
12
Size
40 kB
Vulns
0
Weekly
0
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 图标样式 |