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: var(--ig-primary-500);
}
동일한 접근 방식을 사용하여 base 부분의 속성이나 다른 구성 요소의 다른 부분을 수정하거나 추가할 수 있습니다.
CSS Variables
또 다른 접근 방식은 구성 요소 스타일의 다양한 부분을 담당하는 CSS 변수를 수정하는 것입니다. 편리하게도 아바타는 기존 팔레트의 변수를 사용하여 이니셜 스타일을 지정합니다. 자세히 살펴보면 색상 변수가--ig-gray-800 이라는 것을 알 수 있습니다. 아바타 범위에서 이 변수의 값을 수정하면 이니셜의 색상도 변경할 수 있습니다.
igc-avatar {
--ig-gray-800: hsl(0, 0%, 62%);
}
Rewriting the value of the --ig-gray-800 variable does the same as the previous example without explicitly overwriting the color property. This approach works, but could get a bit confusing to track where the color is coming from if you inspect the color property in isolation. Therefore, overwriting the color property in the base part is recommended.
Conclusion
CSS 부분과 CSS 변수에 대해 배우고 문서에 나열된 다른 방법과 함께 사용하면 모든 구성 요소의 모양을 원하는 대로 조정할 수 있습니다.
API References
ConfigureTheme