Link

Getting startedRefineUI󰦅Without iconDisabled

インポート

import { Link } from "@pelagornis/page/components";

例

上のプレビューはこのファイルを描画したものです。src/components/ にコピーして使い始めてください。

src/components/LinkExample.tsx

import { Link, Stack } from "@pelagornis/page/components";

export default function LinkDemo() {
  return (
    <Stack direction="row" gap="sizeLarge" align="center" wrap>
      <Link href="/guides/getting-started/">Getting started</Link>
      <Link href="https://ui.pelagornis.com/" target="_blank">
        RefineUI
      </Link>
      <Link href="https://ui.pelagornis.com/" target="_blank" showExternalIcon={false}>
        Without icon
      </Link>
      <Link href="/" disabled>
        Disabled
      </Link>
    </Stack>
  );
}

MDX で使う

Link は .mdx ページにそのまま書けます。frontmatter の下でインポートしてください。サーバーで描画されるので、client ディレクティブは要りません。

src/content/docs/example.mdx

---
title: Example
---

import { Link } from "@pelagornis/page/components";

<Link href="https://ui.pelagornis.com/" target="_blank">RefineUI</Link>

Markdoc で使う

pageMarkdoc() がこのコンポーネントの link タグを登録します。markdoc.config.mjs にプリセットを一度追加すれば（Markdoc で使うを参照）、どの .mdoc ページでもタグを書けます。

src/content/docs/example.mdoc

{% link href="https://ui.pelagornis.com/" target="_blank" %}RefineUI{% /link %}

属性の名前と値は React の props と同じです。

構造

コンポーネントを構成するパーツと、それぞれが描画する data-refineui のロールです。

パーツ	ロール
root	link

状態

コンポーネントがスタイルを当てる状態です。コンポーネントの状態は data 属性として公開されます。

種類	状態
疑似クラス	focus-visible

キーボード

フォーカスがあるときにコンポーネントが処理するキーです。

キー	動作
Enter	activate

参考

• デザインのガイドとトークンの詳細は RefineUI · Link を参照してください。
• 共通のルールは MDX で使う と Markdoc で使う を参照してください。