设计系统中的组件间距

考虑<card></card>成分。它不应直接与其他组件相邻，而无需间距。这几乎适用于每个组件。那么，如何在设计系统中管理组件间距？

应该将间距直接应用于<card></card>使用边缘（例如， margin-block-end: 1rem; margin-inline-end: 1rem; ）？这是有问题的，因为它假定卡的位置的上下文。如果卡嵌套在一个<grid></grid>已经使用gap: 1rem组件？这会产生冲突和硬编码的间距值。

组件间距的方法

存在几种方法，每种方法都有权衡：

• 烘烤间距：将间距直接纳入每个组件。这是限制性和僵化的。
• 间距道具：将间距值作为道具（例如，<card space="xxl"></card> ）。这可能会变成冗长的，有可能需要多个方向的多个道具。
• 专用间距组件：使用类似的组件<spacer></spacer>或者<layout></layout>仅用于间距。这干净地分开了问题，但可以增加不必要的DOM元素和复杂性。

最佳解决方案是辩论问题。尽管有些人倡导完全消除边缘，但一种更务实的方法是将布局和间隔关注与核心组件功能分开。内容组件的位置不可知，允许更高级别的布局机制来处理间距。

弹性箱和网格中gap的采用越来越多，这表明仅依赖边缘的转变。这种趋势符合人们对更多声明性和可维护的布局的渴望。

以上是设计系统中的组件间距的详细内容。更多信息请关注PHP中文网其他相关文章！