使用美觀的元件更快地交付
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 hook 來建立您自己的實作。

資料屬性

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
字串
target
HTMLAttributeAnchorTarget
rel
字串
download
布林值 | 字串
ping
字串
referrerPolicy
HTMLAttributeReferrerPolicy
isExternal
布林值
false
showAnchorIcon
布林值
false
anchorIcon
ReactNode
isBlock
布林值
false
isDisabled
布林值
false
disableAnimation
布林值
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
鍵盤列表框