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

无障碍功能

测试组件对网页无障碍标准的符合性

在 Github 上查看

目录

入门

访问 Storybook 官网了解更多信息并开始使用。

文档

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

示例

查看 组件百科 (Component Encyclopedia),了解领先团队如何使用 Storybook。

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

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

社区

如需更多帮助,请加入 Storybook Discord 频道

项目

支持的框架

渲染器 演示
React Storybook demo React
Angular Storybook demo Angular
Vue Storybook demo Vue
Web components Storybook demo Svelte
React Native React Native
HTML Storybook demo HTML
Ember Ember
Svelte Storybook demo Svelte
Preact Storybook demo Preact
Marionette.js Marionette.js
Qwik Qwik
SolidJS SolidJS
Android, iOS, Flutter Native

插件

插件
a11y 在 Storybook 中测试组件的用户无障碍功能
actions 当用户在 Storybook UI 中与组件交互时记录操作
backgrounds 允许用户在 Storybook UI 中选择背景
cssresources 动态地向组件 iframe 添加/移除 CSS 资源
design assets 在你的 story 旁边查看图片、视频和网页链接
docs 为你的组件添加高质量文档
events 以交互方式向响应 EventEmitter 的组件触发事件
google-analytics 报告 stories 的谷歌分析数据
graphql 在 Storybook stories 中查询 GraphQL 服务器
jest 在 Storybook 中查看组件的单元测试结果
links 创建 stories 之间的链接
measure 在 Storybook UI 中可视化检查布局和盒模型
outline 在 Storybook UI 中可视化调试 CSS 布局和对齐
query params 模拟查询参数
storyshots 在 Storybook 中对组件进行快照测试
storysource 在 Storybook UI 中查看你的 stories 代码
viewport 使用 Storybook 更改显示尺寸和布局以适应响应式组件

查看 插件 / 框架支持表

已弃用插件

插件
contexts 用于在动态上下文中驱动组件的插件
info 为 stories 添加额外的组件用法信息
knobs 在 Storybook UI 中以交互方式编辑组件 props 数据
notes 为 Storybook stories 添加备注
options 通过代码自定义 Storybook UI

为了持续改进你的体验,我们最终不得不弃用某些插件,转而推荐使用更新更好的工具。

如果你正在使用 info/notes,强烈建议迁移到 docs这里有一份指南可以帮助你。

如果你正在使用 contexts,强烈建议迁移到 toolbars这里有一份指南可以帮助你。

徽章与演示材料

我们提供徽章!将其链接到你的 Storybook 实时示例。

Storybook

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

如果你正在寻找用于 Storybook 演示的材料,例如标志、视频素材以及我们使用的颜色,你可以在我们的 品牌仓库 (brand repo) 中找到所有内容。

社区

贡献

随时欢迎为 Storybook 做出贡献!

  • 📥 欢迎提交 Pull Request 和点赞 🌟。
  • 阅读我们的 贡献指南 开始入门,或在 Discord 上找到我们,我们会花时间指导你。

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

  • 我们将标记为 Good First Issue 的问题视为非常适合初次接触此代码库或开源项目的新手。
  • 与我们交流,我们会找到适合你技能和学习兴趣的事情。

开发脚本

Storybook 使用 Lerna 组织为 monorepo。有用的脚本包括

yarn start

运行带有测试 stories 的沙盒模板 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

- 结束 -

创建者
  • eatools
    eatools
支持
    Angular
    Ember
    HTML
    Marko
    Mithril
    Preact
    Rax
    React
    Riot
    Svelte
    Vue
    Web Components
标签