タブ

このコンポーネントは、関連情報をより効率的に表示するためのタブインターフェースを作成するのに役立ちます。同じことを達成するための異なる方法がある場合に使用してください：

• ダッシュボード / API / Terraform
• 異なるコード構文スタイル
• アカウントレベルとゾーンレベルのナビゲーション
• GRE / IPsec トンネル

星

シリウス、ベガ、ベテルギウス

月

イオ、エウロパ、ガニメデ

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

<Tabs>
  <TabItem label="星" icon="star">
    シリウス、ベガ、ベテルギウス
  </TabItem>
  <TabItem label="月" icon="moon">
    イオ、エウロパ、ガニメデ
  </TabItem>
</Tabs>

タブの同期

特定のパターン（ダッシュボード / API / Terraform）に従うタブがある場合は、syncKey パラメータを追加し、string 値を含めてください。

私たちのドキュメントでは、以下の syncKey 値を使用しています：

• dashPlusAPI: ダッシュボード / API / Terraform
• workersExamples: Workers ドキュメント内の異なるコード言語タブ（JavaScript、TypeScript、Python、Rust）

例

ダッシュボード

ダッシュの指示

API

API の指示

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

<Tabs syncKey="dashPlusAPI"> <TabItem label="ダッシュボード">

ダッシュの指示

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

API の指示

</TabItem> </Tabs>

次のように同期されます：

ダッシュボード

ダッシュの指示

API

API の指示