加入直播会议:美国东部时间周四上午 11 点,Storybook 9 发布与 AMA
文档
Storybook Docs

浏览故事

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

*.stories.js|ts|svelte 文件定义了组件的所有故事。每个故事都有一个相应的侧边栏项。当你点击一个故事时,它会在 Canvas 中渲染一个独立的预览 iframe。

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

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

Storybook keyboard shortcuts examples

工具栏

Storybook 内置了节省时间的工具。工具栏包含了允许你调整故事在 Canvas 中如何渲染的工具

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

“文档”页面显示组件的自动生成文档(从源代码推断)。在使用可复用组件并与团队分享时,使用文档会非常有用,例如在应用程序中。

Storybook keyboard shortcuts examples

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

插件

插件是扩展 Storybook 核心功能的插件。你可以在插件面板中找到它们,这是 Storybook UI 在 Canvas 下方的一个保留区域。每个选项卡都显示插件为选定故事生成的元数据、日志或静态分析结果。

Storybook addon examples

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

Storybook 是可扩展的。我们丰富的插件生态系统帮助你测试、文档化和优化你的故事。你也可以创建插件来满足你的工作流程需求。在插件部分阅读更多内容。

在下一章中,我们将让你的组件在 Storybook 中渲染,这样你就可以利用它来加速组件开发。

使用故事构建 UI

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

Storybook 收录了你的所有组件及其用例。因此,你可以快速浏览它来找到你需要的东西。

工作流程如下:

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

你可以从故事文件中访问故事定义,或者使用文档插件使其在你发布的 Storybook 中可用。

Docblock source