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 的键是我们显示在叠加层中的名称。对应的值表示每个断点的下限起始点。在上面的示例中，这意味着以下内容：

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

防抖

每次调整窗口大小并进行像素计算以显示断点可能会占用大量资源。为了提高性能，我们支持窗口调整大小时的防抖功能。使用 debounceTimeout 键如下所示：

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

在上面的示例中，我们在调整大小时，最长每 200 毫秒计算一次断点。