加入直播:美东时间周四上午 11 点,Storybook 9 发布及 AMA

响应式列

一个响应式的、基于网格的列叠加层。

在 Github 上查看

Storybook 插件 响应式列

一个响应式的、基于网格的列叠加层。你可以使用全局或本地参数来定义网格,并使用 Columns 控制面板调整网格属性。

查看交互式演示

example screenshot

安装

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: {
      ...
    },
  },
};
开发者
  • adamfratino
    adamfratino
支持
    Angular
    Ember
    HTML
    Preact
    React
    React Native
    Svelte
    Vue
    Web Components
标签