스타일과 주제

그리드 라이트는 부트스트랩, 머티리얼, 플루언트, 인디고 네 가지 뚜렷한 테마를 가지고 있습니다. 그리드와 UI 컴포넌트에는 테마가 내장되어 있지만, 팔레트, 타이포그래피 및 기타 글로벌 구성을 위한 전역 스타일시트가 필요합니다.

Loading a Base Themes

프로젝트 유형, 설정 및 빌드 구성에 따라 아래 파일 중 하나를 포함하는 방법이 달라집니다. 프레임워크나 빌드 도구를 사용한다면 출력 번들에 외부 스타일을 추가하는 방법에 관한 문서를 참고하세요.

일반적인 규칙으로, 폴더를themes 자산 디렉터리에 복사해서 index.html에서 테마를 연결할 수 있습니다.

주제	변종	길
부트스트랩	빛	node_modules/igniteui-webcomponents/themes/light/bootstrap.css
부트스트랩	어두운	node_modules/igniteui-webcomponents/themes/dark/bootstrap.css
재료	빛	node_modules/igniteui-webcomponents/themes/light/material.css
재료	어두운	node_modules/igniteui-webcomponents/themes/dark/material.css
유창한	빛	node_modules/igniteui-webcomponents/themes/light/fluent.css
유창한	어두운	node_modules/igniteui-webcomponents/themes/dark/fluent.css
남빛	빛	node_modules/igniteui-webcomponents/themes/light/indigo.css
남빛	어두운	node_modules/igniteui-webcomponents/themes/dark/indigo.css

아래 샘플에서는 모든 기본 기본 테마를 미리 볼 수 있습니다.

Creating Custom Themes

Grid Lite 패키지에 기본 포함된 테마 외에도, CSS 커스텀 속성 세트를 사용해 데이터 그리드의 외관과 느낌을 더 맞춤화할 수 있습니다.

자세한 내용은 주제 주제를 참고하세요.

.grid-sample {
  --header-background: #494949;
  --header-text-color: #f2c43c;
  --cell-active-border-color: #f2c43c;
  --row-hover-background: #707070;
  --row-hover-text-color: #f2c43c;
}

위에서 보여준 맞춤형 테마 예시를 소개합니다.

Additional Resources

• Column Configuration
• 필터링
• 정렬

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

• Grid Lite GitHub