タブ

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

対応プロファイル

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

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

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

tabs.mdx

StarlightFumadocsProsefly

ビジュアルソース

サンプルをリセット

エディターを読み込み中…

編集できるサンプルです。変更はこのページ内にのみ保持されます。

ソースの例

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 ガイド

次に読む: アコーディオン · コールアウト · ステップ.