测量与轮廓

Storybook 的测量与轮廓功能提供了必要的工具，用于检查和可视化调试您的 Stories 中的 CSS 布局和对齐问题。这使得在开发早期轻松发现 UI 错误成为可能。

测量

在处理复合组件或页面布局时，处理空白（即 margin、padding、border）和单个组件的测量可能会很繁琐。这需要您打开浏览器的开发者工具并手动检查 DOM 树以查找问题和 UI 错误。

相反，您可以通过点击工具栏中的测量按钮快速可视化每个组件的测量值。现在，当您将鼠标悬停在 Story 中的元素上时，将显示该元素的尺寸以及任何空白（即 margin、padding、border）。

或者，您也可以按键盘上的 m 键来开启或关闭测量功能。

在构建布局时，检查所有组件的视觉对齐可能会非常复杂，特别是当您的组件分散或包含独特的形状时。

点击工具栏中的轮廓按钮，即可切换显示所有 UI 元素的轮廓，让您立即发现错误和损坏的布局。

这些功能在 measure 或 outline 命名空间下为 Storybook 提供了以下参数

类型: boolean

禁用该功能的行为。如果您想为整个 Storybook 禁用此功能，您应该在主配置文件中进行设置。

此参数主要用于在更具体的级别进行覆盖。例如，如果在项目级别将此参数设置为 true，那么可以在 meta（组件）或 story 级别通过将其设置为 false 来重新启用它。