使用精美的组件更快地交付
NextUI Pro

链接

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

Storybook@nextui-org/linkReact Aria源代码样式源代码

安装

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

导入

用法

禁用

尺寸

颜色

下划线

外部链接

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

自定义锚点图标

如果你传递 isBlock 属性，链接将作为块级元素呈现，并具有 hover 效果。

多态组件

NextUI 组件公开一个 as 属性，允许你自定义用于渲染组件的 React 元素类型。

路由

<Link> 组件与框架和客户端路由（如 Next.js 和 React Router）一起使用。请参阅路由指南，了解如何设置。

自定义实现

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

数据属性

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

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

可访问性

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

API

属性类型默认值
大小
sm | md | lg
"md"
颜色
foreground | primary | secondary | success | warning | danger
"primary"
下划线
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
属性类型默认值
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
KbdListbox