リンク

リンクを使用すると、ユーザーはページからページへとクリックして移動できます。このコンポーネントはハイパーリンクのようにスタイルされ、セマンティックに<a>をレンダリングします。

Storybook @nextui-org/link React Aria ソーススタイルソース

インストール

npx nextui-cli@latest add link

上記のコマンドは、個別のインストール専用です。もし@nextui-org/reactがグローバルにインストール済みの場合は、この手順をスキップしてもかまいません。 @nextui-org/react がグローバルにインストールされている場合は、このステップをスキップできます。

インポート

使用方法

無効

サイズ

色

下線

外部

isExternal propを渡すと、リンクにはtarget="_blank"とrel="noopener noreferrer"属性が設定されます。

カスタムアンカーアイコン

ブロックリンク

isBlock プロパティを渡すと、リンクはhoverエフェクトを持つブロック要素としてレンダリングされます。

ポリモーフィックコンポーネント

NextUIコンポーネントは、コンポーネントのレンダリングに使用されるReact要素のタイプをカスタマイズできるasプロパティを公開しています。

ルーティング

<Link>コンポーネントは、Next.jsやReact Routerのようなフレームワークやクライアントサイドルーターと連携します。設定方法については、ルーティングガイドをご覧ください。

import {Link} from "@nextui-org/react";

function App() {
  return (
    <>
      <Link href="/home">Home</Link>
      <Link href="/about">About</Link>
    </>
  );
}

カスタム実装

リンクをさらにカスタマイズする必要がある場合は、useLinkフックを使用して、独自の実装を作成できます。

データ属性

Linkには、base要素に次の属性があります。

data-focus: リンクがフォーカスされているとき。useFocusRingに基づきます。
data-focus-visible: リンクがキーボードでフォーカスされているとき。useFocusRingに基づきます。
data-disabled: リンクが無効になっているとき。isDisabledプロパティに基づきます。

アクセシビリティ

マウス、タッチ、キーボード操作をサポートします。
<a>要素またはARIAを介したカスタム要素タイプによるナビゲーションリンクをサポートします。
無効なリンクをサポートします。
キーボードユーザーは、Enterキーを使用してリンクをアクティブ化できます。

API

Link Props

属性	型	説明	デフォルト
size	`sm` \| `md` \| `lg`	リンクのサイズ。	`md`
color	`foreground` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`	リンクの色。	`primary`
underline	`none` \| `hover` \| `always` \| `active` \| `focus`	リンクの下線。	`none`
href	`string`	リンク先のURL。MDNを参照してください。	-
target	`HTMLAttributeAnchorTarget`	リンクのターゲットウィンドウ。MDNを参照してください。	-
rel	`string`	リンクされたリソースと現在のページの関係。 MDNを参照してください。	-
download	`boolean` \| `string`	リンクされたURLをブラウザにダウンロードさせます。ファイル名を提案するために文字列を指定できます。 MDNを参照してください。	-
ping	`string`	リンクがたどられたときにpingを送信するURLのスペース区切りリスト。MDNを参照してください。	-
referrerPolicy	`HTMLAttributeReferrerPolicy`	リンクをたどる際に送信するリファラーの量。MDNを参照してください。	-
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`	ネイティブリンクのクリックイベントハンドラー（非推奨）代わりにonPressを使用してください。	-