列指南

npm install storybook-addon-grid 让你的故事保持节奏

这是免费软件，如果你喜欢它，请考虑支持我 ❤️

⚙️ 安装

npm install storybook-addon-grid

// .storybook/main.js
const config = {
  addons: ['storybook-addon-grid'],
};

包含此附加预设，为您的 Chromatic 截图配置列指南。

// .storybook/main.js
const config = {
  addons: ['storybook-addon-grid', 'storybook-addon-grid/chromatic'],
};

🚀 用法

列指南通过 参数 控制，因此你可以在全局或每个故事中定义它们。

列指南可以通过点击工具栏按钮或键盘快捷键 Ctrl + G 开启。

注意： 由于 z-index 的特性，故事的根 div 将被应用 position: relative 和 z-index: 0，从而使列指南能够在其上方显示。

参数

列设计系统由 3 个值定义

• columns 的数量
• 它们之间的 gap
• gutter — 系统与屏幕之间的最小外边距
• 系统的 maximal-width 也限制了所有列的最大宽度。

columns?: number = 12

列指南的数量。

gap?: string = '20px'

columns 之间的间隔。

gutter?: string = '50px'

系统左右两侧的 gutter (margin)。

定义此值以覆盖右侧定义的 gutter。

maxWidth?: string = '1024px'

列应增长到的最大宽度。

color?: string = 'rgba(255, 0, 0, 0.1)'

设置列指南的颜色。

全局参数~

// .storybook/preview.js
export const parameters = {
  grid: {
    gridOn: true,
    columns: 12,
    gap: '20px',
    gutter: '50px',
    maxWidth: '1024px',
  },
};

每个故事~

// MyComponent.stories.js
export const Example = () => {...};
Example.parameters = {
	grid: {
		columns: 6,
	},
};

响应式属性

storybook-addon-grid 解决响应式属性的方式是将其留给你处理。我们不希望你为此插件构建抽象和实现，我们希望重用你可能已在使用的现有模式。

实际上，所有属性都映射到 CSS，因此你暴露的任何 CSS 变量都可以使用。

例如

// file: my-styles.css
@media (min-width: 768px) {
  :root {
    --columns: 8;
    --gap: 12px;
    --gutter: 24px;
  }
}

Story.parameters = {
  grid: {
    // a custom variable names for the number of columns
    columns: 'var(--columns)',
    // or the gutter
    gutter: 'var(--gutter)',
    // or the gap
    gap: 'var(--gap)',
  },
};

你可以在我们的 示例故事 ResponsiveGrid 中看到实际效果。

📚 延伸阅读

• https://compassofdesign.com/articles/design-principle-1-guides-gutters-and-grids

❤ 感谢

特别感谢 Marina 的初始实现和设计。

许可

MIT © Marais Rossouw