設計系統中的組件間距

考慮<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中文網其他相關文章！