Tabs

选项卡将内容组织成多个部分，并允许用户在其间导航。

安装

The above command is for individual installation only. You may skip this step if @heroui/react is already installed globally.

导入

HeroUI 导出 2 个与选项卡相关的组件：

• Tabs: 用于显示选项卡列表的主组件。
• Tab: 用于显示选项卡项的组件。该组件的子元素将显示为选项卡的内容。

用法

动态渲染

您可以使用 items 属性动态渲染选项卡。

禁用

禁用项

尺寸

圆角

颜色

变体

带图标

受控

您可以使用 onSelectionChange 和 selectedKey 属性来控制选中的选项卡。

位置

您可以使用 placement 属性更改选项卡的位置。默认值为 top。

垂直

更改选项卡的方向，当值为 true 时将使 placement 属性失效。

链接

可以通过将 href 属性传递给 Tab 组件，将选项卡项渲染为链接。默认情况下，链接执行原生浏览器导航。但是，您通常希望将选中的选项卡与客户端路由器的当前 URL 同步。您可以通过以下步骤实现：

1. 在应用的根目录设置路由器。请参阅路由指南了解如何操作。
2. 使用 selectedKey 属性根据当前 URL 设置选中的选项卡。

Next.js

此示例使用 Next.js App router 为每个选项卡设置路由，并将选中的选项卡与当前 URL 同步。

React Router

此示例使用 React Router 为每个选项卡设置路由，并将选择与 URL 同步。

注意: 请参阅路由指南了解如何为您的框架设置路由器。

带表单

插槽

• base: 主选项卡插槽，包裹项和面板。
• tabList: 选项卡列表插槽，包裹选项卡项。
• tab: 选项卡插槽，包裹选项卡项。
• tabContent: 选项卡内容插槽，包裹选项卡内容。
• cursor: 光标插槽，包裹光标。仅在 disableAnimation=false 时可见。
• panel: 面板插槽，包裹选项卡面板（内容）。
• tabWrapper: 选项卡包装器插槽，包裹选项卡和选项卡内容。

自定义样式

您可以通过将自定义的 Tailwind CSS 类传递给组件插槽来自定义 Tabs 组件。

数据属性

Tab 在 base 元素上具有以下属性：

• data-selected: 当选项卡被选中时。
• data-disabled: 当选项卡被禁用时。
• data-hover: 当选项卡被悬停时。基于 useHover。
• data-hover-selected: 当选项卡被悬停且未被选中时。基于 useHover 和 selected 状态。
• data-focus: 当选项卡获得焦点时。基于 useFocusRing。
• data-focus-visible: 当通过键盘使选项卡获得焦点时。基于 useFocusRing。
• data-pressed: 当选项卡被按下时。基于 usePress。

无障碍性

• 支持鼠标、触摸和键盘交互。
• 支持箭头键的键盘事件。
• 支持禁用的选项卡。
• 遵循选项卡 ARIA 模式，语义上链接选项卡及其关联的选项卡面板。
• 对没有可聚焦子元素的选项卡面板进行焦点管理。

API

Tabs 属性

Tabs 事件

Tab 属性