浏览故事
上一章，我们了解到故事对应着组件的离散状态。本章将演示如何使用 Storybook 作为构建组件的工作坊。
侧边栏和 Canvas
*.stories.js|ts|svelte 文件定义了组件的所有故事。每个故事都有一个相应的侧边栏项。当你点击一个故事时，它会在 Canvas 中渲染一个独立的预览 iframe。
通过点击侧边栏中的故事来导航。尝试使用侧边栏搜索按名称查找故事。
或者使用键盘快捷键。点击 Storybook 的菜单查看可用的快捷键列表。
工具栏
Storybook 内置了节省时间的工具。工具栏包含了允许你调整故事在 Canvas 中如何渲染的工具
- 🔍 缩放 可视化地缩放组件，以便你可以检查细节。
- 🖼 背景 更改组件背后的渲染背景，以便你可以验证组件在不同视觉上下文中的渲染效果。
- 📐 网格 在网格布局之上渲染你的组件，以便你可以验证组件是否正确对齐。
- 📏 测量 切换测量叠加层，帮助你检查组件的尺寸。
- 🎚️ 轮廓 显示组件的边界框，以便你可以验证组件是否正确定位。
- 📱 视口 在各种尺寸和方向上渲染组件。它是检查组件响应性的理想工具。
“文档”页面显示组件的自动生成文档（从源代码推断）。在使用可复用组件并与团队分享时，使用文档会非常有用，例如在应用程序中。
工具栏是可定制的。你可以使用全局变量快速切换主题和语言。或者安装社区提供的 Storybook 工具栏插件，以启用高级工作流程。
插件
插件是扩展 Storybook 核心功能的插件。你可以在插件面板中找到它们，这是 Storybook UI 在 Canvas 下方的一个保留区域。每个选项卡都显示插件为选定故事生成的元数据、日志或静态分析结果。
- 控件 允许你动态地与组件的 args（输入）进行交互。通过尝试组件的不同配置来发现边缘情况。
- 动作 帮助你通过回调函数验证交互是否产生正确的输出。例如，如果你查看 Header 组件的“已登录”故事，我们可以验证点击“注销”按钮是否会触发
onLogout回调，该回调由使用 Header 的组件提供。 - 交互 提供了一个有用的用户界面，用于调试与play 函数相关的交互测试。
- 可访问性 帮助你识别组件中的可访问性违规问题。
- 视觉测试 允许你通过在 Storybook 中直接提供即时反馈来定位本地开发环境中的 UI 错误。
Storybook 是可扩展的。我们丰富的插件生态系统帮助你测试、文档化和优化你的故事。你也可以创建插件来满足你的工作流程需求。在插件部分阅读更多内容。
在下一章中，我们将让你的组件在 Storybook 中渲染，这样你就可以利用它来加速组件开发。
使用故事构建 UI
在构建应用程序时，最大的挑战之一是弄清楚你的代码库中是否已存在某个 UI 部分，以及如何将其用于你正在构建的新功能。
Storybook 收录了你的所有组件及其用例。因此，你可以快速浏览它来找到你需要的东西。
工作流程如下：
- 🗃 使用侧边栏找到合适的组件
- 👀 查看其故事以选择适合你需求的变体
- 📝 将故事定义复制/粘贴到你的应用程序代码中，并将其与数据连接
你可以从故事文件中访问故事定义，或者使用文档插件使其在你发布的 Storybook 中可用。
