MDX コンポーネント

すべてのドキュメントページで利用可能なカスタム MDX コンポーネントのライブラリです。これらはドキュメントのレンダリングパイプラインに自動的に登録されます。

Callout (コールアウト)

重要な情報を強調するためにコールアウトを使用します。

<Callout type="info" title="情報">
  これは情報のコールアウトです。
</Callout>

<Callout type="warning" title="警告">
  この操作には注意してください。
</Callout>

<Callout type="tip" title="ヒント">
  ここに便利な提案を記載します。
</Callout>

種類 (Types): info, warning, tip, error

Badge (バッジ)

バージョンやステータスのインジケーターを表示します。

<Badge text="New" variant="success" />
<Badge text="Experimental" variant="warning" />
<Badge text="Deprecated" variant="error" />

プロパティ (Props):

プロパティ	型	説明
`text`	`string`	バッジのラベル
`variant`	`'success' \| 'warning' \| 'error' \| 'info'`	カラーバリアント

Steps (ステップ)

ステップバイステップの指示のために、順序付きリストをラップします。

<Steps>
1. **最初のステップ**

   最初のステップの説明。

2. **2 番目のステップ**

   2 番目のステップの説明。
</Steps>

FileTree (ファイルツリー)

ファイルとディレクトリの構造を表示します。

<FileTree>
- src/
  - components/
  - pages/
    - index.astro
    - **[theme].astro**
- package.json
</FileTree>

** で囲まれた太字の項目はハイライトされます。リスト項目には - を使用してください。

CardGrid & LinkCard (カードグリッドとリンクカード)

レスポンシブなグリッド内にリンク付きカードを表示します。

<CardGrid>
  <LinkCard
    title="はじめに"
    description="数分でプロジェクトをセットアップします。"
    href="/docs/ja/getting-started/installation"
  />
  <LinkCard
    title="テーマ設定"
    description="テーマ システムについて学びます。"
    href="/docs/ja/core-concepts/theming"
  />
</CardGrid>

LinkCard のプロパティ:

プロパティ	型	説明
`title`	`string`	カードのタイトル
`description`	`string`	カードの説明
`href`	`string`	リンク先

CodeTabs (コードタブ)

複数のパッケージマネージャーや言語向けのタブ付きコードブロックを表示します。

<CodeTabs labels={['pnpm', 'npm', 'yarn']}>
```bash
pnpm install
```
```bash
npm install
```
```bash
yarn install
```
</CodeTabs>

プロパティ (Props):

プロパティ	型	説明
`labels`	`string[]`	各コードブロックの上に表示されるタブのラベル

ℹ️

コードブロック

各コードブロックは直接の子要素として配置してください。コードブロックの数はラベルの数と一致する必要があります。

PropsTable (プロパティテーブル)

コンポーネントのプロパティ (Props) ドキュメントをフォーマットされた表で表示します。

<PropsTable component="Hero" />

ApiMethod (API メソッド)

関数またはメソッドのシグネチャを文書化します。

<ApiMethod name="useTranslations" params="locale: Locale" returns="(key: string) => string" />