目录
开始使用
访问 Storybook 官网 了解更多关于 Storybook 的信息并开始使用。
文档
文档可在 Storybook 的文档网站上找到。
示例
查看 组件百科全书，了解优秀团队如何使用 Storybook。
使用 storybook.new 在 Stackblitz 中快速创建一个示例项目。
Storybook 提供了许多用于组件设计、文档、测试、交互等方面的 插件。Storybook 的 API 使得以多种方式进行配置和扩展成为可能。它甚至已扩展到支持 React Native、Android、iOS 和 Flutter 等移动开发。
社区
如需额外帮助，请在仓库的 GitHub Discussions 中分享您的问题。
项目
支持的框架
| 渲染器 | 演示 | |
|---|---|---|
| React |  |
 |
| Angular |  |
 |
| Vue 3 |  |
 |
| Web components |  |
 |
| React Native |  |
 |
| HTML |  |
 |
| Ember |  |
 |
| Svelte |  |
 |
| Preact |  |
 |
| Qwik |  |
 |
| SolidJS |  |
 |
| Android, iOS, Flutter |  |
 |
插件
| 插件 | |
|---|---|
| a11y | 在 Storybook 中测试组件的用户可访问性 |
| actions | 记录用户在 Storybook UI 中与组件交互时的动作 |
| backgrounds | 允许用户在 Storybook UI 中选择背景 |
| cssresources | 动态添加/移除组件 iframe 的 CSS 资源 |
| design assets | 在 story 旁边查看图片、视频和网页链接 |
| docs | 为您的组件添加高质量文档 |
| events | 交互式地向响应 EventEmitter 的组件触发事件 |
| google-analytics | 报告 stories 的 Google Analytics 数据 |
| graphql | 在 Storybook stories 中查询 GraphQL 服务器 |
| jest | 在 Storybook 中查看组件单元测试的结果 |
| links | 在 stories 之间创建链接 |
| measure | 在 Storybook UI 中可视化检查布局和盒模型 |
| outline | 在 Storybook UI 中可视化调试 CSS 布局和对齐 |
| query params | 模拟查询参数 |
| viewport | 使用 Storybook 改变响应式组件的显示尺寸和布局 |
查看 插件 / 框架支持表
为了持续改进您的体验，我们最终不得不弃用或移除某些插件，以支持更新更好的工具。
如果您正在使用 info/notes，我们强烈建议您迁移到 docs，并且 这里有一份指南 可以帮助您。
如果您正在使用 contexts，我们强烈建议您迁移到 toolbars，并且 这里有一份指南 可以帮助您。
如果您正在使用 addon-storyshots，我们强烈建议您迁移到 Storybook 的 test-runner，并且 这里有一份指南 可以帮助您。
徽章与演示材料
我们有徽章！将其链接到您的实时 Storybook 示例。
[](link to site)
如果您正在寻找用于 Storybook 演示的材料，例如徽标、视频素材和我们使用的颜色，您可以在我们的 品牌仓库 中找到所有这些内容。
社区
- 通过 @storybookjs 发送推文
- 在 storybook.js.org 和 Medium 上撰写博客
- 在 Discord 上聊天
- 在 YouTube 上观看视频和直播
贡献
随时欢迎对 Storybook 的贡献！
正在寻找要解决的第一个问题吗？
- 我们将认为适合对代码库或一般开源软件新手的问题标记为
。 - 与我们交流，我们会找到适合您技能和学习兴趣的事情。
开发脚本
Storybook 是以 Monorepo 组织的项目。有用的脚本包括：
yarn start
运行带有测试故事的 sandbox 模板 Storybook
yarn task
同上，但为您提供了自定义 sandbox 的选项（例如选择其他框架）
yarn lint
布尔值检查代码是否符合 linting 规则 - 使用 remark 和 eslint
yarn lint:js- 检查 js 代码yarn lint:md- 检查 markdown + 代码示例yarn lint:js --fix- 自动修复 js 代码
yarn test
布尔值检查所有单元测试是否通过 - 使用 jest
yarn run test --core --watch- 将在 watch 模式下运行 core tests
赞助商
成为赞助商，即可在我们在 Github 上的 README 中显示您的徽标和网站 URL。[成为赞助商]
支持者
通过定期捐赠，您可以支持我们和我们的工作。[成为支持者]
许可协议
- 完 -
