列向导

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'

系统的左右 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