文档
Storybook 文档

特性

父级: main.js|ts 配置

类型

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

启用 Storybook 的额外功能。

argTypeTargetsV7

(⚠️ 实验性)

类型: boolean

从渲染函数中过滤具有“目标”类型的参数。

.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

配置 背景插件 以选择使用新的故事全局 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

在来自插件或框架的装饰器之前,应用来自 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

配置 视窗插件 以选择使用新的故事全局 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;