如何使用 Storybook 作为构建组件的工作区。
侧边栏和 Canvas（画布）
*.stories.ts 文件定义了一个组件的所有故事。
每个故事都有一个相应的侧边栏项目。
当单击一个故事时，它会在 Canvas 中呈现一个独立的预览 iframe。
通过单击侧栏中的故事在故事之间导航。 尝试侧边栏搜索以按名称查找故事。
或者使用键盘快捷键。 单击 Storybook 的菜单以查看可用的快捷方式列表。
Toolbar（工具栏）
Storybook 附带了内置的省时工具。 工具栏包含调整故事在画布中呈现方式的工具：
-
🔍 直观地缩放组件，以便检查细节。
-
🖼 更改组件背后的渲染背景，以便验证组件在不同视觉上下文中的渲染方式。
-
📱 以各种尺寸和方向呈现组件。 它非常适合检查组件的响应能力。
- Docs 选项卡显示有关组件的自动生成的文档（从源代码推断）。
使用文档在与团队共享可重用组件时很有帮助，例如，在设计系统或组件库中。
工具栏是可定制的。 可以使用全局变量来快速切换主题和语言。 或者从社区安装 Storybook 工具栏插件以启用高级工作流程。
Addons（插件）
插件是扩展 Storybook 核心功能的插件。
可以在插件面板中找到它们，这是画布下方 Storybook UI 中的一个保留位置。
每个选项卡都显示插件为所选故事生成的元数据、日志或静态分析。
-
Controls 动态地与组件的 args（输入）交互。
尝试使用组件的替代配置来发现边缘情况。 -
Actions 验证交互通过回调产生正确的输出。
例如，如果查看 Header 组件的 Login 故事，可以验证单击 Logout 按钮会触发 onLogout 回调，该回调将由使用 Header 的组件提供。
Storybook 是可扩展的。
丰富的插件生态系统可帮助测试、记录和优化故事。
还可以创建一个插件来满足工作流程要求。 在插件部分阅读更多内容。