浏览故事

在上一章中，我们了解到故事对应于离散的组件状态。本章将演示如何使用 Storybook 作为构建组件的工作坊。

侧边栏和画布

一个 *.stories.js 文件定义了组件的所有故事。每个故事都有一个相应的侧边栏项目。单击故事时，它会在画布中渲染一个隔离的预览 iframe。

通过单击侧边栏中的故事在故事之间导航。尝试使用侧边栏搜索按名称查找故事。

或者使用键盘快捷键。单击 Storybook 的菜单以查看可用的快捷键列表。

工具栏

Storybook 附带内置的省时工具。工具栏包含允许您调整故事在画布中渲染方式的工具

• 🔍 缩放会以视觉方式缩放组件，以便您可以检查详细信息。
• 🖼 背景会更改组件后面渲染的背景，以便您可以验证组件在不同视觉环境中的渲染方式。
• 📐 网格会在网格布局顶部渲染您的组件，以便您可以验证组件是否正确对齐。
• 📏 测量会切换测量叠加层，以帮助您检查组件的尺寸。
• 🎚️ 轮廓会显示组件的边界框，以便您可以验证组件是否正确定位。
• 📱 视窗会以各种尺寸和方向渲染组件。它非常适合检查组件的响应能力。

The “文档” 页面显示组件的自动生成文档（从源代码推断）。使用文档在与团队共享可重用组件时很有用，例如，在应用程序中。

工具栏是可自定义的。您可以使用 全局变量 快速切换主题和语言。或者从社区安装 Storybook 工具栏 附加组件 以启用高级工作流程。

附加组件

附加组件是扩展 Storybook 核心功能的插件。您可以在附加组件面板中找到它们，这是 Storybook UI 中画布下方的一个保留位置。每个选项卡都会显示附加组件为所选故事生成的元数据、日志或静态分析。

• 控件 允许您以动态方式与组件的 args（输入）进行交互。试验组件的不同配置，以发现边缘情况。
• 操作 通过回调帮助您验证交互会产生正确的输出。例如，如果您查看 Header 组件的“已登录”故事，我们可以验证单击“注销”按钮是否会触发 onLogout 回调，该回调将由使用 Header 的组件提供。
• 交互 为使用 play 函数调试 组件测试 提供一个有用的用户界面。
• 视觉测试 通过在 Storybook 中直接提供即时反馈，让您能够在本地开发环境中查明 UI 错误。

Storybook 是可扩展的。我们丰富的附加组件生态系统可以帮助您测试、记录和优化故事。您还可以创建附加组件以满足您的工作流程要求。在 附加组件部分 中了解更多信息。

在下一章中，我们将让您的组件在 Storybook 中渲染，以便您可以使用它来增强组件开发。

使用故事构建 UI

在构建应用程序时，最大的挑战之一是弄清楚您的代码库中是否已存在 UI 部分，以及如何将其用于您正在构建的新功能。

Storybook 会编目所有组件及其用例。因此，您可以快速浏览它以找到所需内容。

以下是工作流程的概况

• 🗃 使用侧边栏查找合适的组件
• 👀 查看其故事以选择适合您需求的变体
• 📝 将故事定义复制/粘贴到您的应用程序代码中并将其连接到数据

您可以从故事文件中访问故事定义，或者使用 Storysource 附加组件 或 文档附加组件 在已发布的 Storybook 中提供它。