目录
入门
访问 Storybook 官网了解更多信息并开始使用。
文档
文档可在 Storybook 的文档网站上找到。
示例
查看 组件百科 (Component Encyclopedia),了解领先团队如何使用 Storybook。
使用 storybook.new 在 Stackblitz 中快速创建一个示例项目。
Storybook 附带了许多插件,用于组件设计、文档、测试、交互等方面。Storybook 的 API 可以通过各种方式进行配置和扩展。它甚至已被扩展,以支持 React Native、Android、iOS 和 Flutter 等移动开发。
社区
如需更多帮助,请加入 Storybook Discord 频道。
项目
支持的框架
渲染器 | 演示 | |
---|---|---|
React | ||
Angular | ||
Vue | ||
Web components | ||
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 | 在你的 story 旁边查看图片、视频和网页链接 |
docs | 为你的组件添加高质量文档 |
events | 以交互方式向响应 EventEmitter 的组件触发事件 |
google-analytics | 报告 stories 的谷歌分析数据 |
graphql | 在 Storybook stories 中查询 GraphQL 服务器 |
jest | 在 Storybook 中查看组件的单元测试结果 |
links | 创建 stories 之间的链接 |
measure | 在 Storybook UI 中可视化检查布局和盒模型 |
outline | 在 Storybook UI 中可视化调试 CSS 布局和对齐 |
query params | 模拟查询参数 |
storyshots | 在 Storybook 中对组件进行快照测试 |
storysource | 在 Storybook UI 中查看你的 stories 代码 |
viewport | 使用 Storybook 更改显示尺寸和布局以适应响应式组件 |
查看 插件 / 框架支持表
已弃用插件
插件 | |
---|---|
contexts | 用于在动态上下文中驱动组件的插件 |
info | 为 stories 添加额外的组件用法信息 |
knobs | 在 Storybook UI 中以交互方式编辑组件 props 数据 |
notes | 为 Storybook stories 添加备注 |
options | 通过代码自定义 Storybook UI |
为了持续改进你的体验,我们最终不得不弃用某些插件,转而推荐使用更新更好的工具。
如果你正在使用 info/notes,强烈建议迁移到 docs,这里有一份指南可以帮助你。
如果你正在使用 contexts,强烈建议迁移到 toolbars,这里有一份指南可以帮助你。
徽章与演示材料
我们提供徽章!将其链接到你的 Storybook 实时示例。
[](link to site)
如果你正在寻找用于 Storybook 演示的材料,例如标志、视频素材以及我们使用的颜色,你可以在我们的 品牌仓库 (brand repo) 中找到所有内容。
社区
- 通过 @storybookjs 发推文
- 在 storybook.js.org 和 Medium 发表博客
- 在 Discord 聊天
- 在 YouTube 上观看视频和直播
贡献
随时欢迎为 Storybook 做出贡献!
正在寻找第一个可以解决的问题?
- 我们将标记为
的问题视为非常适合初次接触此代码库或开源项目的新手。
- 与我们交流,我们会找到适合你技能和学习兴趣的事情。
开发脚本
Storybook 使用 Lerna 组织为 monorepo。有用的脚本包括
yarn start
运行带有测试 stories 的沙盒模板 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 上。 [成为赞助商]
支持者
通过定期捐赠,你可以支持我们及我们的工作。 [成为支持者]
许可
- 结束 -