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 参数配置您自己的内边距集合。

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

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

您还可以使用参数继承按 Story 或按组件进行配置。

// 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 },
  },
}

查看其他Story 示例。