加入直播:周四,美国东部时间上午 11 点,Storybook 9 发布及问答

空包 - 请不要再使用它

在 Github 上查看

目录

开始使用

访问 Storybook 官网 以了解更多关于 Storybook 并开始使用。

文档

文档可以在 Storybook 文档网站 上找到。

示例

查看 组件百科全书,了解优秀团队如何使用 Storybook。

使用 storybook.new 在 Stackblitz 中快速创建示例项目。

Storybook 提供了许多用于组件设计、文档、测试、交互等的 插件。Storybook 的 API 可以通过多种方式进行配置和扩展。它甚至已被扩展,支持 React Native、Android、iOS 和 Flutter 等移动开发。

社区

如需额外帮助,请在 仓库的 GitHub Discussions 中分享您的问题。

项目

支持的框架

渲染器 演示
React Storybook demo React
Angular Storybook demo Angular
Vue 3 Storybook demo Vue 3
Web Components Storybook demo Svelte
React Native React Native
HTML Storybook demo HTML
Ember Ember
Svelte Storybook demo Svelte
Preact Storybook demo Preact
Qwik Qwik
SolidJS SolidJS
Android, iOS, Flutter Native

插件

插件
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 示例。

Storybook

[![Storybook](https://cdn.jsdelivr.net.cn/gh/storybookjs/brand@main/badge/badge-storybook.svg)](link to site)

如果您正在寻找用于 Storybook 演示的素材,例如徽标、视频素材和我们使用的颜色,您可以在我们的 brand 仓库 中找到所有这些。

社区

贡献

随时欢迎对 Storybook 的贡献!

  • 📥 Pull requests 和 🌟 Stars 随时欢迎。
  • 阅读我们的 贡献指南 开始,或在 Discord 上找到我们,我们会花时间指导您。

寻找第一个着手解决的问题?

  • 我们使用 适合初学者的问题 标记问题,当我们认为它们非常适合刚接触代码库或开源软件(OSS)的新人时。
  • 联系我们,我们会找到适合您技能和学习兴趣的内容。

开发脚本

Storybook 是一个 Monorepo 组织。有用的脚本包括:

yarn start

运行带有测试 stories 的 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 模式下运行核心测试

赞助商

成为赞助商,即可在我们在 Github 上的 README 中显示您的徽标和网站 URL。 [成为赞助商]

支持者

通过定期捐赠,您可以支持我们和我们的工作。 [成为支持者]

许可证

MIT

-结束-

制作者
  • ndelangen
    ndelangen
  • shilman
    shilman
  • tmeasday
    tmeasday
  • ghengeveld
    ghengeveld
  • winkervsbecks
    winkervsbecks
  • yannbf
    yannbf