目录
入门
访问Storybook 网站以了解有关 Storybook 的更多信息并开始使用。
文档
文档可以在Storybook 文档网站上找到。
示例
查看组件百科全书，了解领先团队如何使用 Storybook。
使用storybook.new在 Stackblitz 中快速创建示例项目。
Storybook 附带了许多用于组件设计、文档、测试、交互性等的附加组件。Storybook 的 API 使以各种方式配置和扩展成为可能。它甚至已扩展到支持 React Native、Android、iOS 和 Flutter 移动开发。
社区
要获得更多帮助，请加入我们Storybook Discord。
项目
支持的框架
| 渲染器 | 演示 | |
|---|---|---|
| React |  |
 |
| Angular |  |
 |
| Vue |  |
 |
| Web 组件 |  |
 |
| React Native |  |
 |
| HTML |  |
 |
| Ember |  |
 |
| Svelte |  |
 |
| Preact |  |
 |
| Marionette.js |  |
 |
| Qwik |  |
 |
| SolidJS |  |
 |
| Android、iOS、Flutter |  |
 |
附加组件
| 附加组件 | |
|---|---|
| a11y | 在 Storybook 中测试组件的用户可访问性 |
| actions | 在用户与 Storybook UI 中的组件交互时记录操作 |
| backgrounds | 允许用户在 Storybook UI 中选择背景 |
| cssresources | 动态地向组件 iframe 添加/删除 CSS 资源 |
| design assets | 在故事旁边查看图像、视频和 Web 链接 |
| docs | 为您的组件添加高质量文档 |
| events | 交互式地向响应 EventEmitter 的组件触发事件 |
| google-analytics | 报告故事的 Google Analytics |
| graphql | 在 Storybook 故事中查询 GraphQL 服务器 |
| jest | 在 Storybook 中查看组件单元测试的结果 |
| links | 在故事之间创建链接 |
| measure | 在 Storybook UI 中直观地检查布局和框模型 |
| outline | 在 Storybook UI 中直观地调试 CSS 布局和对齐方式 |
| query params | 模拟查询参数 |
| storyshots | Storybook 中组件的快照测试 |
| storysource | 在 Storybook UI 中查看故事的代码 |
| viewport | 使用 Storybook 更改响应式组件的显示大小和布局 |
已弃用的附加组件
| 附加组件 | |
|---|---|
| contexts | 用于在动态上下文中驱动组件的附加组件 |
| info | 使用额外的组件使用信息来注释故事 |
| knobs | 在 Storybook UI 中交互式地编辑组件属性数据 |
| notes | 使用注释来注释 Storybook 故事 |
| options | 在代码中自定义 Storybook UI |
为了不断改进您的体验，我们必须最终弃用某些附加组件，转而使用新的更好的工具。
如果您使用 info/notes，我们强烈建议您迁移到docs，此处有指南可帮助您。
如果您使用 contexts，我们强烈建议您迁移到toolbars，此处有指南可帮助您。
徽章和演示材料
我们有一个徽章！将其链接到您的实时 Storybook 示例。
[](link to site)
如果您正在寻找用于 Storybook 演示的材料，例如徽标、视频材料和我们使用的颜色，您可以在我们的品牌仓库中找到所有内容。
社区
- 通过@storybookjs 推特
- 在storybook.js.org 和Medium 上发博客
- 在Discord 上聊天
- 在YouTube 上观看视频和直播
贡献
欢迎对 Storybook 的任何贡献！
正在寻找第一个要处理的问题吗？
- 当我们认为这些问题非常适合不熟悉代码库或 OSS 的人时，我们会用
标记问题。 - 与我们交谈，我们会找到适合您的技能和学习兴趣的东西。
开发脚本
Storybook 使用Lerna 作为单一仓库进行组织。有用的脚本包括
yarn start
运行带有测试故事的沙盒模板 storybook
yarn task
与上面一样，但允许您自定义沙盒（例如，选择其他框架）
yarn lint
布尔值检查代码是否符合 linting 规则 - 使用 remark 和 eslint
yarn lint:js- 将检查 jsyarn lint:md- 将检查 markdown 和代码示例yarn lint:js --fix- 将自动修复 js
yarn test
布尔值检查所有单元测试是否通过 - 使用 jest
yarn run test --core --watch- 将在监视模式下运行核心测试
赞助商
成为赞助商，您的徽标和网站 URL 将出现在我们 Github 上的 README 中。[成为赞助商]
支持者
通过定期捐赠，您可以支持我们和我们的工作。[成为支持者]
许可证
- 结束 -
