Storybook 測量擴充套件

用於檢查佈局和視覺化盒子模型的 Storybook 擴充套件。

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

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

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

使用方式

此擴充套件需要 Storybook 6.3 或更新版本。「測量」是基礎套件的一部分，因此在所有新的 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