---
title: "交互式内容"
description: "在负责繁琐生命周期的无头 React 包装器上编写定制的交互式图表。"
---

> Documentation Index
> Fetch the complete documentation index at: https://nimbus-docs.cn/llms.txt
> Use this file to discover all available pages before exploring further.

# 交互式内容

import { Tabs, TabItem } from "@/components/ui/tabs";
import { PrimitivesDiagram } from "@/components/react/diagram-showcase/PrimitivesDiagram";
import { PingPongDemo } from "@/components/react/diagram-showcase/PingPongDemo";

文档通常需要*展示*机制——请求如何流转、状态如何嵌套、线路如何对接。Nimbus 将问题拆分：框架负责繁琐的生命周期，你负责渲染。

<h2 id="the-headless-wrapper">无头包装器</h2>

`nimbus-docs/react` 提供了一个无头的 `<Diagram>` 包装器和可组合的 hooks——`usePhase`、`useMeasure`、`useTabIndicator`、`useDiagram`。包装器处理那些难以做好的事情：离屏暂停、减弱动效支持、键盘快捷键、错误边界和跨岛屿协调。它本身不渲染任何可见内容。

最小的有意义示例——`usePhase` 遍历两个步骤，渲染的节点依次亮起。

### 预览

### 代码

```tsx
import { Diagram, usePhase } from "@cloudflare/nimbus-docs/react";
import { DiagramControls } from "@/components/react/diagram";

function PingPong() {
  const { current } = usePhase({
    steps: [{ id: "left", hold: 1500 }, { id: "right", hold: 1500 }],
    loop: true,
  });
  return (
    <div className="flex items-center justify-center gap-12 py-12">
      <Node label="Left" active={current === "left"} />
      <Node label="Right" active={current === "right"} />
    </div>
  );
}

export function Demo() {
  return (
    <Diagram label="Ping-pong">
      <DiagramControls />
      <PingPong />
    </Diagram>
  );
}
```

<h2 id="chrome-is-yours">装饰由你掌控</h2>

操作栏、标签页组和播放/暂停控件是**你拥有的视觉装饰**。通过注册表按需安装到 `src/components/react/diagram/`：

```sh
npx add diagram
pnpm dlx add diagram
yarn dlx add diagram
bunx add diagram
```

你可以自由编辑、重新设计样式或替换它们——hooks 仍然正常工作。从未编写交互式卡片的站点不会产生任何开销：`react` 和 `react-dom` 是可选的对等依赖，仅在你导入 `nimbus-docs/react` 时加载。

<h2 id="the-boundary">边界划分</h2>

| 层 | 所有者 | 内容 |
|---|---|---|
| `<Diagram>` + hooks | `nimbus-docs/react` | 生命周期、状态、离屏暂停、减弱动效、键盘、错误边界。 |
| 装饰 | 你（注册表） | 操作栏、控件、标签页指示器——复制到你的仓库中。 |
| 渲染 | 你 | 几何形状、布局、图表所表达的语义。 |

框架负责行为；你负责外观。使用 `client:visible` 指令将结果嵌入 MDX，使其在滚动到视图中时进行水合。

Source: https://nimbus-docs.cn/writing/interactive-content/index.mdx