插件类型
每个 Storybook 插件都分为两大类：基于 UI 的和预设。此处对每种插件功能进行了说明。在创建插件时，请将其作为参考。
基于 UI 的插件
基于 UI 的插件允许您使用以下元素自定义 Storybook 的 UI。
面板
面板插件允许您在 Storybook 的插件面板中添加您自己的 UI。这是生态系统中最常见的插件类型。例如，官方的 @storybook/actions 和 @storybook/a11y 使用此模式。
使用此样板代码将新的 Panel 添加到 Storybook 的 UI 中
addon-panel/manager.js
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>
),
});
});工具栏
工具栏插件允许您在 Storybook 的工具栏中添加您自己的自定义工具。例如，官方的 @storybook/backgrounds 和 @storybook/addon-outline 使用此模式。
使用此样板代码将新的 button 添加到 Storybook 的工具栏中
addon-toolbar/manager.js
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>
),
});
});选项卡
选项卡插件允许您在 Storybook 中创建您自己的自定义选项卡。例如，官方的 @storybook/addon-docs 使用此模式。
使用此样板代码将新的 Tab 添加到 Storybook 的 UI 中
addon-tab/manager.js
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>
),
});
});了解如何编写包含这些 UI 元素的插件 此处。
预设插件
Storybook 预设插件是 babel、webpack 和 addons 配置的组合集合，用于集成 Storybook 和其他技术。例如，官方的 preset-create-react-app。
在编写您自己的预设插件时，请使用此样板代码。
.storybook/my-preset.js
export default {
managerWebpack: async (config, options) => {
// Update config here
return config;
},
webpackFinal: async (config, options) => {
return config;
},
babel: async (config, options) => {
return config;
},
};了解有关 Storybook 插件生态系统的更多信息