插件类型

每个 Storybook 插件分为两大类，基于 UI 或预设。每种类型的插件功能都记录在此处。在创建插件时使用此作为参考。

¥Each Storybook addon is classified into two general categories, UI-based or Presets. Each type of addons feature is documented here. Use this as a reference when creating your addon.

基于 UI 插件

¥UI-based addons

基于 UI 的插件允许你使用以下元素自定义 Storybook 的 UI。

¥UI-based addons allow you to customize Storybook's UI with the following elements.

面板

¥Panels

面板插件允许你在 Storybook 的插件面板中添加自己的 UI。这是生态系统中最常见的插件类型。例如，官方的 @storybook/actions 和 @storybook/a11y 就使用这种模式。

¥Panel addons allow you to add your own UI in Storybook's addon panel. This is the most common type of addon in the ecosystem. For example, the official @storybook/actions and @storybook/a11y use this pattern.

使用此样板代码将新的 Panel 添加到 Storybook 的 UI：

¥Use this boilerplate code to add a new Panel to Storybook's UI:

import React from 'react';
 
import { AddonPanel } from '@storybook/components';
 
import { useGlobals, addons, types } from '@storybook/manager-api';
 
addons.register('my/panel', () => {
  addons.add('my-panel-addon/panel', {
    title: 'Example Storybook panel',
    //👇 Sets the type of UI element in Storybook
    type: types.PANEL,
    render: ({ active }) => (
      <AddonPanel active={active}>
        <h2>I'm a panel addon in Storybook</h2>
      </AddonPanel>
    ),
  });
});

工具栏

¥Toolbars

工具栏插件允许你在 Storybook 的工具栏中添加自己的自定义工具。例如，官方的 @storybook/backgrounds 和 @storybook/addon-outline 就使用这种模式。

¥Toolbar addons allow you to add your own custom tools in Storybook's Toolbar. For example, the official @storybook/backgrounds and the @storybook/addon-outline use this pattern.

使用此样板代码将新的 button 添加到 Storybook 的工具栏：

¥Use this boilerplate code to add a new button to Storybook's Toolbar:

import React from 'react';
 
import { addons, types } from '@storybook/manager-api';
import { IconButton } from '@storybook/components';
import { OutlineIcon } from '@storybook/icons';
 
addons.register('my-addon', () => {
  addons.add('my-addon/toolbar', {
    title: 'Example Storybook toolbar',
    //👇 Sets the type of UI element in Storybook
    type: types.TOOL,
    //👇 Shows the Toolbar UI element if the story canvas is being viewed
    match: ({ tabId, viewMode }) => !tabId && viewMode === 'story',
    render: ({ active }) => (
      <IconButton active={active} title="Show a Storybook toolbar">
        <OutlineIcon />
      </IconButton>
    ),
  });
});

标签

¥Tabs

标签插件允许你在 Storybook 中创建自己的自定义标签。例如，官方的 @storybook/addon-docs 就使用这种模式。

¥Tab addons allow you to create your own custom tabs in Storybook. For example, the official @storybook/addon-docs uses this pattern.

使用此样板代码将新的 Tab 添加到 Storybook 的 UI：

¥Use this boilerplate code to add a new Tab to Storybook's UI:

import React from 'react';
 
import { addons, types } from '@storybook/manager-api';
 
addons.register('my-addon', () => {
  addons.add('my-addon/tab', {
    type: types.TAB,
    title: 'Example Storybook tab',
    render: () => (
      <div>
        <h2>I'm a tabbed addon in Storybook</h2>
      </div>
    ),
  });
});

预设插件

¥Preset addons

Storybook 预设插件是 babel、webpack 和 addons 配置的分组集合，用于集成 Storybook 和其他技术。例如官方 preset-create-react-app。

¥Storybook preset addons are grouped collections of babel, webpack, and addons configurations to integrate Storybook and other technologies. For example the official preset-create-react-app.

在编写你自己的预设插件时使用此样板代码。

¥Use this boilerplate code while writing your own preset addon.

export default {
  managerWebpack: async (config, options) => {
    // Update config here
    return config;
  },
  webpackFinal: async (config, options) => {
    return config;
  },
  babel: async (config, options) => {
    return config;
  },
};

了解有关 Storybook 插件生态系统的更多信息

¥Learn more about the Storybook addon ecosystem

• 其他类型插件的插件类型

  ¥Types of addons for other types of addons

• 编写插件 提供有关插件开发基础知识

  ¥Writing addons for the basics of addon development

• 预设 用于预设开发

  ¥Presets for preset development

• 集成目录 提供有关要求和可用秘诀

  ¥Integration catalog for requirements and available recipes

• API 参考 用于了解可用的 API

  ¥API reference to learn about the available APIs