Tabs

このコンポーネントは、関連情報を効率よく見せるタブ UI を作れます。同じことを複数の方法で行うときに使います。

• Dashboard / API / Terraform
• 異なるコード構文
• アカウントレベルとゾーンレベルの操作
• GRE / IPsec トンネル

主な回答や中核となる手順は、タブや折りたたみセクションの中だけに置かず、必ず本文の流れに書いてください。

タブは、一般的な概念を述べたあとに、プラットフォーム固有の違い（たとえば Dashboard、API、Terraform）に使います。Details は補足情報向けであり、主な回答には使いません。

import { Tabs, TabItem } from "~/components";

<Tabs>
	<TabItem label="Stars" icon="ph:star">
		Sirius, Vega, Betelgeuse
	</TabItem>
	<TabItem label="Moons" icon="ph:moon">
		Io, Europa, Ganymede
	</TabItem>
</Tabs>

任意で、tab labels に対応するアイコンを Starlight の Icons ↗ から選べます。

特定のパターン（Dashboard / API / Terraform）に従うタブがある場合は、string 値を含む syncKey パラメーターを追加します。

ドキュメントでは、次の syncKey 値を使います。

• dashPlusAPI: Dashboard / API / Terraform
• workersExamples: Workers ドキュメントで、異なるコード言語のタブ（JavaScript、TypeScript、Python、Rust）向け

import { Tabs, TabItem } from "~/components";

<Tabs syncKey="dashPlusAPI"> <TabItem label="Dashboard">

Dash instructions

</TabItem> <TabItem label="API">

API instructions

</TabItem> </Tabs>

次と同期します。