浏览 Stories

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

侧边栏和画布

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

通过点击侧边栏中的 stories 在它们之间进行导航。尝试使用侧边栏搜索按名称查找 story。

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

工具栏

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

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

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

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

插件

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

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

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

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

使用 stories 构建 UI

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

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

以下是工作流程的样子

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

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