Colin's Blog
[design] ag-grid 디자인을 원하는대로 수정하기

ag-grid 디자인을 원하는대로 수정하기

테마 수정하는 방법

  1. 제공된 테마 중 하나를 사용. CSS 수정으로 간단하게 원하는 부분을 수정한다
  2. 테마 매개변수 및 CSS를 사용하여 제공된 테마를 재정의. 이를 위해서는 Sass 파일을 빌드하도록 프로젝트를 구성해야한다. 모양, 느낌, 색상, 패딩 및 테두리와 같은 요소를 변경할 수 있다
  3. 기본 테마를 확장하여 처음부터 자신만의 테마를 만든다. 제공된 테마와 크게 다르게 보이는 경우에 적합한 옵션

3번 방법을 활용해 제공된 테마를 확장한 다음, 완전히 다른 디자인을 만들기 위해 광범위하게 수정하면 몇가지 문제가 발생할 수 있다.

  1. 제공된 테마에 원하지 않는 디자인 요소가 표함된 경우 CSS 규칙을 추가하여 제거해야한다
  2. 릴리즈 버전간, 세부사항 중 일부가 변경되어 재선언한 스타일이 적용되지 않을 수 있다. 제공된 테마와 완전히 다른 륵엔필을 원하는 앱의 경우 기본 테마를 확장하는것이 좋다. 기본 테마에는 가장 기본 구성 가능한 테두리와 적절한 기본 패딩이 포함되어있다.

Customizing Themes

제공되고 있는 테마는 theme 파라미터(매개변수)와 CSS 규칙으로 커스터마이징 할 수 있다. 엘리먼트의 색상, 여백, 테두리와 같은 룩앤필을 수정하기 위해 프로젝트에 Sass 파일을 빌드할 수 있는 환경이 요구된다.

Theme Parameters

테마의 외형을 바꾸기 위한 인수. 몇몇 파라미터(매개변수)는 CSS 재정의로 달성하기 어려운 효과를 가져온다. Sass API를 통해 매개 변수를 설정하고 CSS 변수를 사용해 색상 매개변수를 추가로 설정할 수 있다.

주요한 테마 매개 변수리스트는 아래와 같다.

Sass를 사용해 매개변수 셋팅하기

Sass로 매개변수를 정의하기 위해, 프로젝트가 Sass파일을 컴파일하도록 셋팅되어야한다. 추천되는 방식은 웹팩을 통하는것이다. 테마 수정을 위해 테마 믹스인 파일을 포함시키고 믹스인 매개변수를 호출해 커스터미이징한다.

또는 테마 매개변수가 없다면 선택자에 스타일을 재선언 해주는 방식도 가능하다.

@import "~ag-grid-community/src/styles/ag-grid.scss";
@import "~ag-grid-community/src/styles/ag-theme-alpine/sass/ag-theme-alpine-mixin";

.ag-theme-alpine {
    @include ag-theme-alpine((
        // use theme parameters where possible
        alpine-active-color: deeppink
    ));

    .ag-header {
        // or write CSS selectors to make customisations beyond what the parameters support
        text-style: italic;
    }
}

테마의 믹스인 파일을 불러오기 전 구조 스타일 (ag-grid.scss) 을 포함시킨다. 이는 즉 구조와 테마의 스타일이 컴파일된 CSS에 포함된다는 의미이다. 또는, 첫번째 @import 를 제외하고 구조 스타일 시트를 HTML페이지에 별도로 추가하는것도 가능하다.

참고자료

© 2018 Colin. All rights reserved.