基本插件

Storybook 的一个主要优势是 addons，它扩展了 Storybook 的 UI 和行为。Storybook 默认附带一组“基本”插件，可增强初始用户体验。有许多第三方插件以及由 Storybook 核心团队开发的“官方”插件。

¥A major strength of Storybook are addons that extend Storybook’s UI and behavior. Storybook ships by default with a set of “essential” addons that add to the initial user experience. There are many third-party addons as well as “official” addons developed by the Storybook core team.

集成

¥Installation

如果你运行 npx storybook@latest init 以将 Storybook 包含在你的项目中，则 Essentials 插件 (@storybook/addon-essentials) 的最新版本已为你安装和配置。你可以继续并跳过本节的其余部分。

¥If you ran npx storybook@latest init to include Storybook in your project, the latest version of the Essentials addon (@storybook/addon-essentials) is already installed and configured for you. You can go ahead and skip the rest of this section.

但是，如果你打算将 Essentials 插件手动安装到现有的 Storybook 实例中，则可以通过在终端中运行以下命令来执行此操作：

¥However, if you intend to install the Essentials addon manually into an existing Storybook instance, you can do so by running the following command in your terminal:

npm install @storybook/addon-essentials --save-dev

更新你的 Storybook 配置（在 .storybook/main.js|ts 中）以包含 Essentials 插件。

¥Update your Storybook configuration (in .storybook/main.js|ts) to include the Essentials addon.

.storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: ['@storybook/addon-essentials'], // 👈 Register addon-essentials
};
 
export default config;

配置

¥Configuration

Essentials 为“零配置”。它附带一个开箱即用的推荐配置。

¥Essentials is "zero-config”. It comes with a recommended configuration out of the box.

如果你需要重新配置任何个人必需品插件，请按照安装说明手动安装它们，并根据选择的方法将它们注册到你的 Storybook 配置文件（即 .storybook/main.js|ts）中并调整配置以满足你的需要。例如：

¥If you need to reconfigure any of the individual Essentials addons, install them manually by following the installation instructions, and depending on the method of choice, register them in your Storybook configuration file (i.e., .storybook/main.js|ts) and adjust the configuration to suit your needs. For example:

npm install @storybook/addon-actions --save-dev

.storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-actions'],
};
 
export default config;

以下是简略配置和表格，其中包含每个插件的所有可用选项。

¥Below is an abridged configuration and table with all the available options for each addon.

.storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-actions',
    '@storybook/addon-viewport',
    {
      name: '@storybook/addon-docs',
      options: {
        csfPluginOptions: null,
        mdxPluginOptions: {
          mdxCompileOptions: {
            remarkPlugins: [],
          },
        },
      },
    },
    '@storybook/addon-controls',
    '@storybook/addon-backgrounds',
    '@storybook/addon-toolbars',
    '@storybook/addon-measure',
    '@storybook/addon-outline',
  ],
};
 
export default config;

插件	选项	描述
`@storybook/addon-actions`	N/A	N/A
`@storybook/addon-viewport`	N/A	N/A
`@storybook/addon-docs`	`csfPluginOptions`	为 Storybook 的 CSF 插件提供额外的配置。可以使用 `null` 禁用。
	`mdxPluginOptions`	为 MDX 文档提供额外的配置选项和插件配置。
`@storybook/addon-controls`	N/A	N/A
`@storybook/addon-backgrounds`	N/A	N/A
`@storybook/addon-toolbars`	N/A	N/A
`@storybook/addon-measure`	N/A	N/A

当你启动 Storybook 时，你的自定义配置将覆盖默认配置。

¥When you start Storybook, your custom configuration will override the default.

禁用插件

¥Disabling addons

如果你需要禁用任何 Essential 的插件，你可以通过更改 .storybook/main.js 文件来实现。

¥If you need to disable any of the Essential's addons, you can do it by changing your .storybook/main.js file.

例如，如果你想禁用背景插件，你可以将以下更改应用于你的 Storybook 配置：

¥For example, if you wanted to disable the backgrounds addon, you would apply the following change to your Storybook configuration:

.storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    {
      name: '@storybook/addon-essentials',
      options: {
        backgrounds: false, // 👈 disable the backgrounds addon
      },
    },
  ],
};
 
export default config;

你可以为每个单独的插件使用以下键：actions、backgrounds、controls、docs、viewport、toolbars、measure、outline 和 highlight。

¥You can use the following keys for each individual addon: actions, backgrounds, controls, docs, viewport, toolbars, measure, outline, and highlight.