Angular 트리 그리드 조건부 스타일링

    IgxTreeGrid 구성요소에 사용자 정의 스타일을 제공해야 하는 경우 행 또는 셀 수준에서 수행할 수 있습니다.

    트리 그리드 조건부 행 스타일 지정

    Ignite UI for Angular의 IgxTreeGrid 구성 요소는 사용자 지정 규칙에 따라 행의 조건부 스타일을 지정하는 두 가지 방법을 제공합니다.

    • By setting rowClasses input on the IgxTreeGrid component;
    • IgxTreeGrid 구성 요소에 rowStyles 입력을 설정합니다.

    이 주제에서는 두 가지 모두에 대해 더 자세히 다룰 것입니다.

    rowClass 사용

    rowClasses 입력을 설정하고 사용자 정의 규칙을 정의하여 IgxTreeGrid 행의 스타일을 조건부로 지정할 수 있습니다.

    <!-- sample.component.html -->
    <igx-tree-grid #treeGrid [data]="data" [height]="'600px'" [width]="'100%'" [rowClasses]="rowClasses">
        ...
    </igx-tree-grid>
    html

    rowClasses 입력은 키-값 쌍을 포함하는 객체 리터럴을 허용합니다. 여기서 키는 CSS 클래스의 이름이고 값은 부울 또는 부울 값을 반환하는 콜백 함수입니다.

    // sample.component.ts
    
    public rowClasses = {
      activeRow: this.activeRowCondition
    };
    
    public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?.row === row.index;
    typescript
    // sample.component.scss
    
    ::ng-deep {
     .activeRow {
      border: 2px solid #fc81b8;
      border-left: 3px solid #e41c77;
     }
    }
    scss

    또는 ViewEncapsulation.None를 사용하여::ng-deep 사용자 정의 스타일을 현재 구성요소와 해당 자식을 통해 강제로 내려갑니다.

    데모

    EXAMPLE
    TS
    HTML
    SCSS

    이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.

    rowStyle 사용

    이제 열은 데이터 행의 조건부 스타일 지정을 허용하는 rowStyles 속성을 노출합니다. rowClasses와 유사하게 키가 스타일 속성이고 값이 평가용 표현식인 객체 리터럴을 허용합니다. 또한 조건 없이 일반 스타일을 적용할 수도 있습니다.

    rowStylesrowClasses에 대한 콜백 서명은 다음과 같습니다.

    (row: RowType) => boolean
    ts

    스타일을 정의해 보겠습니다.

    // component.ts
    public background = (row: RowType) => row.data['Title'] === 'CEO' ? '#6c757d' :
        row.data['Title'].includes('President') ? '#adb5bd' :
        row.data['Title'].includes('Director') ?  '#ced4da' :
        row.data['Title'].includes('Manager') ? '#dee2e6' :
        row.data['Title'].includes('Lead') ? '#e9ecef' :
        row.data['Title'].includes('Senior') ? '#f8f9fa' : null;
    
    public rowStyles = {
        background: this.background,
        'border-left': (row: RowType) => row.data['Title'] === 'CEO' || row.data['Title'].includes('President') ?
            '2px solid' : null,
        'border-color': (row: RowType) => row.data['Title'] === 'CEO' ? '#495057' : null,
        color: (row: RowType) => row.data['Title'] === 'CEO' ? '#fff' : null
    };
    typescript
    <!-- sample.component.html -->
    <igx-tree-grid #treeGrid [data]="data" [moving]="true" primaryKey="ID" foreignKey="ParentID"
            width="100%" height="550px" [rowStyles]="rowStyles">
        ...
    </igx-tree-grid>
    html

    데모

    EXAMPLE
    TS
    HTML
    SCSS

    트리 그리드 조건부 셀 스타일 지정

    개요

    Ignite UI for Angular의 IgxTreeGrid 구성 요소는 사용자 지정 규칙에 따라 셀의 조건부 스타일을 지정하는 두 가지 방법을 제공합니다.

    • IgxColumnComponent 입력 cellClasses 키-값 쌍이 포함된 객체 리터럴로 설정합니다. 키는 CSS 클래스의 이름이고 값은 부울 또는 부울 값을 반환하는 콜백 함수입니다. 그 결과 셀의 편리한 소재 스타일링이 이루어졌습니다.
    // component.ts file
    public beatsPerMinuteClasses = {
        downFont: this.downFontCondition,
        upFont: this.upFontCondition
    };
    ...
    
    private downFontCondition = (rowData: any, columnKey: any): boolean => {
        return rowData[columnKey] <= 95;
    }
    ts
    // component.scss file
    .upFont {
      color: red;
    }
    
    .downFont {
      color: green;
    }
    scss

    cellClass 사용

    IgxColumnComponent ​ ​cellClasses 입력을 설정하고 사용자 정의 규칙을 정의하여 IgxTreeGrid 셀의 스타일을 조건부로 지정할 수 있습니다.

    <!-- sample.component.html -->
    <igx-column field="UnitPrice" header="Unit Price" [dataType]="'currency'" [pipeArgs]="formatOptions" [cellClasses]="priceClasses"></igx-column>
    html

    cellClasses 입력은 키-값 쌍을 포함하는 객체 리터럴을 허용합니다. 여기서 키는 CSS 클래스의 이름이고 값은 부울 또는 부울 값을 반환하는 콜백 함수입니다.

    // sample.component.ts
    
    private upPriceCondition = (rowData: any, columnKey: any): boolean => {
        return rowData[columnKey] > 5;
    }
    
    private downPriceCondition = (rowData: any, columnKey: any): boolean => {
        return rowData[columnKey] <= 5;
    }
    
    public priceClasses = {
        downPrice: this.downPriceCondition,
        upPrice: this.upPriceCondition
    };
    typescript
    // sample.component.scss
    
    ::ng-deep {
        .upPrice {
            color: red;
        }
    
        .downPrice {
            color: green;
        }
    }
    scss

    또는 ViewEncapsulation.None를 사용하여::ng-deep 사용자 정의 스타일을 현재 구성요소와 해당 자식을 통해 강제로 내려갑니다.

    데모

    EXAMPLE
    TS
    HTML
    SCSS

    • 키가 스타일 속성이고 값이 평가용 표현식인 객체 리터럴을 허용하는 IgxColumnComponent 입력 cellStyles 사용합니다.
    public styles = {
        'background': 'linear-gradient(180deg, #dd4c4c 0%, firebrick 100%)',
        'text-shadow': '1px 1px 2px rgba(25,25,25,.25)',
        'animation': '0.25s ease-in-out forwards alternate popin'
    };
    ts

    이제 cellStylescellClasses에 대한 콜백 서명이 다음으로 변경되었습니다.

    (rowData: any, columnKey: string, cellValue: any, rowIndex: number) => boolean
    ts

    cellStyle 사용

    이제 열은 열 셀의 조건부 스타일 지정을 허용하는 cellStyles 속성을 노출합니다. cellClasses와 유사하게 키가 스타일 속성이고 값이 평가용 표현식인 객체 리터럴을 허용합니다. 또한 아무런 조건 없이 일반 스타일링을 쉽게 적용할 수 있습니다.

    위의 샘플 에서는 다음을 만들었습니다.

    • 열 인덱스를 기반으로 적용되는 두 가지 스타일입니다.
    • 또한 짝수/홀수 행을 기준으로 text color 변경합니다.

    cellStyles에 대한 콜백 서명은 다음과 같습니다.

    (rowData: any, columnKey: string, cellValue: any, rowIndex: number) => boolean
    ts

    스타일을 정의해 보겠습니다.

    // component.ts
    public oddColStyles = {
        background: 'linear-gradient(to right, #b993d6, #8ca6db)',
        color: (rowData, coljey, cellValue, rowIndex) => rowIndex % 2 === 0 ? 'white' : 'gray',
        animation: '0.75s popin'
    };
    
    public evenColStyles = {
        background: 'linear-gradient(to right, #8ca6db, #b993d6)',
        color: (rowData, coljey, cellValue, rowIndex) => rowIndex % 2 === 0 ? 'gray' : 'white',
        animation: '0.75s popin'
    };
    typescript

    ngOnInit 에서는 IgxTreeGrid 열을 동적으로 생성하는 데 사용되는 사전 정의된 columns 컬렉션의 각 열에 대한 cellStyles 구성을 추가합니다.

    // component.ts
    public ngOnInit() {
        this.data = ORDERS_DATA;
         this.columns = [
            { field: 'ID' },
            { field: 'Name' },
            { field: 'UnitPrice' },
            { field: 'OrderDate' }
        ];
    
        this.applyCSS();
    }
    ts
    public applyCSS() {
        this.columns.forEach((column, index) => {
            column.cellStyles = (index % 2 === 0 ? this.evenColStyles : this.oddColStyles);
        });
    }
    
    public updateCSS(css: string) {
        this.oddColStyles = {...this.oddColStyles, ...JSON.parse(css)};
        this.evenColStyles = {...this.evenColStyles, ...JSON.parse(css)};
        this.applyCSS();
    }
    ts
    //component.html
    <igx-tree-grid
        #grid1 [data]="data"
        primaryKey="ID" foreignKey="ParentID"
        height="350px">
        <igx-column *ngFor="let c of columns"
            [field]="c.field"
            [header]="c.header"
            [cellStyles]="c.cellStyles">
        </igx-column>
    </igx-tree-grid>
    html

    popin 애니메이션 정의

    // component.scss
    @keyframes popin {
        0% {
            opacity: 0.1;
            transform: scale(.75, .75);
            filter: blur(3px) invert(1);
        }
    
        50% {
            opacity: .5;
            filter: blur(1px);
        }
    
        100% {
            transform: scale(1, 1);
            opacity: 1;
            filter: none;
        }
    }
    scss

    데모

    EXAMPLE
    TS
    HTML
    SCSS

    알려진 문제 및 제한 사항

    • 다른 열에서 동일한 조건에 바인딩되는 셀이 있고 한 셀이 업데이트되는 경우 조건이 충족되면 다른 셀은 새 값을 기반으로 업데이트되지 않습니다. 나머지 셀에 변경 사항을 적용하려면 파이프 검사를 수행해야 합니다. 아래 예는 이를 수행하는 방법을 보여줍니다. spread operator(...)onCellEdit 이벤트. 이렇게하면 원래 객체가 새 인스턴스로 복사되고 순수 파이프가 발사됩니다.
    public backgroundClasses = {
        myBackground: (rowData: any, columnKey: string) => {
            return rowData.Col2 < 10;
        }
    };
    ...
    
    editDone(evt) {
        this.backgroundClasses = {...this.backgroundClasses};
    }
    
    ts
    <igx-tree-grid #grid1 [data]="data" height="500px" width="100%" (onCellEdit)="editDone($event)">
      <igx-column field="Col1" dataType="number" [cellClasses]="backgroundClasses"></igx-column>
      <igx-column field="Col2" dataType="number" [editable]="true" [cellClasses]="backgroundClasses"></igx-column>
      <igx-column field="Col3" header="Col3" dataType="string" [cellClasses]="backgroundClasses"></igx-column>
    </igx-tree-grid>
    html
    App Builder | CTA 배너

    API 참조

    추가 리소스

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