基本布局调试

作为前端开发者，我们花费大量时间使用 CSS 构建布局。这意味着需要不断地将编码后的组件与设计规范进行交叉检查。确保我们选择了正确的 margin 和 padding 值。或者确保项目定位正确。

浏览器开发者工具非常适合调试盒模型，但当您想要快速检查间距和对齐方式时，它们会显得笨拙。您必须在多个选项卡之间跳转才能找到所需的信息。

Storybook 6.3 引入了一组新的插件，这些插件结合了浏览器开发者工具的强大功能和设计工具的人体工程学。您可以轻松测量距离并验证尺寸和定位。它们还使布局调试对于非开发人员也变得容易上手。

请继续阅读以了解有关 Measure 和 Outline 插件的更多信息。以及如何使用它们来加速您的 UI 开发工作流程。

间距

您不能仅仅用肉眼来判断两个元素之间的距离。您需要某种方法来测量它。在 Figma 和 Sketch 等设计工具中，您可以按住 option 键来测量图层之间的距离。信息会直接覆盖在您正在评估的 UI 之上。因此，您只需 glance 一眼即可检查间距。比在开发者工具中点击要快得多！

Measure 插件 将这种熟悉的功能带到了 Storybook。

CSS 中的空白稍微复杂一些。它是 margin、padding 和 border 的组合。因此，Storybook 将可视化 盒模型 并显示所选 DOM 节点的尺寸。

从工具栏启用插件或按 m 键，然后悬停在您要检查的元素上。

对齐

检查视觉对齐是构建布局的另一个关键方面。当 DOM 元素相距遥远或形状奇特时，它会变得特别棘手。Pesticide 开创了在页面上勾勒出每个 UI 元素轮廓的技术。这些轮廓充当指南，使验证定位变得更加容易。

Outline 插件 允许您只需单击一下即可切换所有 UI 元素上的轮廓。您可以立即发现错误和损坏的布局！

立即获取

Measure 和 Outline 插件是 essential kit 的一部分，现在已在 Storybook 6.3 beta 版中提供。通过在项目根目录中运行以下命令来安装它。

npx sb@next init

升级现有项目

npx sb upgrade --prerelease

并更新您的 Storybook 配置 (.storybook/main.js) 以包含 essentials 插件。

module.exports = {
  addons: ['@storybook/addon-essentials'],
};

参与进来

Storybook 的 essential layout 插件使构建规范变得更加容易。开发人员只需单击一下即可获得 DOM 元素的 margin、padding 和尺寸。设计人员无需依赖开发者工具即可验证布局。

专业的 UI 开发人员每天都依赖 Storybook。该项目由 1,300 多名开源贡献者维护，并由顶级维护人员指导的指导委员会指导。如果您有兴趣贡献，请在 GitHub 上查看 Storybook，创建 issue，提交 pull request 或 构建插件。在 Open Collective 上捐款。在 Discord 中与我们聊天 — 通常有维护人员在线。在 Twitter 上以及通过注册我们的邮件列表来了解 Storybook 的最新消息。