Details
作成2026年3月22日Takeshi Takatsudo
HTML の details/summary パターンを使用した折りたたみ可能なコンテンツセクションです。
<Details> を使用して、折りたたみ可能なコンテンツセクションを作成できます。このコンポーネントはグローバルに利用可能で、インポートは不要です。
基本的な使い方
このコンテンツはデフォルトでは非表示で、ユーザーがサマリーをクリックすると表示されます。
<Details title="クリックして展開">
このコンテンツはデフォルトでは非表示で、ユーザーがサマリーをクリックすると表示されます。
</Details>
デフォルトタイトル
title プロップを指定しない場合、サマリーのテキストはデフォルトで「Details」になります。
この折りたたみセクションはデフォルトのタイトルを使用しています。
<Details>
この折りたたみセクションはデフォルトのタイトルを使用しています。
</Details>
リッチコンテンツ
<Details> ブロック内には、コードブロック、リスト、その他のコンポーネントなど、あらゆる MDX コンテンツを含めることができます。
以下はサンプル設定です:
ts export default { site: "https://example.com", output: "static", }; ポイント: - site フィールドはベース URL を設定します - output フィールドはビルドモードを制御します - すべてのフィールドは適切なデフォルト値を持つオプションです<Details title="設定例">
以下はサンプル設定です:
```ts
export default {
site: "https://example.com",
output: "static",
};
```
ポイント:
- `site` フィールドはベース URL を設定します
- `output` フィールドはビルドモードを制御します
- すべてのフィールドは適切なデフォルト値を持つオプションです
</Details>
プロップ
| プロップ | 型 | デフォルト | 説明 |
|---|---|---|---|
title | string | "Details" | クリック可能なサマリーテキスト |