Komponentenabstand in einem Designsystem

Betrachten Sie a<card></card> Komponente. Es sollte nicht direkt an andere Komponenten ohne Abstand geraten. Dies gilt für fast jede Komponente. Wie sollte der Komponentenabstand in einem Designsystem verwaltet werden?

Sollte der Abstand direkt auf die angewendet werden<card></card> using margins (eg, margin-block-end: 1rem; margin-inline-end: 1rem; )? Dies ist problematisch, da es den Kontext der Platzierung der Karte nimmt. Was ist, wenn die Karte innerhalb eines verschachtelt ist<grid></grid> Komponente, die bereits gap: 1rem ? Dies schafft Konflikte und hartcodierte Abstandswerte.

Ansätze zum Abstand von Komponenten

Es gibt mehrere Ansätze mit jedem Kompromiss:

• Baked-in Spacing: Incorporating spacing directly into each component. Dies ist restriktiv und unflexibel.
• Abstandsrequisiten: Abstandswerte als Requisiten übergeben (z. B., z. B., z.<card space="xxl"></card> ). Dies kann ausführlich werden und möglicherweise mehrere Requisiten für verschiedene Richtungen erfordern.
• Dedizierte Abstandskomponenten: Verwenden von Komponenten wie<spacer></spacer> oder<layout></layout> ausschließlich zum Abstand. Dies trennt die Bedenken, kann jedoch unnötige DOM -Elemente und Komplexität hinzufügen.

Die optimale Lösung ist eine Frage der Debatte. Während einige sich für die vollständige Beseitigung von Margen befassen, besteht ein pragmatischerer Ansatz darin, die Layout- und Abstandsbedenken von der Kernkomponentenfunktionalität zu trennen. Inhaltskomponenten sollten ihrer Platzierung agnostisch sein, sodass Layout-Mechanismen auf höherer Ebene den Abstand verarbeiten können.

The increasing adoption of gap in Flexbox and Grid suggests a shift away from relying solely on margins. Dieser Trend entspricht dem Wunsch nach deklarativeren und wartbaren Layouts.

Das obige ist der detaillierte Inhalt vonKomponentenabstand in einem Designsystem. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!