目录
入门
访问Storybook 的网站,了解更多关于 Storybook 的信息并开始使用。
文档
文档可在Storybook 的文档网站上找到。
示例
查看组件百科全书,了解顶尖团队如何使用 Storybook。
使用storybook.new在 Stackblitz 中快速创建一个示例项目。
Storybook 提供了许多插件 (addons),用于组件设计、文档、测试、交互等方面。Storybook 的 API 使得通过各种方式进行配置和扩展成为可能。它甚至被扩展到支持 React Native、Android、iOS 和 Flutter 的移动开发。
社区
如需额外帮助,请在仓库的 GitHub Discussions 中分享您的问题。
项目
支持的框架
渲染器 (Renderer) | 演示 | |
---|---|---|
React | ||
Angular | ||
Vue 3 | ||
Web components | ||
React Native | ||
HTML | ||
Ember | ||
Svelte | ||
Preact | ||
Qwik | ||
SolidJS | ||
Android, iOS, Flutter |
插件 (Addons)
插件 (Addons) | |
---|---|
a11y | 在 Storybook 中测试组件的用户可访问性 |
actions | 用户在 Storybook UI 中与组件交互时记录操作 |
backgrounds | 允许用户在 Storybook UI 中选择背景 |
cssresources | 动态地向组件 iframe 添加/删除 CSS 资源 |
设计资产 (design assets) | 在你的故事旁边查看图像、视频和网页链接 |
docs | 为你的组件添加高质量的文档 |
events | 交互式地触发响应 EventEmitter 的组件事件 |
google-analytics | 报告故事的 google analytics 数据 |
graphql | 在 Storybook 故事中查询 GraphQL 服务器 |
jest | 在 Storybook 中查看组件单元测试结果 |
links | 在故事之间创建链接 |
measure | 在 Storybook UI 中直观检查布局和盒模型 |
outline | 在 Storybook UI 中直观调试 CSS 布局和对齐 |
query params | 模拟查询参数 |
viewport | 使用 Storybook 更改响应式组件的显示尺寸和布局 |
请参阅插件 / 框架支持表
为了持续改进用户体验,我们最终不得不弃用或移除某些插件 (addons),转而支持新的、更好的工具。
如果你正在使用 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
运行一个带有测试故事的沙盒模板 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
- 将在 watch 模式下运行核心测试
赞助商
成为赞助商,你的徽标和网站 URL 将出现在我们在 Github 的 README 上。 [成为赞助商]
支持者
通过定期捐款,你可以支持我们和我们的工作。 [成为支持者]
许可证
-完结-