ツールの例

長い識別子には読みやすいオプション一覧を使い、ツールを説明するときはラベル付きのソース／結果を並べます。これらのフィクスチャは表示状態を示すものです。lint や言語サービスの出力で検証した例は、製品の Guide が所有します。

showDescriptions

既定値 true

Keep the explanation beside each entry.

headingLevel

既定値 3

Choose a heading level that fits the document.

caption

Describe what the reader should notice.

<button>Save</button>

<button type="button">Save</button>

.card { width: red; }

<div class="flex"></div>

.flex { display: flex; }

DocumentOptions は各識別子を、任意の既定値と説明の上に置きます。ネイティブの定義リストの意味構造を使い、長い名前や値は折り返すため、本文を狭い表セルに押し込みません。MDX に本文を直接書く場合は DocumentOptionList と DocumentOptionEntry を組み合わせます。段落、リンク、インラインコードは可搬ドキュメントにも残ります。

<DocumentOptionList label="Component interfaces">  <DocumentOptionEntry name="DemoSurface">    **Interface:** `elevation`, native div props.    A bordered surface with no implicit layout or padding. Elevation is opt-in.  </DocumentOptionEntry></DocumentOptionList>

これらの文書リストは測定対象の外に置きます。各項目には1つの用語とその説明を割り当て、独立したインターフェースの詳細やレイアウト制約は通常の段落で説明します。

<DocumentOptions label="Feature settings" options={[  {    name: 'masterCSS.suggestSyntax',    defaultValue: 'true',    description: 'Offer contextual completion items.'  }]} />

DocumentCodeExample は共通の構文ハイライトを再利用します。ソースだけの例ではエラーや警告を示せ、比較する例ではソースと結果に異なる言語を使えます。各ブロックはキーボード対応のコピーボタンとクリップボードの結果通知を備え、コピーできない場合でも読めます。

<DocumentCodeExample  title="A stable class order"  language="mcss"  source="p-md flex"  result="flex p-md"  sourceLabel="Before sorting"  resultLabel="After sorting"/>

完全で検証済みの文字列を使います。コードは空白を保ち、ブロック内でスクロールでき、オプションの説明は幅に応じて折り返します。どちらのコンポーネントも、測定する CSS 教材の flex や grid の配置内には置きません。エクスポートアダプターでも全文を残してください。

並べ替え、正規形、競合、診断の種類はコード lint、補完、ホバー、フォーマッターの出力は言語サービスを参照してください。