Theme Web Components Grid

Web Components 테마 CSS를 사용하면 Ignite UI for Web Components 그리드를 브랜드 아이덴티티에 맞게 쉽게 사용자 지정할 수 있습니다. 미리 정의된 테마 및 색상표 외에도 대체 CSS 사용자 지정 속성 집합을 사용하여 데이터 그리드의 모양과 느낌을 추가로 사용자 지정할 수 있습니다.

Available Theming Properties

속성 이름	유형	설명
--그리드 고도	0-24 사이의 숫자	그리드에 사용될 고도 수준
--드래그 고도	0-24 사이의 숫자	이동 가능한 요소(예: 열 헤더)에 사용되는 고도 수준
--grouparea-색상	색상	그리드 그룹 영역 텍스트 색상
--grouparea-배경	색상	그리드 그룹 영역 텍스트 색상
--드롭 영역 텍스트 색상	색상	드롭 영역 텍스트 색상
--드롭 영역 아이콘 색상	색상	드롭 영역 아이콘 색상
--드롭 영역 배경	색상	드롭 영역 배경색
--드롭 영역에 드롭 배경	색상	드롭 색상의 드롭 영역 배경
--헤더 배경	색상	그리드 헤더 배경색
--헤더 텍스트 색상	색상	그리드 헤더 텍스트 색상
--헤더 선택 배경	색상	선택 시 그리드 헤더 배경색입니다(예: 열 선택).
--헤더-선택-텍스트-색상	색상	선택 시 그리드 헤더 텍스트 색상입니다(예: 열 선택).
--정렬 가능한 헤더 아이콘 호버 색상	색상	열을 정렬할 수 있을 때 그리드 헤더에 마우스를 올리면 아이콘 색상이 표시됩니다.
--정렬-헤더-아이콘-색상	색상	정렬된 테이블 헤더 아이콘 색상
--헤더-테두리-너비	테두리 너비	헤더 테두리에 사용되는 테두리 너비입니다.
--헤더 테두리 스타일	테두리 스타일	헤더 테두리에 사용되는 테두리 스타일입니다. '점선', '점선' 또는 '단색'일 수 있습니다.
--헤더-테두리-색상	색상	머리글 테두리에 사용되는 색상입니다.
--고스트 헤더 배경	색상	드래그된 헤더 배경색입니다.
--고스트-헤더-텍스트-색상	색상	드래그된 헤더 텍스트 색상입니다.
--고스트-헤더-아이콘-색상	색상	드래그된 헤더 아이콘 색상입니다.
--필터링 배경 및	색상	고급 필터링 "AND" 조건의 배경색입니다.
--필터링 배경-또는	색상	고급 필터링 "AND" 조건의 초점/선택 시 배경색입니다.
--필터링 배경 및--초점	색상	고급 필터링 "OR" 조건의 배경색입니다.
--필터링-배경-또는--초점	색상	고급 필터링 "OR" 조건의 초점/선택 시 배경색입니다.
--그리드 테두리 색상	색상	그리드를 둘러싸는 테두리 색상입니다.
--내용-배경	색상	그리드 본문 배경색입니다.
--내용-텍스트-색상	색상	그리드 본문 텍스트 색상입니다.
--행-홀수-배경	색상	홀수 행의 배경색입니다.
--행 짝수 배경	색상	짝수 행의 배경색입니다.
--행-홀수-텍스트-색상	색상	홀수 행의 텍스트 색상입니다.
--행-짝수-텍스트-색상	색상	짝수 행의 텍스트 색상입니다.
--행 선택 배경	색상	선택한 행 배경색입니다.
--트리 선택-필터링-행-텍스트-색상	색상	선택/필터링된 행 텍스트 색상
--행-선택-텍스트-색상	색상	선택한 행 텍스트 색상입니다.
--배경 내에서 셀 선택	색상	선택한 행/열 내에서 선택한 셀의 배경입니다.
--텍스트 색상 내에서 셀 선택	색상	선택한 행/열 내에서 선택한 셀의 색상입니다.
--행 선택-호버-배경	색상	선택한 행 호버 배경입니다.
--행-선택-호버-텍스트-색상	색상	선택한 행 호버 텍스트
--행-호버-배경	색상	호버 행 배경색입니다.
--행-호버-텍스트-색상	색상	호버 행 텍스트 색상입니다.
--행 테두리 색상	색상	그리드 본문 행 사이의 테두리 색상입니다.
--고정 테두리 너비	테두리 너비	고정된 행/열의 테두리 너비입니다.
--고정 테두리 스타일	테두리 스타일	고정된 행/열의 테두리 스타일입니다. '점선', '점선' 또는 '단색'일 수 있습니다.
--고정 테두리 색상	색상	고정된 행/열의 테두리 색상입니다.
--셀 활성 테두리 색상	색상	활성(초점을 맞춘) 셀 테두리 색상입니다.
--셀 선택 배경	색상	선택한 셀 배경색입니다.
--트리 선택-필터링-셀-텍스트-색상	색상	선택/필터링된 셀 텍스트 색상
--셀 선택 텍스트 색상	색상	선택한 셀 텍스트 색상입니다.
--셀 편집-배경	색상	편집 모드에서 셀의 배경색입니다.
--편집 모드 색상	색상	편집 모드의 텍스트 색상
--편집된 행 표시기	색상	편집된 행의 표시기 색상입니다.
--셀-새-색상	색상	편집되지 않은 새 셀의 텍스트 색상입니다. 그리드에 새 행을 추가할 때 사용됩니다.
--셀 편집된 값-색상	색상	셀 편집 값의 색상입니다.
--셀 비활성화 색상	색상	비활성화된 셀의 텍스트 색상입니다.
--크기 조정-선-색상	색상	그리드 헤더의 선 색상 크기가 조정됩니다.
--드롭 표시기 색상	색상	드롭 표시기의 색상입니다.
--그룹-라벨-열-이름-텍스트	색상	그리드 그룹 행 열 이름 텍스트 색상입니다.
--그룹-라벨-아이콘	색상	그리드 그룹 행 아이콘 색상입니다.
--그룹-라벨-텍스트	색상	그리드 그룹 행 텍스트 색상입니다.
--확장-모든-아이콘-색상	색상	그리드 헤더는 모든 그룹 행 아이콘 색상을 확장합니다.
--expand-all-icon-hover-color	색상	그리드 헤더는 모든 그룹 행 아이콘 호버 색상을 확장합니다.
--확장-아이콘-색상	색상	그리드 행 확장 아이콘 색상입니다.
--확장-아이콘-호버-색상	색상	그리드 행 확장 아이콘 마우스오버 색상입니다.
--활성-확장-아이콘-색상	색상	드롭 색상의 드롭 영역 배경입니다.
--active-expand-icon-hover-color	색상	드롭 색상의 드롭 영역 배경입니다.
--그룹 수-배경	색상	그리드 그룹 행 연속 배지 배경색입니다.
--그룹 수-텍스트-색상	색상	그리드 그룹 행 연속 배지 텍스트 색상입니다.
--그룹 행 배경	색상	그리드 그룹 행 배경색입니다.
--그룹 행 선택 배경	색상	드롭 색상의 드롭 영역 배경입니다.
--필터링 헤더 배경	색상	필터링된 열 헤더의 배경색입니다.
--필터링-헤더-텍스트-색상	색상	필터링된 열 헤더의 텍스트 색상입니다.
--필터링 행 배경	색상	필터링 행의 배경색입니다.
--필터링-행-텍스트-색상	색상	필터링 행의 텍스트 색상입니다.
--트리 필터링된 텍스트 색상	색상	초점이 맞춰진 그룹화 행 배경색입니다.
--본문-요약-배경	색상	본문에 위치한 요약 그룹의 배경색입니다.
--본문-요약-텍스트-색상	색상	본문에 위치한 요약 그룹의 텍스트 색상입니다.
--루트-요약-배경	색상	바닥글에 위치한 요약 그룹의 배경색입니다.
--루트-요약-텍스트-색상	색상	바닥글에 있는 요약 그룹의 텍스트 색상입니다.
--행 강조	색상	그리드 행 강조 색상입니다.
--행-고스트-배경	색상	드래그된 행의 배경색입니다.
--행-드래그-색상	색상	드래그 핸들의 색상입니다.
--드롭 영역 테두리 반경	0과 1 사이의 숫자	놓기 영역에 사용되는 테두리 반경입니다. 0과 1 사이의 분수, 픽셀 또는 퍼센트일 수 있습니다.

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for Web Components 포럼
• ​GitHub Ignite UI for Web Components