标签页

标签页将内容组织成多个部分，并允许用户在它们之间导航。

安装

上述命令仅用于单独安装。如果 @heroui/react 已全局安装，则可以跳过此步骤。

导入

HeroUI 导出 2 个与标签页相关的组件

• Tabs：用于显示标签页列表的主要组件。
• Tab：用于显示标签项的组件。此组件的子元素将显示为标签页的内容。

用法

动态

您可以使用 items 属性动态渲染标签页。

禁用

禁用项

尺寸

圆角

颜色

变体

带图标

受控

您可以使用 onSelectionChange 和 selectedKey 属性来控制选定的标签页。

位置

您可以使用 placement 属性更改标签页的位置。默认值是 top。

垂直

更改标签页的方向，当值为 true 时，`placement` 属性将失效。

链接

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

1. 在应用程序的根目录中设置路由器。请参阅路由指南以了解如何执行此操作。
2. 使用 selectedKey 属性根据当前 URL 设置选定的标签页。

Next.js

此示例使用Next.js App 路由器为每个标签页设置路由，并将选定的标签页与当前 URL 同步。

React Router

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

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

使用 Form

插槽 (Slots)

• base: 主要标签页插槽，它包裹着项目和面板。
• tabList: 标签列表插槽，它包裹着标签项。
• tab: 标签插槽，它包裹着标签项。
• tabContent: 标签内容插槽，它包裹着标签内容。
• cursor: 光标插槽，它包裹着光标。仅当 disableAnimation=false 时可见
• panel: 面板插槽，它包裹着标签面板（内容）。

自定义样式 (Custom Styles)

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

数据属性 (Data Attributes)

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

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

无障碍 (Accessibility)

• 支持鼠标、触摸和键盘在标签页上的交互。
• 键盘事件支持方向键。
• 支持禁用标签页。
• 遵循标签页 ARIA 模式，语义化地链接标签页及其关联的标签面板。
• 为没有任何可聚焦子元素的标签面板提供焦点管理。

API

Tabs Props

Tabs Events

Tab Props