功能

類型

{
  argTypeTargetsV7?: boolean;
  backgroundsStoryGlobals?: boolean;
  legacyDecoratorFileOrder?: boolean;
  viewportStoryGlobals?: boolean;
}

啟用 Storybook 的其他功能。

`argTypeTargetsV7`

(⚠️ 實驗性功能)

類型：boolean

使用來自渲染函數類型中的「target」來篩選 args。

.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)'],
  features: {
    argTypeTargetsV7: true,
  },
};
 
export default config;

`backgroundsStoryGlobals`

類型：boolean

設定 Backgrounds 擴充功能，以選擇加入新的 story 全域 API 來設定背景。

.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)'],
  features: {
    backgroundsStoryGlobals: true,
  },
};
 
export default config;

`legacyDecoratorFileOrder`

類型：boolean

從 addons 或框架套用裝飾器之前，先從 preview.js 套用裝飾器。更多資訊。

.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)'],
  features: {
    legacyDecoratorFileOrder: true,
  },
};
 
export default config;

`viewportStoryGlobals`

類型：boolean

設定 Viewports 擴充功能，以選擇加入新的 story 全域 API 來設定視窗。

.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)'],
  features: {
    viewportStoryGlobals: true,
  },
};
 
export default config;