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 导出中

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

自定义

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

参数

名称	描述	类型	默认值	必填
columns	列数	数字 | 字符串	12	否
gap	列之间的间隙	字符串	'20px'	否
gutter	水平间距（间隙）	字符串	'0px'	否
maxWidth	覆盖的最大宽度	字符串	'none'	否
color	列的颜色	字符串	'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)'
  }
};