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	布尔值
gridColor	tomato	字符串
opacity	30	数字
breakpoints	参见此处	对象数组

如果你想使用自定义参数，可以在./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: {
      ...
    },
  },
};