框架特性支持
Storybook 集成许多流行的前端框架。我们尽力在各框架之间保持特性一致性,但对于我们这个规模不大的团队来说,支持所有框架是很棘手的。
下表全面列出了各框架集成支持的特性。如果您希望在您使用的框架中支持某个特定特性,我们非常欢迎您的拉取请求 (pull requests)。
核心框架
核心框架有专门的维护者或贡献者负责维护集成。因此,您可以在这些框架中使用大部分 Storybook 特性。
React | Vue 3 | Angular | Web Components | |
---|---|---|---|---|
核心插件 (Essentials) | ||||
动作 (Actions) | ✅ | ✅ | ✅ | ✅ |
背景 (Backgrounds) | ✅ | ✅ | ✅ | ✅ |
控件 (Controls) | ✅ | ✅ | ✅ | ✅ |
交互 (Interactions) | ✅ | ✅ | ✅ | ✅ |
度量 (Measure) | ✅ | ✅ | ✅ | ✅ |
轮廓 (Outline) | ✅ | ✅ | ✅ | ✅ |
视口 (Viewport) | ✅ | ✅ | ✅ | ✅ |
插件 (Addons) | ||||
可访问性 (A11y) | ✅ | ✅ | ✅ | ✅ |
文档 | ✅ | ✅ | ✅ | ✅ |
测试运行器 (Test runner) | ✅ | ✅ | ✅ | ✅ |
测试覆盖率 | ✅ | ✅ | ✅ | ✅ |
CSS 资源 | ✅ | ✅ | ✅ | ✅ |
设计资产 | ✅ | ✅ | ✅ | ✅ |
事件 (Events) | ✅ | ✅ | ✅ | ✅ |
Google analytics | ✅ | ✅ | ✅ | ✅ |
GraphQL | ✅ | ✅ | ||
Jest | ✅ | ✅ | ✅ | ✅ |
链接 (Links) | ✅ | ✅ | ✅ | ✅ |
查询参数 (Queryparams) | ✅ | ✅ | ✅ | ✅ |
文档 | ||||
CSF 故事 | ✅ | ✅ | ✅ | ✅ |
自动文档 (Autodocs) | ✅ | ✅ | ✅ | ✅ |
Doc Blocks - ArgTypes | ✅ | ✅ | ✅ | ✅ |
Doc Blocks - Canvas | ✅ | ✅ | ✅ | ✅ |
Doc Blocks - ColorPalette | ✅ | ✅ | ✅ | ✅ |
Doc Blocks - Controls | ✅ | ✅ | ✅ | ✅ |
Doc Blocks - Description | ✅ | ✅ | ✅ | ✅ |
Doc Blocks - IconGallery | ✅ | ✅ | ✅ | ✅ |
Doc Blocks - Markdown | ✅ | ✅ | ✅ | ✅ |
Doc Blocks - Meta | ✅ | ✅ | ✅ | ✅ |
Doc Blocks - Primary | ✅ | ✅ | ✅ | ✅ |
Doc Blocks - Source | ✅ | ✅ | ✅ | ✅ |
Doc Blocks - Story | ✅ | ✅ | ✅ | ✅ |
Doc Blocks - Stories | ✅ | ✅ | ✅ | ✅ |
Doc Blocks - Subtitle | ✅ | ✅ | ✅ | ✅ |
Doc Blocks - Title | ✅ | ✅ | ✅ | ✅ |
Doc Blocks - Typeset | ✅ | ✅ | ✅ | ✅ |
Doc Blocks - Unstyled | ✅ | ✅ | ✅ | ✅ |
Doc Blocks - UseOf | ✅ | ✅ | ✅ | ✅ |
内联故事 (Inline stories) | ✅ | ✅ | ✅ | ✅ |
社区框架
社区框架的贡献者较少,这意味着它们可能不如核心框架那样及时更新。如果您在工作中使用这些框架之一,请考虑为其与 Storybook 的集成做出贡献。
Ember | HTML | Svelte | Preact | Qwik | SolidJS | |
---|---|---|---|---|---|---|
核心插件 (Essentials) | ||||||
动作 (Actions) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
背景 (Backgrounds) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
控件 (Controls) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
交互 (Interactions) | ✅ | ✅ | ✅ | ✅ | ✅ | |
度量 (Measure) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
轮廓 (Outline) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
视口 (Viewport) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
插件 (Addons) | ||||||
可访问性 (A11y) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
文档 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
测试运行器 (Test runner) | ✅ | ✅ | ✅ | ✅ | ✅ | |
测试覆盖率 | ✅ | ✅ | ✅ | ✅ | ✅ | |
CSS 资源 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
设计资产 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
事件 (Events) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
Google analytics | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
GraphQL | ||||||
Jest | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
链接 (Links) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
查询参数 (Queryparams) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
文档 | ||||||
CSF 故事 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
自动文档 (Autodocs) | ✅ | ✅ | ✅ | ✅ | ✅ | |
Doc Blocks - ArgTypes | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
Doc Blocks - Canvas | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
Doc Blocks - ColorPalette | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
Doc Blocks - Controls | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
Doc Blocks - Description | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
Doc Blocks - IconGallery | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
Doc Blocks - Markdown | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
Doc Blocks - Meta | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
Doc Blocks - Primary | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
Doc Blocks - Source | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
Doc Blocks - Story | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
Doc Blocks - Stories | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
Doc Blocks - Subtitle | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
Doc Blocks - Title | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
Doc Blocks - Typeset | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
Doc Blocks - Unstyled | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
Doc Blocks - UseOf | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
内联故事 (Inline stories) | ✅ | ✅ |
已弃用
为了使 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 配置项代替。 |