Link
Linkは、別のウェブページや同一ページ内の場所、または他のURLへのハイパーリンクを作成するコンポーネントです。
<Link href="https://ja.wikipedia.org/wiki/%E3%83%89%E3%83%A9%E3%82%B4%E3%83%B3%E3%83%9C%E3%83%BC%E3%83%AB">
ドラゴンボール - wikipedia
</Link>
使い方
import { Link } from "@yamada-ui/react"
import { Link } from "@/components/ui"
import { Link } from "@workspaces/ui"
<Link />
バリアントを変更する
<Wrap gap="md">
<For each={["plain", "underline"]}>
{(variant) => (
<Link
key={variant}
variant={variant}
href="https://ja.wikipedia.org/wiki/%E3%83%89%E3%83%A9%E3%82%B4%E3%83%B3%E3%83%9C%E3%83%BC%E3%83%AB"
>
ドラゴンボール - wikipedia
</Link>
)}
</For>
</Wrap>
カラースキームを変更する
<Wrap gap="md">
<For each={["success", "warning", "link"]}>
{(colorScheme) => (
<Link
key={colorScheme}
colorScheme={colorScheme}
href="https://ja.wikipedia.org/wiki/%E3%83%89%E3%83%A9%E3%82%B4%E3%83%B3%E3%83%9C%E3%83%BC%E3%83%AB"
>
ドラゴンボール - wikipedia
</Link>
)}
</For>
</Wrap>
外部リンク
<Link
href="https://ja.wikipedia.org/wiki/%E3%83%89%E3%83%A9%E3%82%B4%E3%83%B3%E3%83%9C%E3%83%BC%E3%83%AB"
external
>
ドラゴンボール - wikipedia
</Link>
Props
類似のコンポーネント
Text
Textは、テキストの段落を表すコンポーネントです。デフォルトでは、p要素をレンダリングします。
Mark
Markは、特定のテキストを強調するコンポーネントです。
Kbd
Kbdは、キーボード入力を表すコンポーネントです。
Heading
Headingは、セクションの見出しを表すコンポーネントです。デフォルトでは、h1要素をレンダリングします。
Highlight
Highlightは、テキスト内の指定された文字列をハイライトするコンポーネントです。デフォルトでは、p要素をレンダリングします。
Em
Emは、強調されたテキストを表すコンポーネントです。デフォルトでは、em要素をレンダリングします。
Code
Code はコードブロックを表すコンポーネントです。デフォルトでは code 要素をレンダリングします。
Blockquote
Blockquote は引用を表すコンポーネントです。デフォルトでは blockquote 要素をレンダリングします。