基本擴充功能

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 時，您的自訂設定將覆蓋預設設定。

停用擴充功能

如果您需要停用任何 Essential 的擴充功能，您可以透過變更 .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。