Storybook 如何用 Measure 与 Outline 功能可视化排查布局间距与对齐问题【免费下载链接】storybookStorybook is the industry standard workshop for building, documenting, and testing UI components in isolation项目地址: https://gitcode.com/GitHub_Trending/st/storybook当你在 Storybook 中开发组合组件或页面级布局时经常要处理margin、padding、border等留白问题。按文档描述的传统做法是打开浏览器开发者工具手动逐层检查 DOM 树来定位尺寸和对齐问题——这个过程繁琐且容易漏看。Storybook 的 Essentials 内置了 Measure 与 Outline 两个工具Measure 让你把鼠标悬停在故事中的任意元素上直接看到该元素的尺寸与留白数值Outline 则给页面上所有 UI 元素叠加轮廓线帮助你在组件分散或形状不规则时快速发现错位和破损的布局。适用前提这两个功能属于 Storybook essentialszero-config开箱即带推荐配置在 React、Vue 3、Angular、Web Components 四个核心框架以及 Ember、HTML、Svelte、Preact、Qwik、SolidJS 等社区框架的集成中均有支持见 框架功能支持表。用 Measure 查看元素尺寸与留白启动你的 Storybook 开发环境并打开目标故事。点击工具栏toolbar中的 measure 按钮开启测量模式。开启后鼠标悬停到故事中的任何一个元素上该元素的尺寸以及它的margin、padding、border留白都会直接显示出来。也可以用键盘快捷键切换按m键即可开/关 Measure无需回到工具栏操作。当你怀疑某个元素与预期间距不符时逐一悬停比较相邻元素显示的 margin/padding 数值就能判断间距到底出在哪个元素上而不必进开发者工具逐层展开 DOM。用 Outline 检查整体对齐检查整页布局的视觉对齐时尤其是组件之间分布较开、或包含特殊形状元素时单个查看尺寸效率很低。点击工具栏中的 outline 按钮即可切换toggle所有 UI 元素的轮廓线显示。开启后每个元素都会被框出来错位、未对齐或布局破损的问题会直接暴露出来再配合 Measure 定位到具体元素确认原因。在特定故事上关闭 Measure 或 Outline如果某些故事例如展示复杂图形、不想被轮廓线干扰的场景不需要这两个功能可以在该故事的parameters中通过measure或outline命名空间下的disable参数关闭。下面以 TS 故事为例来自文档示例文件为Button.stories.ts// 将 your-framework 替换为你实际使用的框架包如 react-vite、nextjs、vue3-vite 等 import type { Meta, StoryObj } from storybook/your-framework; import { Button } from ./Button; const meta { component: Button, } satisfies Metatypeof Button; export default meta; type Story StoryObjtypeof meta; export const Large: Story { parameters: { measure: { disable: true }, outline: { disable: true }, }, };JS 版本的 CSF 3 写法同理在故事对象里加import { Button } from ./Button; export default { component: Button, }; export const Large { parameters: { measure: { disable: true }, outline: { disable: true }, }, };注意disable的实际行为它会从工具栏移除对应工具并禁用该功能的行为。该参数最典型的用途是覆盖层级——如果项目级main.js|ts把该功能设为true级别的全局禁用你还可以在 meta组件或 story 级把disable设为false重新启用。文档给出的完整多框架示例见 addon-measure-and-outline-disabled.md。在整个 Storybook 中禁用如果想让整个 Storybook 都不出现 Measure 或 Outline在.storybook/main.js或main.ts的features配置中处理即可。Essentials 中每个功能对应一个独立 key可用 key 包括actions、backgrounds、controls、highlight、measure、outline、toolbars和viewport。例如关闭 Measure// .storybook/main.js // 将 your-framework 替换为你实际使用的框架包如 react-vite、nextjs、vue3-vite 等 export default { framework: storybook/your-framework, stories: [../src/**/*.mdx, ../src/**/*.stories.(js|jsx|mjs|ts|tsx)], features: { measure: false, // 关闭 measure 功能 }, };需要同时关闭 Outline 时在同一features对象中再加outline: false。该示例沿用了文档中展示features禁用功能的 完整写法文档以backgrounds: false演示key 规则相同。操作结果判断开启 Measure 后悬停元素能看到尺寸与margin/padding/border数值说明测量模式生效按m键可确认切换开关状态。开启 Outline 后故事中的元素出现轮廓框即可据此判断哪些元素未对齐关闭按钮后轮廓消失可对比确认问题元素。若设置了disable: true对应工具从工具栏移除且功能不再响应说明禁用配置生效。完整的参数 API 说明见 Measure outline。【免费下载链接】storybookStorybook is the industry standard workshop for building, documenting, and testing UI components in isolation项目地址: https://gitcode.com/GitHub_Trending/st/storybook创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Storybook 如何用 Measure 与 Outline 功能可视化排查布局间距与对齐问题
Storybook 如何用 Measure 与 Outline 功能可视化排查布局间距与对齐问题【免费下载链接】storybookStorybook is the industry standard workshop for building, documenting, and testing UI components in isolation项目地址: https://gitcode.com/GitHub_Trending/st/storybook当你在 Storybook 中开发组合组件或页面级布局时经常要处理margin、padding、border等留白问题。按文档描述的传统做法是打开浏览器开发者工具手动逐层检查 DOM 树来定位尺寸和对齐问题——这个过程繁琐且容易漏看。Storybook 的 Essentials 内置了 Measure 与 Outline 两个工具Measure 让你把鼠标悬停在故事中的任意元素上直接看到该元素的尺寸与留白数值Outline 则给页面上所有 UI 元素叠加轮廓线帮助你在组件分散或形状不规则时快速发现错位和破损的布局。适用前提这两个功能属于 Storybook essentialszero-config开箱即带推荐配置在 React、Vue 3、Angular、Web Components 四个核心框架以及 Ember、HTML、Svelte、Preact、Qwik、SolidJS 等社区框架的集成中均有支持见 框架功能支持表。用 Measure 查看元素尺寸与留白启动你的 Storybook 开发环境并打开目标故事。点击工具栏toolbar中的 measure 按钮开启测量模式。开启后鼠标悬停到故事中的任何一个元素上该元素的尺寸以及它的margin、padding、border留白都会直接显示出来。也可以用键盘快捷键切换按m键即可开/关 Measure无需回到工具栏操作。当你怀疑某个元素与预期间距不符时逐一悬停比较相邻元素显示的 margin/padding 数值就能判断间距到底出在哪个元素上而不必进开发者工具逐层展开 DOM。用 Outline 检查整体对齐检查整页布局的视觉对齐时尤其是组件之间分布较开、或包含特殊形状元素时单个查看尺寸效率很低。点击工具栏中的 outline 按钮即可切换toggle所有 UI 元素的轮廓线显示。开启后每个元素都会被框出来错位、未对齐或布局破损的问题会直接暴露出来再配合 Measure 定位到具体元素确认原因。在特定故事上关闭 Measure 或 Outline如果某些故事例如展示复杂图形、不想被轮廓线干扰的场景不需要这两个功能可以在该故事的parameters中通过measure或outline命名空间下的disable参数关闭。下面以 TS 故事为例来自文档示例文件为Button.stories.ts// 将 your-framework 替换为你实际使用的框架包如 react-vite、nextjs、vue3-vite 等 import type { Meta, StoryObj } from storybook/your-framework; import { Button } from ./Button; const meta { component: Button, } satisfies Metatypeof Button; export default meta; type Story StoryObjtypeof meta; export const Large: Story { parameters: { measure: { disable: true }, outline: { disable: true }, }, };JS 版本的 CSF 3 写法同理在故事对象里加import { Button } from ./Button; export default { component: Button, }; export const Large { parameters: { measure: { disable: true }, outline: { disable: true }, }, };注意disable的实际行为它会从工具栏移除对应工具并禁用该功能的行为。该参数最典型的用途是覆盖层级——如果项目级main.js|ts把该功能设为true级别的全局禁用你还可以在 meta组件或 story 级把disable设为false重新启用。文档给出的完整多框架示例见 addon-measure-and-outline-disabled.md。在整个 Storybook 中禁用如果想让整个 Storybook 都不出现 Measure 或 Outline在.storybook/main.js或main.ts的features配置中处理即可。Essentials 中每个功能对应一个独立 key可用 key 包括actions、backgrounds、controls、highlight、measure、outline、toolbars和viewport。例如关闭 Measure// .storybook/main.js // 将 your-framework 替换为你实际使用的框架包如 react-vite、nextjs、vue3-vite 等 export default { framework: storybook/your-framework, stories: [../src/**/*.mdx, ../src/**/*.stories.(js|jsx|mjs|ts|tsx)], features: { measure: false, // 关闭 measure 功能 }, };需要同时关闭 Outline 时在同一features对象中再加outline: false。该示例沿用了文档中展示features禁用功能的 完整写法文档以backgrounds: false演示key 规则相同。操作结果判断开启 Measure 后悬停元素能看到尺寸与margin/padding/border数值说明测量模式生效按m键可确认切换开关状态。开启 Outline 后故事中的元素出现轮廓框即可据此判断哪些元素未对齐关闭按钮后轮廓消失可对比确认问题元素。若设置了disable: true对应工具从工具栏移除且功能不再响应说明禁用配置生效。完整的参数 API 说明见 Measure outline。【免费下载链接】storybookStorybook is the industry standard workshop for building, documenting, and testing UI components in isolation项目地址: https://gitcode.com/GitHub_Trending/st/storybook创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考