# 标签页

编辑 Starlight、Fumadocs 和 Prosefly MDX 中的标签页、包管理器示例与同步分组。

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

使用 Prosefly 的 MDX 组件编辑器编辑标签页说明，同时保留 Starlight、Fumadocs 或 Prosefly 网站使用的语法。

## 支持的配置

同一个编辑器支持 [Astro](/zh-cn/frameworks/astro/)、[Starlight](/zh-cn/frameworks/starlight/)、[Fumadocs](/zh-cn/frameworks/fumadocs/) 和 [Prosefly](/zh-cn/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` 和持久化选项。

编辑时选中某个标签，不会因此修改发布页面的默认选择。请在源码中保持标题与 value 对应，并通过网站预览检查最终的标签切换行为。

## 相关 MDX 指南

继续阅读：[折叠面板](/docs/zh-cn/editor/components/accordion/) · [提示块](/docs/zh-cn/editor/components/callout/) · [步骤](/docs/zh-cn/editor/components/steps/).