文档
Storybook Docs

features

父级:main.js|ts 配置

类型

{
  actions?: boolean;
  argTypeTargetsV7?: boolean;
  backgrounds?: boolean;
  controls?: boolean;
  developmentModeForBuild?: boolean;
  experimentalTestSyntax?: boolean;
  highlight?: boolean;
  interactions?: boolean;
  legacyDecoratorFileOrder?: boolean;
  measure?: boolean;
  outline?: boolean;
  toolbars?: boolean;
  viewport?: boolean;
}

启用 Storybook 的附加功能。

actions

类型:boolean

启用 Actions 功能。

argTypeTargetsV7

(⚠️ 实验性)

类型:boolean

根据渲染函数的类型“target”过滤参数。

.storybook/main.ts
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
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;

backgrounds

类型:boolean

启用 Backgrounds 功能。

controls

类型:boolean

启用 Controls 功能。

developmentModeForBuild

类型:boolean

在构建的 Storybooks 中将 NODE_ENV 设置为 'development',以获得更好的测试和调试功能。

.storybook/main.ts
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
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: {
    developmentModeForBuild: true,
  },
};
 
export default config;

experimentalTestSyntax

(⚠️ 实验性)

类型:boolean

启用 实验性的 .test 方法(使用 CSF Next 格式)

.storybook/main.js|ts (CSF Next 🧪)
// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
import { defineMain } from '@storybook/your-framework/node';
 
export default defineMain({
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  features: {
    experimentalTestSyntax: true,
  },
});

highlight

类型:boolean

启用 Highlight 功能。

interactions

类型:boolean

启用 Interactions 功能。

legacyDecoratorFileOrder

类型:boolean

在插件或框架的装饰器之前应用 preview.js 中的装饰器。 更多信息

.storybook/main.ts
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
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;

measure

类型:boolean

启用 Measure 功能。

outline

类型:boolean

启用 Outline 功能。

toolbars

类型:boolean

启用 Toolbars 功能。

viewport

类型:boolean

启用 Viewport 功能。