---

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 图标样式