跳到正文
GitHub

导航

Tabs

一条,若干面板。

示例

default

The rendered component.

说明

Radix Tabs 的根节点,以带类型的原样透传再导出。

属性

这个组件没有自己的属性。

组成部分

Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.

TabsList

标签条。

横向滚动而不是折行。折出来的第二行标签,会在标签条变长时把它下面的每一个标签都推走,读者正要点的那个就没了。

这个组件没有自己的属性。

TabsTrigger

一个标签。

选中标记是一条 2px 的墨色线,用 -mb-px 拉到标签条自己的边框上,所以两者占同一条线,而不是叠成 3px 的边。高 44px,因为标签和别的东西一样是指针目标。

这个组件没有自己的属性。

TabsContent

通过 value 与某个 配对的面板。

这个组件没有自己的属性。

再导出

Tabs = TabsPrimitive.Root

Radix Tabs 的根节点,以带类型的原样透传再导出。

键盘操作

Tabs keyboard interactions
按键作用
Tab进入和离开标签条——整条只占一个 Tab 停靠点。
在标签之间移动,面板跟着换。
HomeEnd跳到第一个或最后一个标签。

无障碍

  • 这条会横向滚动而不是折行:折到第二行会把下面每个标签都推走,读者刚要点的那个就没了。
  • 高 44px,标签页也是指针目标。