文档插件
Storybook 文档

插件简介

插件通过提供核心功能中未内置的功能和集成来扩展 Storybook。大多数 Storybook 功能都是作为插件实现的。例如:文档无障碍测试交互式控件等等。插件 API 使您可以轻松地以新的方式配置和自定义 Storybook。社区创建了无数的插件,可以释放节省时间的流程。

浏览我们的 插件目录 以安装现有插件或作为您自己的插件的灵感来源。

Storybook 基础知识

在编写您的第一个 插件 之前,让我们先了解一下 Storybook 架构的基础知识。虽然 Storybook 提供了一个统一的用户界面,但在幕后,它被分成两个部分:**管理器**和**预览**。

**管理器**是负责渲染以下内容的 UI:

  • 🔍 搜索
  • 🧭 导航
  • 🔗 工具栏
  • 📦 插件

**预览**区域是一个 iframe,您的故事在其中渲染。

Storybook detailed window

因为这两个元素都运行在各自独立的 iframe 中,所以它们使用通信通道保持同步。例如,当您在管理器中选择一个故事时,会跨通道分派一个事件,通知预览渲染该故事。

插件的结构

Storybook 插件允许您扩展 Storybook 中已有的功能,从 用户界面API。每个插件都分为两个更广泛的类别。

基于 UI 的插件

基于 UI 的插件 侧重于自定义 Storybook 的用户界面以扩展您的开发工作流程。基于 UI 的插件示例包括:控件文档无障碍测试

学习如何编写插件 »

预设插件

预设插件 可以帮助您将 Storybook 与其他技术和库集成。预设插件的一个示例是 preset-create-react-app

学习如何编写预设插件 »