测量与轮廓
Storybook 的测量与轮廓功能提供了必要的工具,用于检查和可视化调试您的 Stories 中的 CSS 布局和对齐问题。这使得在开发早期轻松发现 UI 错误成为可能。
测量
在处理复合组件或页面布局时,处理空白(即 margin
、padding
、border
)和单个组件的测量可能会很繁琐。这需要您打开浏览器的开发者工具并手动检查 DOM 树以查找问题和 UI 错误。
相反,您可以通过点击工具栏中的测量按钮快速可视化每个组件的测量值。现在,当您将鼠标悬停在 Story 中的元素上时,将显示该元素的尺寸以及任何空白(即 margin
、padding
、border
)。
或者,您也可以按键盘上的 m
键来开启或关闭测量功能。
轮廓
在构建布局时,检查所有组件的视觉对齐可能会非常复杂,特别是当您的组件分散或包含独特的形状时。
点击工具栏中的轮廓按钮,即可切换显示所有 UI 元素的轮廓,让您立即发现错误和损坏的布局。
API
参数
这些功能在 measure
或 outline
命名空间下为 Storybook 提供了以下参数
disable
类型: boolean
禁用该功能的行为。如果您想为整个 Storybook 禁用此功能,您应该在主配置文件中进行设置。
此参数主要用于在更具体的级别进行覆盖。例如,如果在项目级别将此参数设置为 true
,那么可以在 meta(组件)或 story 级别通过将其设置为 false
来重新启用它。