测量和轮廓

Watch a video tutorial

Storybook 的 测量 和 大纲 插件为你提供了必要的工具，用于检查和直观地调试故事中的 CSS 布局和对齐问题。它使在开发早期捕获 UI 错误变得容易。

¥Storybook's Measure and Outline addons 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 addon

在使用复合组件或页面布局时，处理空白（即 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 pretty troublesome. It would require that you open up the browser's development tools and manually inspect the DOM tree for issues and UI bugs.

使用 Storybook 的 Measure 插件，你可以通过单击 Storybook 工具栏中的按钮快速可视化每个组件的测量值。

¥With Storybook's Measure addon, you can quickly visualize each component's measurements through a click of a button in Storybook's toolbar.

大纲插件

¥Outline addon

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

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

使用 Storybook 的 Outline 插件，你可以切换与所有 UI 元素相关的轮廓，只需单击按钮即可立即发现错误和损坏的布局。

¥With Storybook's Outline addon, you can toggle the outlines associated with all your UI elements, allowing you to spot bugs and broken layouts instantly with a click of a button.

API

参数

¥Parameters

此插件将以下 参数 贡献给 Storybook，位于 measure 或 outline 命名空间下：

¥This addon contributes the following parameters to Storybook, under the measure or outline namespace:

disable

类型：boolean

¥Type: boolean

禁用此插件的行为。如果你希望为整个 Storybook 禁用此插件，你应该在注册 addon-essentials 时这样做。有关更多信息，请参阅 必备插件文档。

¥Disable this addon's behavior. If you wish to disable this addon for the entire Storybook, you should do so when registering addon-essentials. See the essential addon's docs for more information.

此参数最有用，允许在更具体的级别进行覆盖。例如，如果此参数在项目级别设置为 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.