加入直播会话:美国东部夏令时周四上午 11 点,Storybook 9 发布及 AMA

空包 - 请勿再使用

在 Github 上查看

目录

入门

访问Storybook 的网站,了解更多关于 Storybook 的信息并开始使用。

文档

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

示例

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

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

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

社区

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

项目

支持的框架

渲染器 (Renderer) 演示
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

插件 (Addons)

插件 (Addons)
a11y 在 Storybook 中测试组件的用户可访问性
actions 用户在 Storybook UI 中与组件交互时记录操作
backgrounds 允许用户在 Storybook UI 中选择背景
cssresources 动态地向组件 iframe 添加/删除 CSS 资源
设计资产 (design assets) 在你的故事旁边查看图像、视频和网页链接
docs 为你的组件添加高质量的文档
events 交互式地触发响应 EventEmitter 的组件事件
google-analytics 报告故事的 google analytics 数据
graphql 在 Storybook 故事中查询 GraphQL 服务器
jest 在 Storybook 中查看组件单元测试结果
links 在故事之间创建链接
measure 在 Storybook UI 中直观检查布局和盒模型
outline 在 Storybook UI 中直观调试 CSS 布局和对齐
query params 模拟查询参数
viewport 使用 Storybook 更改响应式组件的显示尺寸和布局

请参阅插件 / 框架支持表

为了持续改进用户体验,我们最终不得不弃用或移除某些插件 (addons),转而支持新的、更好的工具。

如果你正在使用 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) 和 🌟 星标 (Stars) 永远受欢迎。
  • 阅读我们的贡献指南开始,或者在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

-完结-

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