测量和轮廓

Storybook 的测量和轮廓功能为你提供了必要的工具，用于检查和可视化调试故事中的 CSS 布局和对齐问题。它使在开发早期捕获 UI 错误变得容易。

¥Storybook's measure and outline features give you the necessary tooling to inspect and visually debug CSS layout and alignment issues within your stories. It makes it easy to catch UI bugs early in development.

测量

¥Measure

在使用复合组件或页面布局时，处理空格（即 margin、padding、border）和单个组件的测量可能会非常繁琐。它需要你打开浏览器的开发工具并手动检查 DOM 树是否存在问题和 UI 错误。

¥While working with composite components or page layouts, dealing with whitespace (i.e., margin, padding, border) and individual component measurements can be tedious. It would require that you open up the browser's development tools and manually inspect the DOM tree for issues and UI bugs.

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

¥Instead, you can quickly visualize each component's measurements by clicking the measure button in the toolbar. Now when you hover over an element in your story, that element's dimensions and any whitespace (i.e., margin, padding, border) will be shown.

大纲

¥Outline

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

¥When building your layouts, checking the visual alignment of all components can be pretty complicated, especially if your components are spread apart or contain unique shapes.

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

¥Click the outline button in the toolbar to toggle the outlines associated with all your UI elements, allowing you to spot bugs and broken layouts instantly.

API

参数

¥Parameters

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

¥These features contribute the following parameters to Storybook, under the measure or outline namespace:

disable

类型：boolean

¥Type: boolean

禁用该功能的行为。如果你希望为整个 Storybook 禁用该功能，你应该 在主配置文件中执行此操作。

¥Disable the feature's behavior. If you wish to disable the feature for the entire Storybook, you should do so in your main configuration file.

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

¥This parameter is most useful to allow overriding at more specific levels. For example, if this parameter is set to true at the project level, it could then be re-enabled by setting it to false at the meta (component) or story level.