コンポーネント

Cloudflare Docs に貢献するときは、ボタン、タブ、折りたたみセクションなどの追加の書式に、カスタムコンポーネントを使えます。

このガイドでは、コンポーネントをインポートしてページに追加する基本を説明します。各コンポーネントの props と要件は、この Style Guide 内の各コンポーネントページを参照してください。

コンポーネントは Astro コンポーネント ↗ を基盤とし、Markdown の拡張である MDX ↗ で書いています。Cloudflare Docs のフレームワークについて詳しくはこちらを参照してください。

ページにコンポーネントを追加する

ページにコンポーネントを追加する手順は次のとおりです。

フロントマターの直後に、次のテキストを追加してコンポーネントをインポートします。
```
import { COMPONENT_NAME } from "~/components";

;
```
たとえば、Images の始め方ページに DashButton コンポーネントを追加する場合、そのページに対応する MDX ファイルの先頭は次のようになります。
```
---
pcx_content_type: get-started
title: Getting started
 products:
   - images
sidebar:
  order: 2
---

import { DashButton } from "~/components";

;
```
ページ専用のラッパーコンポーネントや、一度きりのコンポーネントは、バレルに追加する必要はありません。深いパスからインポートします。
```
import BaseSchemaProperties from "~/components/BaseSchemaProperties.astro";
```

コンポーネントを表示したい位置に、次のテキストを追加します。

<COMPONENT_NAME PROP_NAME="PROP_VALUE" />

たとえば、Images の始め方ページの手順に DashButton コンポーネントを追加する場合、MDX ファイルは次のようになります。

1. In the Cloudflare dashboard, go to the **Transformations** page.

   <DashButton url="/?to=/:account/images/transformations" />

2. Go to the specific zone where you want to enable transformations.

公開後、この例は次のように表示されます。

用途に合うコンポーネントを選ぶ

よく使うコンポーネントと、それぞれの見た目の例を次の表にまとめました。利用できるすべてのコンポーネントと用途の完全な説明は、この Style Guide 内の各コンポーネントページを参照してください。

コンポーネント	説明と表示例
`APIRequest`	スタイル付きの API リクエストブロックです。必要な API トークン権限付きの、実行可能な cURL API コマンドを生成します。
`Badge`	短い説明用のラベルです。ステータス、バージョン、カテゴリなどの短いメタデータでコンテンツにラベルを付けます。
`DashButton`	ダッシュボードへの直接リンクボタンです。ドキュメントから Cloudflare ダッシュボードの特定の関連セクションへ、ユーザーを直接案内します。
`Details`	クリックで展開するコンテンツブロックです。必須ではない、複雑な、または高度な技術コンテンツを隠し、必要なときに展開できるようにします。
`DirectoryListing`	自動生成のサブページ一覧です。指定したドキュメントフォルダーパス内のサブページへの、ナビ可能なリンク一覧を自動生成します。
`Feature`	製品機能のリスト項目です。機能の説明と、直接リンクするボタンで製品機能を強調します。
`GlossaryTooltip`	ホバーで表示する用語集ポップアップです。ドキュメント用語集から取得した技術用語の定義を、作業を妨げずにホバーで示します。
`LinkCard`	ナビ用カードです。関連するチュートリアル、概念、ガイドを、視覚的に分かりやすい形式で示します。
`PackageManagers`	コマンド切り替えタブです。パッケージマネージャーごとの同等のインストールまたは実行コマンドを表示します。
`Plan`	製品プランの提供状況バッジです。製品または特定機能に必要なプランを示します。
`RelatedProduct`	書式付きの製品参照です。補完する特定の Cloudflare 製品を視覚的に強調し、製品ロゴ付きでリンクします。
`ResourcesBySelector`	フィルター可能なコード例ライブラリです。コンテンツタイプや製品に基づいて、コード例とリソースの一覧を取得して表示します。
`Stream`	埋め込み可能なビデオプレーヤーです。Cloudflare Stream 向けに最適化したプレーヤーを表示します。
`Tabs` と `TabItem`	切り替え可能なコンテンツタブです。コード言語や設定方法ごとに、コンテンツ表示を簡単に切り替えられます。
`Type` と `MetaInfo`	カプセル型のデータ型バッジと、フィールドまたはプロパティのメタデータ注釈です。`Type` は API パラメーターのデータ型（`String`、`Integer`）を示し、`MetaInfo` はメタデータの制約（`Required`、`Optional`、`Read-only`）を示します。
`WranglerConfig`	タブ付きの Wrangler 設定表示です。Wrangler の設定ファイル（JSONC と TOML）とバインディングを、自動の形式切り替え付きで表示します。
`YouTube`	埋め込み可能なビデオプレーヤーです。指定した動画 ID の YouTube プレーヤーを埋め込みます。