框架功能支持
Storybook 集成了许多流行的前端框架。我们尽力在各个框架之间保持功能对等,但对于我们这个小团队来说,支持每个框架都非常困难。
下表详细列出了每个框架集成所支持的功能。如果您希望您使用的框架支持某些功能,我们非常欢迎您提交拉取请求。
核心框架
核心框架拥有专门的维护者或贡献者负责维护集成。因此,您可以在这些框架中使用大多数 Storybook 功能。
| React | Vue 3 | Angular | Web Components | |
|---|---|---|---|---|
| 核心功能 | ||||
| Actions | ✅ | ✅ | ✅ | ✅ |
| Backgrounds | ✅ | ✅ | ✅ | ✅ |
| Controls | ✅ | ✅ | ✅ | ✅ |
| 交互 | ✅ | ✅ | ✅ | ✅ |
| 测量 | ✅ | ✅ | ✅ | ✅ |
| 轮廓 | ✅ | ✅ | ✅ | ✅ |
| Viewport | ✅ | ✅ | ✅ | ✅ |
| 插件 | ||||
| 可访问性 | ✅ | ✅ | ✅ | ✅ |
| 文档 | ✅ | ✅ | ✅ | ✅ |
| 测试运行器 | ✅ | ✅ | ✅ | ✅ |
| 测试覆盖率 | ✅ | ✅ | ✅ | ✅ |
| CSS 资源 | ✅ | ✅ | ✅ | ✅ |
| 设计资产 | ✅ | ✅ | ✅ | ✅ |
| 事件 | ✅ | ✅ | ✅ | ✅ |
| Google Analytics | ✅ | ✅ | ✅ | ✅ |
| GraphQL | ✅ | ✅ | ||
| Jest | ✅ | ✅ | ✅ | ✅ |
| 链接 | ✅ | ✅ | ✅ | ✅ |
| 查询参数 | ✅ | ✅ | ✅ | ✅ |
| 文档 | ||||
| CSF Stories | ✅ | ✅ | ✅ | ✅ |
| 自动文档 | ✅ | ✅ | ✅ | ✅ |
| 文档块 - ArgTypes | ✅ | ✅ | ✅ | ✅ |
| 文档块 - Canvas | ✅ | ✅ | ✅ | ✅ |
| 文档块 - ColorPalette | ✅ | ✅ | ✅ | ✅ |
| 文档块 - Controls | ✅ | ✅ | ✅ | ✅ |
| 文档块 - Description | ✅ | ✅ | ✅ | ✅ |
| 文档块 - IconGallery | ✅ | ✅ | ✅ | ✅ |
| 文档块 - Markdown | ✅ | ✅ | ✅ | ✅ |
| 文档块 - Meta | ✅ | ✅ | ✅ | ✅ |
| 文档块 - Primary | ✅ | ✅ | ✅ | ✅ |
| 文档块 - Source | ✅ | ✅ | ✅ | ✅ |
| 文档块 - Story | ✅ | ✅ | ✅ | ✅ |
| 文档块 - Stories | ✅ | ✅ | ✅ | ✅ |
| 文档块 - Subtitle | ✅ | ✅ | ✅ | ✅ |
| 文档块 - Title | ✅ | ✅ | ✅ | ✅ |
| 文档块 - Typeset | ✅ | ✅ | ✅ | ✅ |
| 文档块 - Unstyled | ✅ | ✅ | ✅ | ✅ |
| 文档块 - UseOf | ✅ | ✅ | ✅ | ✅ |
| 内联故事 | ✅ | ✅ | ✅ | ✅ |
社区框架
社区框架的贡献者较少,这意味着它们可能不像核心框架那样最新。如果您在工作中使用了这些框架之一,请考虑为 Storybook 集成做出贡献。
| Ember | HTML | Svelte | Preact | Qwik | SolidJS | |
|---|---|---|---|---|---|---|
| 核心功能 | ||||||
| Actions | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| Backgrounds | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| Controls | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| 交互 | ✅ | ✅ | ✅ | ✅ | ✅ | |
| 测量 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| 轮廓 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| Viewport | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| 插件 | ||||||
| 可访问性 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| 文档 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| 测试运行器 | ✅ | ✅ | ✅ | ✅ | ✅ | |
| 测试覆盖率 | ✅ | ✅ | ✅ | ✅ | ✅ | |
| CSS 资源 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| 设计资产 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| 事件 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| Google Analytics | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| GraphQL | ||||||
| Jest | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| 链接 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| 查询参数 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| 文档 | ||||||
| CSF Stories | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| 自动文档 | ✅ | ✅ | ✅ | ✅ | ✅ | |
| 文档块 - ArgTypes | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| 文档块 - Canvas | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| 文档块 - ColorPalette | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| 文档块 - Controls | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| 文档块 - Description | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| 文档块 - IconGallery | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| 文档块 - Markdown | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| 文档块 - Meta | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| 文档块 - Primary | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| 文档块 - Source | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| 文档块 - Story | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| 文档块 - Stories | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| 文档块 - Subtitle | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| 文档块 - Title | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| 文档块 - Typeset | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| 文档块 - Unstyled | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| 文档块 - UseOf | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| 内联故事 | ✅ | ✅ |
已弃用
为了使 Storybook 生态系统与前端开发的当前状态保持一致,以下功能和插件现已弃用,不再维护,并将在未来的 Storybook 版本中移除。
| 功能 | 状态 |
|---|---|
| Knobs | Knobs 插件在 Storybook 6.3 发布时被正式弃用,不再积极维护。我们建议使用 controls 代替。 |
| Storyshots | Storyshots 插件在 Storybook 7.6 发布时被正式弃用,不再积极维护,并在 Storybook 8 中被移除。请参阅 迁移指南 以获取可用替代方案。 |
| StoriesOf | storiesOf API 在 Storybook 8 发布时被正式移除,不再维护。我们建议使用 CSF API 来编写故事。请参阅 迁移指南 了解更多信息。 |
| Storysource | Storysource 插件在 Storybook 9 发布时被正式移除,不再维护。要显示故事的源代码,我们建议使用 codePanel 参数代替。 |
