浏览 Story

上一章，我们学习了 story 对应于离散的组件状态。本章演示如何使用 Storybook 作为构建组件的工作室。

侧边栏和画布

一个 *.stories.js|ts|svelte 文件定义了组件的所有 story。每个 story 都有一个对应的侧边栏项目。当您点击一个 story 时，它会在画布中渲染一个独立的预览 iframe。

通过点击侧边栏中的 story 来在 story 之间导航。尝试侧边栏搜索以按名称查找 story。

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

工具栏

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

• 🔍 缩放可以视觉上缩放组件，以便您可以检查细节。
• 🖼 背景更改组件后面渲染的背景，以便您可以验证组件在不同视觉上下文中的渲染效果。
• 📐 网格在网格布局之上渲染您的组件，以便您可以验证组件是否正确对齐。
• 📏 测量切换测量覆盖层，以帮助您检查组件的尺寸。
• 🎚️ 轮廓显示组件的边界框，以便您可以验证组件是否正确定位。
• 📱 视口以各种尺寸和方向渲染组件。它是检查组件响应性的理想选择。

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

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

插件

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

• Controls 允许您动态地与组件的 args（输入）进行交互。尝试组件的替代配置以发现边缘情况。
• Actions 帮助您验证交互是否通过回调产生正确的输出。例如，如果您查看 Header 组件的“已登录” story，我们可以验证点击“注销”按钮是否触发了 onLogout 回调，该回调将由使用 Header 的组件提供。
• Interactions 为使用 play 函数调试 组件测试 提供了一个有用的用户界面。
• Visual Tests 让您通过在 Storybook 中直接提供即时反馈，在本地开发环境中精确定位 UI 错误。

Storybook 是可扩展的。我们丰富的插件生态系统可帮助您测试、记录和优化您的 story。您还可以创建插件以满足您的工作流程要求。在插件部分阅读更多内容。

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

使用 story 构建 UI

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

Storybook 对您的所有组件及其用例进行编目。因此，您可以快速浏览它以找到您要查找的内容。

工作流程如下所示

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

您可以从 story 文件访问 story 定义，或者使用 Storysource 插件 或 Docs 插件 在您发布的 Storybook 中使其可用。