# タブ

Starlight、Fumadocs、Prosefly の MDX で、タブやパッケージマネージャー例、同期グループを編集します。

import ContentEditor from '@/components/editor/ContentEditor.astro';

Prosefly の MDX コンポーネントエディターでタブ形式の手順を編集し、Starlight、Fumadocs、Prosefly の構文を保てます。

## 対応プロファイル

同じエディターで [Astro](/ja/frameworks/astro/)、[Starlight](/ja/frameworks/starlight/)、[Fumadocs](/ja/frameworks/fumadocs/)、[Prosefly](/ja/frameworks/lotus/) の各プロファイルを使えます。サイトに合うプロファイルを選ぶと、その連携で利用できる構文と編集コントロールを確認できます。

## ビジュアルモードで編集する

タブを選んで本文を編集します。タイトルは直接編集し、追加操作でタブを増やせます。各タブの操作で並べ替えや削除もできます。グループの設定では、プロファイルに応じた同期や初期選択の属性を変更できます。

<ContentEditor content="tabs" />

## ソースの例

```mdx
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';

<Tabs items={['npm', 'pnpm']}>
  <Tab value="npm">npm でパッケージをインストールします。</Tab>
  <Tab value="pnpm">pnpm を使う場合はこちらのコマンドを使います。</Tab>
</Tabs>
```

## プロファイルによる違い

Starlight と Prosefly は Tabs と TabItem を使います。Fumadocs は Tabs と Tab を使い、グループに `items` の一覧を指定します。Starlight と Prosefly は `syncKey` に対応し、Fumadocs には独自の `groupId` と選択状態の保存設定があります。

編集時にタブを選ぶだけでは、公開時の初期選択は変わりません。ソースでタイトルと値の対応を保ち、最終的な動作はサイトのプレビューで確認してください。

## 関連する MDX ガイド

次に読む: [アコーディオン](/docs/ja/editor/components/accordion/) · [コールアウト](/docs/ja/editor/components/callout/) · [ステップ](/docs/ja/editor/components/steps/).