Storybook 填充附加组件

🔲 一个 Storybook 附加组件，可为您的预览添加不同的填充。 有助于检查组件在被空白包围时的行为。

查看演示 →

安装

npm install --save-dev storybook-addon-paddings

// .storybook/main.js
export default {
  addons: ['storybook-addon-paddings'],
}

// .storybook/preview.js
export default {
  parameters: {
    layout: 'fullscreen', // remove default Storybook padding
  },
}

配置

填充工具栏默认情况下提供小、中和大选项，但您可以通过 paddings 参数 配置您自己的填充集。

要为所有故事配置，请在 .storybook/preview.js 中设置 paddings 参数。

export const parameters = {
  paddings: {
    values: [
      { name: 'Small', value: '16px' },
      { name: 'Medium', value: '32px' },
      { name: 'Large', value: '64px' },
    ],
    default: 'Medium',
  },
}

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

// Button.stories.js

// Set padding options for all Button stories
export default {
  title: 'Button',
  component: Button,
  parameters: {
    paddings: {
      values: [
        { name: 'Small', value: '16px' },
        { name: 'Medium', value: '32px' },
        { name: 'Large', value: '64px' },
      ],
      default: 'Large',
    },
  },
}

// Disable addon in Button/Large story only
export const Large {
  parameters: {
    paddings: { disable: true },
  },
}

查看其他 故事示例。