Storybook 附加组件测量

用于检查布局和可视化盒子模型的 Storybook 附加组件。

1. 按 m 键启用附加组件

2. 将鼠标悬停在 DOM 节点上

3. Storybook 将以像素为单位显示所选元素的尺寸——边距、填充、边框、宽度和高度。

用法

此附加组件需要 Storybook 6.3 或更高版本。测量是 essentials 的一部分，因此默认情况下已安装在所有新的 Storybook 中。如果您需要将其添加到您的 Storybook 中，可以运行以下命令

npm i -D @storybook/addon-measure

在您的 .storybook/main.js 中的附加组件数组中添加 "@storybook/addon-measure"

export default {
  addons: ['@storybook/addon-measure'],
};

灵感

• Inspx by Rauno Freiberg
• Aaron Westbrook 的脚本
• Visbug from the Chrome team