Storybook 擴充套件測量

用於檢查版面配置和視覺化盒模型的 Storybook 擴充套件。

1. 按下 m 鍵啟用擴充套件

2. 將滑鼠游標懸停在 DOM 節點上

3. Storybook 將以像素為單位顯示所選元素的尺寸——外邊距、內邊距、邊框、寬度和高度。

使用方式

此擴充套件需要 Storybook 6.3 或更高版本。「測量」是essentials 的一部分，因此預設安裝在所有新的 Storybook 中。如果您需要將其添加到您的 Storybook，您可以執行

npm i -D @storybook/addon-measure

將 "@storybook/addon-measure" 新增到您的 .storybook/main.js 中的 addons 陣列

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

靈感來源

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