測量 & 外框

觀看影片教學

Storybook 的 Measure 和 Outline 附加元件為您提供必要的工具，以檢測和視覺化除錯 CSS 版面配置和對齊問題。這讓您可以在開發初期輕鬆捕捉 UI 錯誤。

Measure 附加元件

當處理複合元件或頁面版面配置時，處理空白 (即 margin、padding、border) 和個別元件尺寸可能會非常麻煩。這需要您開啟瀏覽器的開發人員工具，並手動檢查 DOM 樹狀結構以找出問題和 UI 錯誤。

透過 Storybook 的 Measure 附加元件，您可以透過點擊 Storybook 工具列中的按鈕，快速視覺化每個元件的尺寸。

或者，您可以按下鍵盤上的 m 鍵來切換附加元件。

當您建構版面配置時，檢查所有元件的視覺對齊方式可能會非常複雜，如果您的元件分散開來或包含獨特的形狀，則更是如此。

透過 Storybook 的 Outline 附加元件，您可以切換與所有 UI 元素相關聯的外框，讓您只需點擊一個按鈕即可立即發現錯誤和損壞的版面配置。

此附加元件將以下參數貢獻給 Storybook，在 measure 或 outline 命名空間下

類型：boolean

停用此附加元件的行為。如果您希望為整個 Storybook 停用此附加元件，您應該在註冊 addon-essentials 時執行此操作。請參閱必要附加元件的文件以取得更多資訊。

此參數最適用於允許在更特定的層級覆寫。例如，如果此參數在專案層級設定為 true，則可以透過在 meta（元件）或 story 層級將其設定為 false 來重新啟用它。