@rax-ui/tabs NPM | npm.io

1.0.0-beta.62 • Published 5 years ago

Install

Weekly downloads

54

License

-

Repository

Last release

5 years ago

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

Rax rax-component

@rax-ui/icon @rax-ui/styles @rax-ui/transition rax-children rax-clone-element rax-find-dom-node rax-is-valid-element rax-scrollview rax-text rax-view universal-element universal-env

@infinitebrahmanuniverse/nolb-_rax @everything-registry/sub-chunk-760 @zalastax/nolb-_rax

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago