标签页

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

安装

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

导入

NextUI 导出 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 同步。

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

带有表单

插槽

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

自定义样式

您可以通过将自定义 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

选项卡属性

选项卡事件

选项卡属性