Measure & outline

Storybook 的测量和描边功能为您提供了必要的工具，用于检查和直观调试故事中的 CSS 布局和对齐问题。它可以轻松地在开发早期发现 UI 错误。

测量

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

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

描边

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

单击工具栏中的描边按钮可切换所有 UI 元素的描边，让您能够立即发现错误和损坏的布局。

API

参数

这些功能为 Storybook 贡献了以下 参数，位于 `measure` 或 `outline` 命名空间下：

disable

类型：boolean

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

此参数对于允许在更具体的级别进行覆盖非常有用。例如，如果此参数在项目级别设置为 `true`，则可以通过在 meta（组件）或 story 级别将其设置为 `false` 来重新启用它。