核心附加组件

Storybook 的一个主要优势是附加组件，它们扩展了 Storybook 的 UI 和行为。 Storybook 默认情况下附带一组“核心”附加组件，这些组件会增强初始用户体验。还有许多第三方附加组件以及由 Storybook 核心团队开发的“官方”附加组件。

安装

如果您运行了 npx storybook@latest init 来将 Storybook 包含在您的项目中，则最新版本的 Essentials 附加组件（@storybook/addon-essentials）已经为您安装和配置。您可以继续并跳过本节的其余部分。

但是，如果您打算将 Essentials 附加组件手动安装到现有的 Storybook 实例中，则可以通过在终端中运行以下命令来进行。

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

更新您的 Storybook 配置（在 .storybook/main.js|ts 中）以包含 Essentials 附加组件。

.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;

配置

Essentials 是“零配置”。它开箱即用，带有推荐的配置。

如果您需要重新配置任何单独的 Essentials 附加组件，请按照安装说明手动安装它们，并根据所选方法，在您的 Storybook 配置文件（例如，.storybook/main.js|ts）中注册它们，并调整配置以满足您的需求。例如

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;

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

.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 时，您的自定义配置将覆盖默认配置。

禁用附加组件

如果您需要禁用任何 Essentials 附加组件，可以通过更改您的 .storybook/main.js 文件来实现。

例如，如果您想禁用背景附加组件，您可以在 Storybook 配置中应用以下更改。

.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。