디자인 시스템에서 구성 요소 간격

고려하십시오<card></card> 요소. 간격없이 다른 구성 요소와 직접 인접 해있어서는 안됩니다. 이것은 거의 모든 구성 요소에 적용됩니다. 그렇다면 설계 시스템 내에서 구성 요소 간격을 어떻게 관리해야합니까?

간격을 직접 적용해야합니다<card></card> 마진 사용 (예 : margin-block-end: 1rem; margin-inline-end: 1rem; )? 이것은 카드 배치의 컨텍스트를 가정하기 때문에 문제가됩니다. 카드가 a<grid></grid> gap: 1rem ? 이것은 충돌과 하드 코딩 된 간격 값을 만듭니다.

구성 요소 간격에 대한 접근

각각 트레이드 오프가있는 여러 접근법이 있습니다.

• 구운 간격 : 간격을 각 구성 요소에 직접 통합합니다. 이것은 제한적이고 융통성이 없습니다.
• 간격 소품 : 소품으로 간격 값을 전달합니다 (예 :<card space="xxl"></card> ). 이것은 장악이 될 수 있으며, 잠재적으로 다른 방향으로 여러 소품이 필요합니다.
• 전용 간격 구성 요소 : 구성 요소 사용<spacer></spacer> 또는<layout></layout> 간격을 위해서만. 이것은 우려 사항을 깨끗하게 분리하지만 불필요한 DOM 요소와 복잡성을 추가 할 수 있습니다.

최적의 솔루션은 논쟁의 문제입니다. 일부는 마진을 완전히 제거하기위한 옹호자이지만,보다 실용적인 접근 방식은 핵심 구성 요소 기능과 레이아웃과 간격 문제를 분리하는 것입니다. 컨텐츠 구성 요소는 배치에 적합해야하므로 더 높은 수준의 레이아웃 메커니즘이 간격을 처리 할 수 ​​있습니다.

Flexbox 및 Grid에서 gap 의 채택이 증가함에 따라 마진에만 의존하는 것과는 거리가 멀다는 것을 시사합니다. 이 추세는 선언적이고 유지 가능한 레이아웃에 대한 욕구와 일치합니다.

위 내용은 디자인 시스템에서 구성 요소 간격의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!