storybook-addon-grid-overlay

Storybook 插件，通过提供网格覆盖来增强您的 Storybook 故事的视觉布局。它允许您轻松地在网格系统中对齐和定位组件，从而更容易创建干净、一致的设计。

使用此包，您可以定义自定义网格设置，例如网格最大尺寸、列数、间隙和边距，并在 Storybook 中预览组件时轻松切换网格覆盖的开/关。

安装

使用 npm

npm install --save-dev storybook-addon-grid-overlay

使用 yarn

yarn add storybook-addon-grid-overlay --dev

将以下内容添加到您的 .storybook/main.js 的 exports 中

module.exports = {
  addons: ['storybook-addon-grid-overlay']
};

自定义

网格可以使用 参数 进行自定义，您可以全局设置或按故事设置。

参数

名称	描述	类型	默认值	必需
columns	列数	number | string	12	否
gap	列之间的间隙	string	'20px'	否
gutter	水平边距（间距）	string	'0px'	否
maxWidth	覆盖层的最大宽度	string	'none'	否
color	列的颜色	string	'rgba(255, 71, 132, 0.15)'	否

全局设置

export const parameters = {
  gridOverlay: {
    columns: 12,
    gap: '20px',
    gutter: '20px',
    maxWidth: '1024px'
  }
};

故事设置

export const MyComponent = () => {...};

MyComponent.parameters = {
	gridOverlay: {
        gutter: '20px'
    }
};

使用 CSS 变量

storybook-addon-grid-overlay 被设计为接受 CSS 变量作为参数，使网格能够响应您的设计。

@media (min-width: 768px) {
  :root {
    --columns: 8;
    --gap: 12px;
    --gutter: 24px;
    --maxWidth: 1024px;
  }
}

export const parameters = {
  gridOverlay: {
    columns: 'var(--columns)',
    gap: 'var(--gap)',
    gutter: 'var(--gutter)',
    maxWidth: 'var(--maxWidth)'
  }
};