Storybook

593

0

Storybook

UI 开发

Storybook 是一个前端工作室，用于单独构建 UI 组件和页面。数以千计的团队使用它进行 UI 开发、测试和文档编制。它是开源且免费的。

故事书

更快地构建 UI 组件

在 CircleCI 上建立状态 编解码器 执照 故事书社区 Open Collective 的支持者 Open Collective 赞助商 官方推特句柄

Storybook 是一个前端工作室，用于单独构建 UI 组件和页面。数以千计的团队使用它进行 UI 开发、测试和文档编制。在https://storybook.js.org了解更多信息。

查看自述文件： 最新的 下一个 未来

目录

入门

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

文档

可以在Storybook 的文档站点上找到文档。

例子

查看Component Encyclopedia，了解领导团队如何使用 Storybook。

Storybook 带有许多用于组件设计、文档、测试、交互性等的插件。Storybook 的 API 使得以各种方式配置和扩展成为可能。它甚至已经扩展到支持 React Native、Android、iOS 和 Flutter 移动开发。

社区

如需更多帮助，请加入我们的Storybook Discord。

项目

支持的框架

Renderer Demo
? TODO, the link below will break React
React Storybook demo React
Vue Storybook demo Vue
Angular Storybook demo Angular
Web components Storybook demo Svelte
React Native - React Native
HTML Storybook demo HTML
Ember Storybook demo Ember
Svelte Storybook demo Svelte
Preact Storybook demo Preact
Marionette.js - Marionette.js
Android, iOS, Flutter Storybook demo Native

子项目

  • CLI - 简化了各种应用程序类型的安装
  • examples - 代码示例来说明不同的 Storybook 用例

插件

Addons
a11y Test components for user accessibility in Storybook
actions Log actions as users interact with components in the Storybook UI
backgrounds Let users choose backgrounds in the Storybook UI
cssresources Dynamically add/remove CSS resources to the component iframe
design assets View images, videos, and weblinks alongside your story
docs Add high quality documentation to your components
events Interactively fire events to components that respond to EventEmitter
google-analytics Reports google analytics on stories
graphql Query a GraphQL server within Storybook stories
jest View the results of components' unit tests in Storybook
links Create links between stories
measure Visually inspect the layout and box model within the Storybook UI
outline Visually debug the CSS layout and alignment within the Storybook UI
query params Mock query params
storyshots Snapshot testing for components in Storybook
storysource View the code of your stories within the Storybook UI
viewport Change display sizes and layouts for responsive components using Storybook

请参阅插件/框架支持表

弃用的插件

插件
语境 用于在动态上下文中驱动组件的插件
信息 使用额外的组件使用信息注释故事
旋钮 在 Storybook UI 中交互式编辑组件道具数据
笔记 用笔记注释 Storybook 故事
选项 在代码中自定义 Storybook UI

为了继续改善您的体验，我们最终必须弃用某些插件以支持新的更好的工具。

如果您使用的是信息/注释，我们强烈建议您改用文档，这里有一份指南可以帮助您。

如果您正在使用上下文，我们强烈建议您迁移到工具栏，这里有一个指南可以帮助您。

徽章和演示材料

我们有徽章！将它链接到您的实时 Storybook 示例。

故事书

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

如果您正在寻找可在 Storybook 演示中使用的材料，例如徽标、视频材料和我们使用的颜色，您可以在我们的品牌库中找到所有这些材料。

社区

贡献

始终欢迎对 Storybook 做出贡献！

  • 📥拉取请求和🌟明星总是受欢迎的。
  • 阅读我们的贡献指南以开始使用，或在Discord上找到我们，我们将花时间为您提供指导。

寻找要解决的第一个问题？

  • 好第一期当我们认为问题非常适合一般代码库或 OSS 的新手时，我们会标记问题。
  • 与我们交谈，我们会找到适合您的技能和学习兴趣的东西。

开发脚本

Storybook 使用Lerna组织成一个单一的仓库。有用的脚本包括：

yarn start

运行带有测试故事的沙盒模板故事书

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- 将在监视模式下运行核心测试
看看其他 vue-sku-form Carbon lucky-canvas G2 SCUI Admin NES.css Quick Reference Actix Web Yaade Tabby