Link

链接允许用户在页面之间进行点击跳转。该组件的样式设计类似于超链接，并在语义上呈现为 <a> 标签。

Storybook@heroui/linkReact AriaSourceStyles source

安装

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

导入

用法

禁用状态

尺寸

颜色

下划线

外部链接

如果传递了 isExternal 属性，链接将具有 target="_blank" 和 rel="noopener noreferrer" 属性。

自定义锚点图标

块级链接

如果传递了 isBlock 属性，链接将呈现为带有 hover 效果的块级元素。

多态组件

HeroUI 的组件暴露了一个 as 属性，允许您自定义用于渲染组件的 React 元素类型。

路由

<Link> 组件可与 Next.js 和 React Router 等框架和客户端路由器配合使用。请参阅路由指南了解如何设置。

自定义实现

如果您需要进一步自定义链接，可以使用 useLink 钩子来创建自己的实现。

数据属性

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

  • data-focus: 当链接获得焦点时。基于 useFocusRing
  • data-focus-visible: 当通过键盘使链接获得焦点时。基于 useFocusRing
  • data-disabled: 当链接被禁用时。基于 isDisabled 属性。

无障碍性

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

API

PropTypeDefault
size
sm | md | lg
"md"
color
foreground | primary | secondary | success | warning | danger
"primary"
underline
none | hover | always | active | focus
"none"
href
string
target
HTMLAttributeAnchorTarget
rel
string
download
boolean | string
ping
string
referrerPolicy
HTMLAttributeReferrerPolicy
isExternal
boolean
false
showAnchorIcon
boolean
false
anchorIcon
ReactNode
isBlock
boolean
false
isDisabled
boolean
false
disableAnimation
boolean
false
PropTypeDefault
onPress
(e: PressEvent) => void
onPressStart
(e: PressEvent) => void
onPressEnd
(e: PressEvent) => void
onPressChange
(isPressed: boolean) => void
onPressUp
(e: PressEvent) => void
onKeyDown
(e: KeyboardEvent) => void
onKeyUp
(e: KeyboardEvent) => void
onClick
MouseEventHandler
Kbd 键盘输入Listbox 列表框