Angular 다중 행 레이아웃

    다중 행 레이아웃은 igxGridComponent의 렌더링 기능을 확장합니다. 이 기능을 사용하면 단일 데이터 레코드를 여러 개의 표시 행으로 분할할 수 있습니다.

    Angular Multi-row Layout Example

    다중 행 레이아웃 선언은 igx-column-layout 구성 요소를 통해 이루어집니다. 각 igx-column-layout 구성 요소는 하나 이상의 igx-column 구성 요소를 포함하는 블록으로 간주되어야 합니다. 일부 그리드 기능은 블록 수준에서 작동합니다(아래 "기능 통합" 섹션에 나열되어 있음). 예를 들어 가상화는 블록을 사용하여 가상 청크를 결정하므로 더 나은 성능을 위해 레이아웃에서 허용하는 경우 열을 더 많은 igx-column-layout 블록으로 분할합니다. 다중 행 레이아웃을 구성할 때 해당 블록 외부에 열이 없어야 하며 IgxColumnGroupComponent 사용하면 안 됩니다. 다중 행 레이아웃은 그리드 레이아웃 사양 위에 구현되며 해당 요구 사항을 준수해야 합니다.

    IgxColumnComponent 각 셀의 위치와 범위를 결정하기 위해 4개의 @Input 속성을 노출합니다.

    • colStart- 필드가 시작되는 열 인덱스입니다. 이 속성은 필수 입니다.
    • rowStart- 필드가 시작되는 행 인덱스입니다. 이 속성은 필수 입니다.
    • colEnd- 현재 필드가 끝나야 하는 열 인덱스입니다. colStart와 colEnd 사이의 열 양에 따라 해당 필드에 걸쳐 있는 열의 양이 결정됩니다. 이 속성은 선택 사항 입니다. 설정하지 않으면 기본값은 colStart + 1 입니다.
    • rowEnd- 현재 필드가 끝나야 하는 행 인덱스입니다. rowStart와 rowEnd 사이의 행 양에 따라 해당 필드에 걸쳐 있는 행의 양이 결정됩니다. 이 속성은 선택 사항 입니다. 설정하지 않으면 기본값은 rowStart + 1 입니다.
    <igx-column-layout>
	<igx-column [rowStart]="1" [colStart]="1" [rowEnd]="3" field="ID"></igx-column>
</igx-column-layout>
<igx-column-layout>
	<igx-column [rowStart]="1" [colStart]="1" [colEnd]="3" field="CompanyName"></igx-column>
	<igx-column [rowStart]="2" [colStart]="1" [colEnd]="2" field="ContactName"></igx-column>
	<igx-column [rowStart]="2" [colStart]="2" [colEnd]="3" field="ContactTitle"></igx-column>
</igx-column-layout>
<igx-column-layout>
	<igx-column [rowStart]="1" [colStart]="1" [colEnd]="3" field="Country"></igx-column>
	<igx-column [rowStart]="1" [colStart]="3" [colEnd]="5" field="Region"></igx-column>
	<igx-column [rowStart]="1" [colStart]="5" [colEnd]="7" field="PostalCode"></igx-column>
	<igx-column [rowStart]="2" [colStart]="1" [colEnd]="4" field="City"></igx-column>
	<igx-column [rowStart]="2" [colStart]="4" [colEnd]="7" field="Address"></igx-column>
</igx-column-layout>
<igx-column-layout>
    <igx-column [rowStart]="1" [colStart]="1" field="Phone"></igx-column>
    <igx-column [rowStart]="2" [colStart]="1" field="Fax"></igx-column>
</igx-column-layout>

    위 구성의 결과는 아래 스크린샷에서 볼 수 있습니다.

    Note

    rowStart 및 colStart 속성은 각 igx-column에 대해 igx-column-layout으로 설정되어야 합니다. igxColumnLayout 구성 요소는 레이아웃이 올바른지 확인하지 않고 이에 대한 오류나 경고를 발생시키지 않습니다. 개발자는 레이아웃 선언이 정확하고 완전한지 확인해야 합니다. 그렇지 않으면 잘못된 정렬, 겹침 및 브라우저 불일치로 인해 레이아웃이 깨질 수 있습니다.

    Feature Integration

    다중 행 레이아웃의 완전히 다른 렌더링 접근 방식으로 인해 일부 열 기능은 igx-column-layout 구성 요소에서만 작동합니다. 이러한 기능에는 열 고정 및 열 숨기기가 있습니다. 기타 - 정렬 및 그룹화는 igx-column 구성 요소에서 동일한 방식으로 작동합니다.

    • 필터링 - Excel 스타일 필터링만 지원됩니다. filterMode 명시적으로 FilterMode.quickFilter로 설정해도 효과가 없습니다.
    • 페이징 - 시각적 행이 아닌 레코드에서 작동합니다.
    • 그룹화 기준 -hideGroupedColumns 옵션은 다중 행 레이아웃에 적용되지 않습니다. 그룹화된 열은 항상 표시됩니다.

    다음 기능은 현재 지원 되지 않습니다.

    • 열 이동
    • 다중 열 헤더
    • 엑셀로 내보내기
    • 요약

    Keyboard Navigation

    다중 행 레이아웃을 갖춘 IgxGridComponent는 내장 키보드 탐색 기능을 제공합니다.

    Horizontal nagivation

    • 왼쪽 화살표 또는 오른쪽 화살표- 정의된 열 레이아웃의 영향을 받지 않고 현재 행 내에서 왼쪽/오른쪽에 있는 인접한 셀로 이동합니다. 현재 셀이 두 개 이상의 행에 걸쳐 있는 경우 이전에 다른 인접한 셀로 이동한 적이 없다면 왼쪽 화살표 및 오른쪽 화살표는 동일한 rowStart 사용하여 왼쪽과 오른쪽의 첫 번째 셀로 이동해야 합니다. 탐색은 시작 탐색 셀을 저장하고 가능한 경우 동일한 rowStart 있는 셀로 이동합니다.
    • Ctrl + 왼쪽 화살표 (HOME) 또는 Ctrl + 오른쪽 화살표 (END) - 행의 시작 또는 끝으로 이동하고 시작 탐색 셀에 따라 셀을 선택합니다.

    Vertical nagivation

    • 위쪽 화살표 또는 아래쪽 화살표- 시작 위치를 기준으로 위/아래 셀로 이동하며 행의 영향을 받지 않습니다. 현재 셀이 둘 이상의 열에 걸쳐 있는 경우 탐색 시작 셀에 따라 다음 활성 셀이 선택됩니다.
    • Ctrl + 위쪽 화살표 또는 Ctrl + 아래쪽- 첫 번째 또는 마지막 행의 동일한 열을 탐색하고 초점을 적용합니다.
    • Ctrl + Home 또는 Ctrl + End- 첫 번째 행으로 이동하여 첫 번째 셀에 초점을 맞추거나 마지막 행으로 이동하여 마지막 셀에 초점을 맞춥니다.
    Note

    여러 행이나 열에 걸쳐 있는 셀을 통한 탐색은 시작 탐색 셀에 따라 수행되며 반대 방향 키를 사용하여 시작 셀로 돌아갈 수 있습니다. 그룹 행을 탐색할 때도 동일한 접근 방식이 사용됩니다.

    Note

    선택 및 다중 셀 선택이 레이아웃에서 작동합니다. 즉, 셀이 활성화되면 해당 레이아웃이 선택됩니다. 또한 드래그 선택과 같은 다중 선택의 모든 기능을 적용할 수 있으며 셀별로 작동하지 않고 레이아웃별로 작동합니다.

    Custom Keyboard Navigation

    그리드를 사용하면 특정 키를 눌렀을 때 기본 탐색 동작을 사용자 정의할 수 있습니다. going to the next cell 이나 cell below 이동하는 등의 작업은 강력한 키보드 탐색 API를 사용하여 쉽게 처리할 수 있습니다.

    • gridKeydown이 노출됩니다. 이벤트는 IGridKeydownEventArgs 내보냅니다. 이 이벤트는 위에서 언급한 키보드 키 조합을 통해서만 사용할 수 있으며, 다른 모든 키 동작에는 keydown event (keydown)="onKeydown($event)" 사용할 수 있습니다.
    • navigateTo- 이 메소드를 사용하면 제공된 rowindex 및 visibleColumnIndex 기반으로 위치를 탐색할 수 있습니다.

    아래 데모에서는 Excel에서 관찰된 동작과 유사하게 Enter 및 Shift + Enter 키를 통해 아래/위로 탐색 기능을 추가합니다.

    Demo

    Layout Configurator

    때로는 열 레이아웃을 구성할 때 적절한 colStart 및 colEnd 또는 rowStart 및 rowEnd 계산하고 설정하는 것이 어려울 수 있습니다. 특히 단일 레이아웃에 많은 열이 있는 경우 더욱 그렇습니다. 이것이 바로 우리가 작은 구성 프로그램을 만든 이유입니다. 이를 통해 쉽게 구성할 수 있으며 적용 시 igxGrid 내부에서 어떻게 보일지 비슷한 미리보기를 볼 수 있습니다. 다음과 같은 상호 작용을 수행할 수 있습니다.

    • 전체 구성에 대한 행 수를 설정합니다. 모든 레이아웃에는 동일한 양의 행이 있어야 합니다.
    • 레이아웃 추가 칩을 클릭하여 열 Add Layout /제거하거나 레이아웃 칩을 왼쪽/오른쪽으로 드래그하여 순서를 바꾸세요.
    • 각 레이아웃에 대한 특정 설정을 열 수와 너비로 지정합니다. 설정은 현재 선택된 레이아웃을 참조합니다.
    • 더 많은 열/행을 확장할 수 있도록 레이아웃 미리 보기에서 열 셀의 크기를 조정하거나 Delete 버튼을 사용하여 셀을 지울 수 있습니다.
    • 원하는 위치에 열 칩을 드래그하여 미리보기에서 열을 설정하세요.
    • ​Add Column 칩을 사용하여 새 열을 추가/제거합니다.
    • 예를 들어 NgForOf 사용하여 템플릿에서 사용 및 구문 분석할 수도 있는 igxGrid 또는 JSON 표현 내부에 배치하여 전체 구성의 템플릿 출력을 가져옵니다.

    기본적으로 이전 샘플과 동일한 열을 설정했지만 원하는 구성에 맞게 지우고 구성할 수 있습니다.

    스타일링

    igxGrid를 사용하면 Ignite UI for Angular 통해 스타일을 지정할 수 있습니다. 그리드 테마는 그리드의 모든 기능을 사용자 정의할 수 있는 다양한 속성을 노출합니다.

    아래 단계에서는 그리드의 다중 행 레이아웃 스타일을 사용자 정의하는 단계를 진행합니다.

    Importing global theme

    다중 행 레이아웃 기능의 사용자 정의를 시작하려면 모든 스타일링 기능과 믹스인이 있는 index 파일을 가져와야 합니다.

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

    Defining custom theme

    다음으로, grid-theme 확장하고 원하는 대로 기능 레이아웃을 사용자 정의하는 데 필요한 매개변수를 허용하는 새 테마를 만듭니다.

    $custom-theme: grid-theme(
    $cell-active-border-color: #ffcd0f,
    $cell-selected-background: #6f6f6f,
    $row-hover-background: #fde069,
    $row-selected-background: #8d8d8d,
    $header-background: #494949,
    $header-text-color: #fff,
    $sorted-header-icon-color: #ffcd0f,
    $sortable-header-icon-hover-color: #e9bd0d
);

    Defining a custom color palette

    위에서 설명한 접근 방식에서는 색상 값이 하드코딩되었습니다. 또는 igx-palette 및 igx-color 기능을 사용하여 더 큰 유연성을 얻을 수 있습니다.
    igx-palette 제공된 기본 색상과 보조 색상을 기반으로 색상 팔레트를 생성합니다.

    $black-color: #494949;
$yellow-color: #FFCD0F;

$custom-palette: palette(
 $primary: $black-color,
 $secondary: $yellow-color
);

    사용자 정의 팔레트가 생성된 후 igx-color 기능을 사용하여 다양한 기본 색상과 보조 색상을 얻을 수 있습니다.

    $custom-theme: grid-theme(
    $cell-active-border-color: color($custom-palette, "secondary", 500),
    $cell-selected-background: color($custom-palette, "primary", 300),
    $row-hover-background: color($custom-palette, "secondary", 300),
    $row-selected-background: color($custom-palette, "primary", 100),
    $header-background: color($custom-palette, "primary", 500),
    $header-text-color:contrast-color($custom-palette, "primary", 500),
    $sorted-header-icon-color: color($custom-palette, "secondary", 500),
    $sortable-header-icon-hover-color: color($custom-palette, "secondary", 600)
);

    Defining custom schemas

    더 나아가 스키마의 모든 이점을 갖춘 유연한 구조를 구축할 수 있습니다. 스키마는 테마의 레시피입니다.
    모든 구성요소에 대해 제공되는 두 개의 사전 정의된 스키마 중 하나를 확장하십시오. 우리의 경우에는 $_light_grid 사용합니다.

    $custom-grid-schema: extend($_light-grid,(
    cell-active-border-color: (igx-color:('secondary', 500)),
    cell-selected-background: (igx-color:('primary', 300)),
    row-hover-background: (igx-color:('secondary', 300)),
    row-selected-background: (igx-color:('primary', 100)),
    header-background: (igx-color:('primary', 500)),
    header-text-color: (igx-contrast-color:('primary', 500)),
    sorted-header-icon-color: (igx-color:('secondary', 500)),
    sortable-header-icon-hover-color: (igx-color:('secondary', 600)) 
));

    사용자 정의 스키마를 적용하려면 light 또는 dark 전역을 확장해야 합니다. 전체 프로세스는 실제로 구성 요소에 사용자 정의 스키마를 제공하고 이를 나중에 해당 구성 요소 테마에 추가하는 것입니다.

    $my-custom-schema: extend($light-schema, ( 
    igx-grid: $custom-grid-schema
));
 $custom-theme: grid-theme(
    $palette: $custom-palette,
    $schema: $my-custom-schema
);

    Applying the custom theme

    테마를 적용하는 가장 쉬운 방법은 전역 스타일 파일에 sass @include 문을 사용하는 것입니다.

    @include grid($custom-theme);

    Scoped component theme

    사용자 정의 테마가 특정 구성 요소에만 영향을 미치도록 하려면 방금 정의한 모든 스타일을 전역 스타일 파일에서 사용자 정의 구성 요소의 스타일 파일로 이동할 수 있습니다(index 파일 가져오기 포함).

    이렇게 하면 Angular의 ViewEncapsulation으로 인해 스타일이 사용자 정의 구성 요소에만 적용됩니다.

    Note

    구성 요소가 Emulated ViewEncapsulation을 사용하는 경우 그리드 스타일을 지정하려면::ng-deep 사용하여 이 캡슐화를 관통해야 합니다.

    Note

    문을 a 안에 넣습니다.:host 스타일이 요소에 영향을 미치지 않도록 하는 선택기 밖의 우리의 구성요소:

    :host {
    ::ng-deep {
        @include grid($custom-theme);
    }
}

    Demo

    Note

    샘플은 Change Theme에서 선택한 전역 테마의 영향을 받지 않습니다.

    API References

    Additional Resources

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