Tabs

当读者需要在等价示例之间切换时，使用 Tabs。常见场景包括 package managers、 frameworks、output formats，或 preview/code views。

Import

import { TabItem, Tabs } from '@prosefly/astro-components';

Basic Usage

语法与 Starlight 一致：将一个或多个 TabItem 直接放在 Tabs 内部。

<Tabs>
  <TabItem label="Preview">Preview content</TabItem>
  <TabItem label="Code">Code content</TabItem>
</Tabs>

<Tabs>
  <TabItem label="Preview">
    Preview content
  </TabItem>
  <TabItem label="Code">
    Code content
  </TabItem>
</Tabs>

With Icons

给 TabItem 添加 icon，可使用任何 Iconify icon name。当一组 tabs 有 icons 时， active tab icon 会显示在 tab header 开头。

pnpm install @prosefly/astro-components

npm install @prosefly/astro-components

yarn add @prosefly/astro-components

bun add @prosefly/astro-components

<Tabs defaultValue="npm" syncKey="package-manager">
  <TabItem label="pnpm" icon="simple-icons:pnpm">
    ```sh
    pnpm install @prosefly/astro-components
    ```
  </TabItem>
  <TabItem label="npm" icon="simple-icons:npm">
    ```sh
    npm install @prosefly/astro-components
    ```
  </TabItem>
</Tabs>

Copy Code

当每个 panel 都包含代码块，并且希望从 tab header 复制 active panel 的代码时，在 Tabs 上设置 copy。

pnpm add @prosefly/astro-components

npm install @prosefly/astro-components

yarn add @prosefly/astro-components

Copy button 会读取 active panel 中的第一个 code block。

Synced Groups

具有相同 syncKey 的 groups 会共享 selected label。这适合在同一页面中多次重复 package manager 示例。

pnpm dev

npm run dev

yarn dev

pnpm build

npm run build

yarn build

在 synced groups 中使用匹配的 labels。syncKey 会将 selected label 存到 localStorage，所以读者的选择可以跨导航保留。

Custom Values

当 tab 需要一个不同于可见 label 的稳定内部值时，使用 value。defaultValue 可以匹配 label 或 value。

export const defineTheme = () => ({ name: 'Lotus' });

export const defineTheme = () => ({ name: 'Lotus' });

Props

Tabs

TabItem

Syntax Rules

• Tabs 只能包含直接的 TabItem children。
• 每个 TabItem 都必须有 label。
• Markdown 内容应放在每个 TabItem 内部；不要在 tab items 之间放 loose Markdown。
• 使用简短 labels，保证 tab list 在小屏幕上容易扫描。