測量與外框

觀看影片教學

Storybook 的測量和外框附加元件為您提供必要的工具，以檢查和視覺化偵錯您的 Story 中的 CSS 版面配置和對齊問題。它讓您可以在開發初期輕鬆捕捉 UI 錯誤。

測量附加元件

當使用複合元件或頁面版面配置時，處理空白（即 margin、padding、border）和個別元件測量可能會相當麻煩。這會需要您開啟瀏覽器的開發人員工具，並手動檢查 DOM 樹是否有問題和 UI 錯誤。

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

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

在建立版面配置時，檢查所有元件的視覺對齊方式可能會相當複雜，如果您的元件分散開來或包含獨特的形狀，情況會更嚴重。

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

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

類型：boolean

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

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