Storybook 插件 响应式列
一个响应式的、基于网格的列叠加层。你可以使用全局或本地参数来定义网格,并使用 Columns
控制面板调整网格属性。
查看交互式演示。
安装
yarn add -D storybook-addon-responsive-columns
在 .storybook/main.js
中:
module.exports = {
addons: ['storybook-addon-responsive-columns'],
};
用法
storybook-addon-responsive-columns
附带了一些默认设置,方便你入门。
属性 | 默认值 | 类型 |
---|---|---|
active | false | boolean |
gridColor | tomato | string |
opacity | 30 | number |
breakpoints | 参见此处 | object[] |
如果你想使用自定义参数,可以在 ./storybook/preview.js
中使用 columns
键进行全局设置
export const parameters = {
columns: {
active: true,
gridColor: "salmon",
opacity: 30,
breakpoints: [
{
breakpoint: 0,
columns: 4,
gap: 8,
},
{
breakpoint: 768,
columns: 8,
gap: 16,
},
{
breakpoint: 1024,
columns: 12,
gap: 16,
maxWidth: 1224,
gutter: 24,
},
],
},
};
或者在故事的元数据中将 columns
添加到 parameters
键中进行本地设置
export default {
parameters: {
columns: {
...
},
},
};