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

請參閱其他故事範例。