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

CSS 资源

一个 Storybook 插件,可在运行时为你的故事切换 CSS 资源

在 Github 上查看

目录

入门

访问 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 资源
设计资产 在你的故事旁查看图片、视频和网页链接
docs 为你的组件添加高质量文档
events 交互式地向响应 EventEmitter 的组件触发事件
google-analytics 报告故事的 Google Analytics 数据
graphql 在 Storybook 故事中查询 GraphQL 服务器
jest 在 Storybook 中查看组件单元测试结果
links 在故事之间创建链接
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 演示的材料,例如标志、视频素材和我们使用的颜色,你可以在我们的品牌仓库中找到所有这些。

社区

贡献

随时欢迎对 Storybook 的贡献!

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

正在寻找第一个可以解决的问题?

  • 我们认为适合对代码库或一般开源项目不熟悉的人员的问题都会被标记 Good First Issue
  • 与我们交流,我们会找到适合你技能和学习兴趣的事情。

开发脚本

Storybook 以 monorepo(单仓库)形式组织。有用的脚本包括

yarn start

使用测试故事运行沙箱模板 Storybook

yarn task

同上,但提供了自定义沙箱的选项(例如,选择其他框架)

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

赞助商

成为赞助商,让你的标志和网站 URL 出现在我们 Github 的 README 上。[成为赞助商]

支持者

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

许可证

MIT

-结束-

制作人
  • igor-dv
    igor-dv
  • tmeasday
    tmeasday
  • hypnosphi
    hypnosphi
  • ndelangen
    ndelangen
  • shilman
    shilman
支持
    Angular
    Ember
    HTML
    Marko
    Mithril
    Preact
    Rax
    React
    Riot
    Svelte
    Vue
    Web Components
标签