Measure & outline

观看视频教程

Storybook 的 Measure 和 Outline 插件为您提供必要的工具，以检查和可视化调试您的 stories 中的 CSS 布局和对齐问题。它可以轻松地在开发的早期阶段捕获 UI 错误。

Measure 插件

当使用复合组件或页面布局时，处理空白（即 margin、padding、border）和单个组件的尺寸可能非常麻烦。这将要求您打开浏览器的开发工具并手动检查 DOM 树以查找问题和 UI 错误。

借助 Storybook 的 Measure 插件，您可以通过单击 Storybook 工具栏中的按钮来快速可视化每个组件的尺寸。

或者，您可以按键盘上的 m 键来切换插件。

在构建布局时，检查所有组件的可视对齐可能非常复杂，如果您的组件分散开来或包含独特的形状，则更是如此。

借助 Storybook 的 Outline 插件，您可以切换与所有 UI 元素关联的轮廓，从而让您只需单击一个按钮即可立即发现错误和损坏的布局。

此插件在 measure 或 outline 命名空间下，为 Storybook 贡献了以下参数

类型：boolean

禁用此插件的行为。如果您希望为整个 Storybook 禁用此插件，则应在注册 addon-essentials 时执行此操作。有关更多信息，请参阅必备插件文档。

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