Storybook 断点附加组件

一个 Storybook 附加组件，用于查看 Storybook iFrame 的实际宽度。如果您为断点提供映射，我们甚至会向您显示当前活动的断点名称 🤗

安装

npm install --save-dev storybook-addon-breakpoints

在 .storybook/main.js 中

module.exports = {
  addons: ['storybook-addon-breakpoints'],
};

配置

默认配置

没有任何配置，附加组件将显示一个叠加层，其中包含 Storybook 组件视图的当前宽度。

断点

您可以传递一个包含有关断点的信息的对象。我们使用此信息在叠加层中显示相应断点的名称。

为此，您必须将断点添加到故事中的 breakpoints 参数，如下所示

export default {
  title: 'title-of-my-story',
  parameters: {
    breakpoints: {
      breakpointNames: {
        'small': '0',
        'medium': '500',
        'large': '1000'
      }
    }
  }
};

要为所有故事配置附加组件，请在 .storybook/preview.js 中设置 breakpoints 参数。

export const parameters = {
  breakpoints: {
    breakpointNames: {
      'small': '0',
      'medium': '500',
      'large': '1000'
    }
  }
};

对象 breakpointNames 的键是我们在叠加层中显示的名称。相应的 value 代表每个断点的起始点。在上面的示例中，这意味着以下内容

• 小型断点：从 0 到 499 像素
• 中等断点：从 500 到 999 像素
• 大型断点：从 1000 像素起

去抖动

在每次像素调整大小后执行计算以显示断点可能会占用大量资源。为了提高性能，我们支持在窗口调整大小上进行去抖动。使用 debounceTimeout 键，如下所示

export const parameters = {
  breakpoints: {
    breakpointNames: {...},
    debounceTimeout: 200
  }
};

在上面的示例中，我们最多每 200 毫秒对断点进行一次计算，以进行调整大小。