目录
开始使用
访问 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 资源 |
设计资源 | 在您的 story 旁边查看图片、视频和网页链接 |
docs | 为您的组件添加高质量文档 |
events | 交互式地向响应 EventEmitter 的组件触发事件 |
google-analytics | 报告 stories 的 google analytics 数据 |
graphql | 在 Storybook stories 中查询 GraphQL 服务器 |
jest | 在 Storybook 中查看组件单元测试结果 |
links | 在 stories 之间创建链接 |
measure | 在 Storybook UI 中可视化检查布局和盒模型 |
outline | 在 Storybook UI 中可视化调试 CSS 布局和对齐 |
查询参数 | 模拟查询参数 |
viewport | 使用 Storybook 更改响应式组件的显示尺寸和布局 |
参阅 插件/框架支持表
为了持续改进您的体验,我们最终将弃用或移除某些插件,转而采用新的更优秀的工具。
如果您正在使用 info/notes,我们强烈建议您迁移到 docs 插件,这是一个迁移指南 可以帮助您。
如果您正在使用 contexts,我们强烈建议您迁移到 toolbars 插件,这是一个迁移指南 可以帮助您。
如果您正在使用 addon-storyshots,我们强烈建议您迁移到 Storybook test-runner,这是一个迁移指南 可以帮助您。
徽章与演示材料
我们有徽章!将其链接到您的实时 Storybook 示例。
[](link to site)
如果您正在寻找用于 Storybook 演示的素材,例如徽标、视频素材和我们使用的颜色,您可以在我们的 brand 仓库 中找到所有这些。
社区
- 通过 @storybookjs 发推
- 在 storybook.js.org 和 Medium 撰写博客
- 在 Discord 聊天
- 在 YouTube 观看视频和直播
贡献
随时欢迎对 Storybook 的贡献!
寻找第一个着手解决的问题?
- 我们使用
标记问题,当我们认为它们非常适合刚接触代码库或开源软件(OSS)的新人时。
- 联系我们,我们会找到适合您技能和学习兴趣的内容。
开发脚本
Storybook 是一个 Monorepo 组织。有用的脚本包括:
yarn start
运行带有测试 stories 的 sandbox 模板 Storybook
yarn task
同上,但提供自定义 sandbox 的选项(例如选择其他框架)
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 模式下运行核心测试
赞助商
成为赞助商,即可在我们在 Github 上的 README 中显示您的徽标和网站 URL。 [成为赞助商]
支持者
通过定期捐赠,您可以支持我们和我们的工作。 [成为支持者]
许可证
-结束-