链接 (Link)

链接允许用户点击从一个页面跳转到另一个页面。此组件的样式类似于超链接，并在语义上渲染为 <a>

安装 (Installation)

上述命令仅用于单独安装。如果 (The above command is for individual installation only. You may skip this step if) @heroui/react 已全局安装。(is already installed globally.)

导入 (Import)

用法 (Usage)

禁用 (Disabled)

尺寸 (Sizes)

颜色 (Colors)

下划线 (Underline)

外部链接 (External)

如果您传递 isExternal 属性，链接将具有 target="_blank" 和 rel="noopener noreferrer" 属性。(If you pass the isExternal prop, the link will have the target="_blank" and rel="noopener noreferrer" attributes.)

自定义锚点图标 (Custom Anchor Icon)

块级链接 (Block Link)

如果您传递 isBlock 属性，链接将呈现为具有 hover 效果的块级元素。(If you pass the isBlock prop, the link will be rendered as a block element with a hover effect.)

多态组件 (Polymorphic Component)

HeroUI 的组件公开了一个 as 属性，允许您自定义用于渲染组件的 React 元素类型。(HeroUI's components expose a as prop that allows you to customize the React element type that is used to render the component.)

路由 (Routing)

<Link> 组件可以与框架和客户端路由（如 Next.js 和 React Router）一起使用。 请参阅路由 (Routing) 指南以了解如何设置。(The <Link> component works with frameworks and client side routers like Next.js and React Router. See the Routing guide to learn how to set this up.)

自定义实现 (Custom Implementation)

如果您需要进一步自定义链接，可以使用 useLink 钩子来创建您自己的实现。(In case you need to customize the link even further, you can use the useLink hook to create your own implementation.)

数据属性 (Data Attributes)

Link 在 base 元素上具有以下属性 (has the following attributes on the base element)

• data-focus: 当链接被聚焦时。 基于 (When the link is being focused. Based on) useFocusRing
• data-focus-visible: 当链接通过键盘获得焦点时。基于 useFocusRing
• data-disabled: 当链接被禁用时。基于 isDisabled 属性。

无障碍性

• 支持鼠标、触摸和键盘交互。
• 支持通过 <a> 元素或通过 ARIA 的自定义元素类型的导航链接。
• 支持禁用的链接。
• 键盘用户可以使用 Enter 键激活链接。

API

链接属性

链接事件