Storybook Playroom 插件

🧩 使用 Playroom 在 Storybook 内部进行设计，使用每个故事源作为起点。

查看演示 →

入门

注意：在使用此插件之前，必须先设置好 Playroom 并运行，请参阅 说明。

npm install --save-dev storybook-addon-playroom

// .storybook/main.js

export default {
  addons: ['storybook-addon-playroom'],
}

配置

可以通过 playroom 参数 配置插件。以下选项可用

选项	类型	描述	默认值
url	字符串	Playroom URL	https://127.0.0.1:9000
code	字符串	要用于代替故事源的代码
disable	布尔值	是否禁用插件	false
includeDecorators	布尔值	是否在故事代码中包含全局装饰器	false
reactElementToJSXStringOptions	对象	react-element-to-jsx-string 选项	{ sortProps: false }

要为所有故事配置，请设置 playroom 参数

// .storybook/preview.js

export const parameters = {
  playroom: {
    url: 'https://127.0.0.1:9000',
  },
}

您也可以使用 参数继承 在每个故事或每个组件的基础上进行配置

// Button.stories.js

export default {
  title: 'Button',
  component: Button,
  parameters: {
    playroom: {
      // Use predefined code instead of story source on all Button stories
      code: '<Button>Hello Button</Button>',
    },
  },
}

export const Large = {
  args: {
    size: 'large',
  },
  parameters: {
    playroom: {
      // Disable addon in Button/Large story only
      disable: true,
    },
  },
}

注意：禁用插件不会隐藏 Playroom 选项卡。为此，您必须使用 Storybook 自身的 previewTabs 参数

// Button.stories.js

export const Large = {
  parameters: {
    playroom: {
      disable: true,
    },
    previewTabs: {
      // Hide Playroom tab
      'storybook/playroom/tab': {
        hidden: true,
      },
    },
  },
}

常见问题

为什么我生成的 Playroom 代码包含无意义的组件名称？

如果您看到诸如 <O /> 而不是 <Card /> 之类的混淆的组件名称，您可能需要 自定义 Storybook 的 Vite 设置 并 禁用压缩

// .storybook/main.js

export default {
  addons: ['storybook-addon-playroom'],
  async viteFinal(config) {
    return mergeConfig(config, {
      build: {
        // Disable minification
        minify: false,
      },
    })
  },
}