Storybook 断点插件
一个 Storybook 插件,用于查看 Storybook iFrame 的实际宽度。如果您提供断点的映射,我们甚至会显示当前活跃的断点名称 🤗
安装
npm install --save-dev storybook-addon-breakpoints
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 毫秒计算一次断点。