CodeGroup

标签式代码块 — 每个代码片段一个标签。选择会在页面间同步；适用于跨语言或运行时展示相同操作。

安装

npx @cloudflare/nimbus-docs add code-group

yarn dlx @cloudflare/nimbus-docs add code-group

pnpm dlx @cloudflare/nimbus-docs add code-group

bunx @cloudflare/nimbus-docs add code-group

预览

<CodeGroup titles={["TypeScript", "JavaScript"]}>
```ts
function load(id: string) {
  return fetch(`/api/${id}`);
}
```

```js
function load(id) {
  return fetch(`/api/${id}`);
}
```
</CodeGroup>

示例

自动标签

省略 titles 后，标签会回退为通用的 Tab 1、Tab 2……标签。

<CodeGroup>
```bash
npm install astro
```

```sh
pnpm add astro
```
</CodeGroup>

混合语言

适用于跨运行时展示相同操作 — 请求示例是最典型的场景。

curl -X POST https://api.example.com/charge \
  -H "Authorization: Bearer $KEY"

await fetch("https://api.example.com/charge", {
  method: "POST",
  headers: { Authorization: `Bearer ${KEY}` },
});

import requests
requests.post(
    "https://api.example.com/charge",
    headers={"Authorization": f"Bearer {KEY}"},
)

<CodeGroup titles={["cURL", "Node", "Python"]}>
```bash
curl -X POST https://api.example.com/charge \
  -H "Authorization: Bearer $KEY"
```

```js
await fetch("https://api.example.com/charge", {
  method: "POST",
  headers: { Authorization: `Bearer ${KEY}` },
});
```

```py
import requests
requests.post(
    "https://api.example.com/charge",
    headers={"Authorization": f"Bearer {KEY}"},
)
```
</CodeGroup>

带文件名框架

每个标签可以通过 title="…" 元信息携带自己的文件名。

<CodeGroup titles={["服务端", "客户端"]}>
```ts title="src/server.ts"
export const POST = async ({ request }) => {
  return new Response("ok");
};
```

```tsx title="src/client.tsx"
await fetch("/api", { method: "POST" });
```
</CodeGroup>

API 参考

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

Prop	Type
`titles`	`string[]`