Tabs

标签页内容面板，支持通过 syncKey 跨实例同步。

安装

npx @cloudflare/nimbus-docs add tabs

yarn dlx @cloudflare/nimbus-docs add tabs

pnpm dlx @cloudflare/nimbus-docs add tabs

bunx @cloudflare/nimbus-docs add tabs

预览

标签页将相关内容分组，让读者一次只查看一个面板。

运行 nimbus-docs add tabs 将组件复制到你的仓库中。

传入 syncKey 以在页面上的实例间同步标签状态。

<Tabs>
<TabItem label="概览">
  标签页将相关内容分组，让读者一次只查看一个面板。
</TabItem>
<TabItem label="安装">
  运行 `nimbus-docs add tabs` 将组件复制到你的仓库中。
</TabItem>
<TabItem label="配置">
  传入 `syncKey` 以在页面上的实例间同步标签状态。
</TabItem>
</Tabs>

示例

基础用法

三个带有文本内容的标签页 — 触发按钮由每个 label 属性自动生成。

第一个面板内容。

第二个面板内容。

第三个面板内容。

<Tabs>
<TabItem label="一">第一个面板内容。</TabItem>
<TabItem label="二">第二个面板内容。</TabItem>
<TabItem label="三">第三个面板内容。</TabItem>
</Tabs>

同步标签页

两个具有相同 syncKey 的 Tabs 实例会相互同步 — 选择一个标签后，所有匹配的实例都会跟随。

type User = {{ id: string }};

// inferred at runtime

function load(id: string) {{ ... }}

function load(id) {{ ... }}

<Tabs syncKey="lang">
<TabItem label="TypeScript">type User = { id: string };</TabItem>
<TabItem label="JavaScript">// inferred at runtime</TabItem>
</Tabs>

<Tabs syncKey="lang">
<TabItem label="TypeScript">function load(id: string) { ... }</TabItem>
<TabItem label="JavaScript">function load(id) { ... }</TabItem>
</Tabs>

API 参考

组件接受的全部属性，均源自单一声明。

Prop	Type
`syncKey`	`string`
`label`required	`string`