标签页

使用 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 和持久化选项。

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

相关 MDX 指南

继续阅读：折叠面板 · 提示块 · 步骤.