Ignite UI for Web Components에서 구성 요소 스타일 사용자 정의
Ignite UI for Web Components 사용자는 CSS 변수와 CSS 부분을 노출하여 스타일시트의 다양한 부분을 수정할 수 있습니다.
CSS Parts
이 문서의 이전 섹션에서 언급한 색상, 그림자, 타이포그래피, 원형율, 크기 및 간격과 같은 구성 요소 테마의 다양한 부분을 사용자 정의하는 방법 외에도 스타일시트의 특정 섹션을 덮어쓰면 손이 더러워질 수 있습니다. 각 구성 요소의 특정 부분을 타겟팅하여 구성합니다. 모든 구성 요소는 구성 요소에 대해 내부적으로 정의된 기존 스타일을 추가하거나 재정의할 수 있는 다양한 CSS 부분을 노출합니다.
구성 요소가 노출하는 부분은 각 구성 요소에 대한 API 설명서에서 확인할 수 있습니다. 탐색적 유형이고 코딩에 대해 좀 더 실무적인 접근 방식을 원할 경우 선택한 브라우저의 '검사기' 인터페이스를 사용하여 언제든지 이를 찾을 수 있습니다. 예를 들어, 아바타가 노출하는 부분을 확인하려면 브라우저에서 해당 구성요소를 마우스 오른쪽 버튼으로 클릭하고 '검사'(Chrome에서)를 클릭하면 됩니다. 그러면 웹 검사기가 열리고 요소 탐색기 탭에 맞춤 요소 마크업이 표시됩니다. 아래 스크린샷과 비슷한 내용이 표시되어야 합니다.
IgcAvatarComponent는 아바타 유형에 따라 base, icon, image 및 initials의 4가지 부분을 노출하는 것을 볼 수 있습니다. 이러한 부분을 사용하면 해당 범위 내에 정의된 스타일을 덮어쓸 수 있습니다.
따라서 이니셜의 색상을 팔레트의 기본 색상으로 변경하려면 다음과 같이 base 또는 initials의 색상 속성을 덮어쓸 수 있습니다.
igc-avatar::part(base) {
color: hsl(var(--ig-primary-500));
}
동일한 접근 방식을 사용하여 base 부분의 속성이나 다른 구성 요소의 다른 부분을 수정하거나 추가할 수 있습니다.
CSS Variables
또 다른 접근 방식은 구성 요소 스타일의 다양한 부분을 담당하는 CSS 변수를 수정하는 것입니다. 편리하게도 아바타는 기존 팔레트의 변수를 사용하여 이니셜 스타일을 지정합니다. 자세히 살펴보면 색상 변수가--ig-gray-800 이라는 것을 알 수 있습니다. 아바타 범위에서 이 변수의 값을 수정하면 이니셜의 색상도 변경할 수 있습니다.
igc-avatar {
--ig-gray-800: 212deg, 72%, 48%;
}
--ig-gray-800 변수의 값을 다시 쓰는 것은 색상 속성을 명시적으로 덮어쓰지 않고 이전 예제와 동일합니다. 이 접근 방식은 효과적이지만 색상 속성을 별도로 검사하는 경우 색상이 어디에서 나오는지 추적하기가 약간 혼란스러울 수 있습니다. 따라서 베이스 부분의 색상 속성을 덮어쓰는 것을 권장합니다.
Conclusion
CSS 부분과 CSS 변수에 대해 배우고 문서에 나열된 다른 방법과 함께 사용하면 모든 구성 요소의 모양을 원하는 대로 조정할 수 있습니다.
API References
ConfigureTheme