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