测量与轮廓

观看视频教程

Storybook 的测量和轮廓插件为您提供了在故事中检查和可视化调试 CSS 布局和对齐问题所需的工具。它可以轻松地在开发早期发现 UI 问题。

测量插件

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

使用 Storybook 的测量插件，您只需点击 Storybook 工具栏中的按钮即可快速可视化每个组件的尺寸。

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

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

使用 Storybook 的轮廓插件，您可以切换与所有 UI 元素关联的轮廓，允许您只需点击一下按钮即可立即发现错误和损坏的布局。

此插件为 Storybook 提供以下参数，位于 measure 或 outline 命名空间下

类型：boolean

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

此参数最有用之处在于允许在更具体的级别上进行覆盖。例如，如果此参数在项目级别设置为 true，则可以在元数据（组件）或故事级别将其设置为 false 来重新启用它。