文档插件
Storybook Docs

插件介绍

插件通过核心功能之外的特性和集成来扩展 Storybook。 大多数 Storybook 功能都是作为插件实现的。 例如:文档无障碍功能测试交互式控件等等。 插件 API 使您可以轻松地以新的方式配置和自定义 Storybook。 社区制作了无数插件,可以解锁节省时间的工作流程。

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

Storybook 基础知识

在编写您的第一个插件之前,让我们先了解一下 Storybook 架构的基础知识。 虽然 Storybook 呈现统一的用户界面,但实际上它在内部被分为两部分:ManagerPreview

Manager 是负责渲染以下内容的用户界面

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

Preview 区域是一个 iframe,用于渲染您的 Stories。

Storybook detailed window

由于 Manager 和 Preview 都在各自独立的 iframes 中运行,因此它们使用通信通道来保持同步。 例如,当您在 Manager 中选择一个 story 时,会通过该通道分发一个事件,通知 Preview 渲染该 story。

插件的结构

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

基于 UI 的插件

基于 UI 的插件侧重于自定义 Storybook 的用户界面,以扩展您的开发工作流程。 基于 UI 的插件示例包括:ControlsDocsAccessibility

了解如何编写插件 »

预设插件

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

了解如何编写预设插件 »