考虑<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中文网其他相关文章!