Angular 셀 선택

    선택 기능은 Material UI 기반 계층 그리드에서 풍부한 데이터 선택 기능을 가능하게 합니다. 강력한 API와 사용하기 쉬운 메서드 덕분에 다양한 이벤트와 단일 선택 액션이 제공됩니다. 계층적 그리드는 이제 셀 선택을 위한 세 가지 모드를 지원하며, 속성을 변경cellSelection 하여 쉽게 전환할 수 있습니다. 셀 선택을 비활성화할 수 있고, 그리드 내에서 한 셀만 선택 하거나 여러 셀을 선택할 수 있는데, 이 옵션은 기본 옵션으로 제공됩니다. 계층적 그리드에서는 그리드 레벨에서 셀 선택 모드를 지정할 수 있습니다. 예를 들어 부모 그리드에서는 다중 셀 선택을 활성화할 수 있지만, 자식 그리드에서는 셀 선택 모드가 단일 또는 비활성화될 수 있습니다. 하지만 각 옵션에 대해 더 깊이 살펴보겠습니다.

    Angular Cell Selection Example

    아래 샘플은 계층적 그리드의 셀 선택 동작의 세 가지 유형을 보여줍니다. 아래 버튼을 사용하여 사용 가능한 각 선택 모드를 활성화합니다. 스낵바 메시지 상자를 통해 각 버튼 상호작용에 대한 간략한 설명이 제공됩니다.

    Selection types

    Hierarchical Grid Multiple-cell Selection

    이는 상위 및 하위 그리드 모두의 기본 셀 선택 모드입니다. 한 번에 하나의 그리드로 셀을 선택할 수 있지만 교차 그리드 범위를 선택하거나 여러 그리드에서 셀을 선택할 수는 없습니다. 범위 선택 및 마우스 드래그 기능과 관련된 각 키 조합은 동일한 그리드에서만 사용할 수 있습니다.

    셀을 선택하는 방법:

    • ByMouse drag- 셀의 직사각형 데이터 선택이 수행됩니다.
    • +Ctrl key-를 누르면Mouse drag 여러 범위 선택이 수행됩니다. 기존의 다른 세포 선택은 유지됩니다.
    • Shift 키를 사용해 즉시 다중 셀 선택을 할 수 있습니다. Shift 키를 누른 채로 한 칸을 선택하고 다른 칸을 선택하세요. 두 셀 사이의 셀 범위가 선택됩니다. 두 번째 셀을 누르고 있을Shift key 때 선택된 셀 범위는 첫 번째 셀 위치(시작점)에 따라 업데이트된다는 점을 유념하세요.
    • 키를 누르고Arrow keys 있는 동안 멀티셀을 선택하는Shift key 키보드 기능. 집중된 셀을 기준으로 다중 셀 선택 범위를 생성할 것입니다.
    • 그리고Ctrl + Arrow keys 키를 누른Ctrl + Home/End 상태에서Shift key 키보드로 멀티셀 선택을 할 수 있습니다. 집중된 셀을 기준으로 다중 셀 선택 범위를 생성할 것입니다.
    • 버튼을Left Mouse key 누르고Ctrl key 있는 상태로 클릭하면 선택한 셀 컬렉션에 단일 셀 범위가 추가됩니다.
    • 마우스로 클릭하고 드래그하면 연속적인 다중 셀 선택이 가능합니다.

    Hierarchical Grid Single Selection

    를[cellSelection]="'single'" 설정하면 한 번에 그리드에 하나의 셀만 선택할 수 있습니다. 또한 이 모드mouse drag가 작동하지 않고, 셀을 선택하는 대신 기본 텍스트 선택이 됩니다.

    Note

    단일 셀이 선택selected 되면 이벤트가 방출되며,selection mode이 또는single​multiple 다중 셀 선택 모드에서는 셀 범위를rangeSelected 선택하면 이벤트가 발생합니다.

    Hierarchical Grid None selection

    셀 선택을 비활성화하고 싶으면 속성만 설정[cellSelection]="'none'" 하면 됩니다. 이 모드에서는 셀을 클릭하거나 키보드로 탐색하려 할 때 셀이 선택되지 않고 '만activation style 적용되며, 스크롤하거나 페이지의 다른 요소를 클릭하면 셀이 사라집니다. 선택을 정의하는 유일한 방법은 아래에 설명된 API 메서드를 사용하는 것입니다.

    스타일링

    테마 엔진은 선택한 셀의 범위를 스타일링할 수 있는 속성을 노출합니다.

    Import 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';

    Define colors

    완료되면 와contrast-color 함수를color 활용할 수 있습니다. 이 색상들을 통해 선택 범위에 사용할 색상을 정의합니다:

    $text-color: contrast-color($color: 'primary', $variant: 900);
$background-color: color($color: "primary", $variant: 900);
$border-yellow: #f2c43c;
    Note

    만약 andcontrast-color 함수를 사용하고color 싶지 않다면, 색상 값을 하드코딩할 수도 있습니다.

    Create custom theme

    다음으로 새로운 테마를 만듭니다.grid-theme 우리의text-color,background-color 그리고border-yellow 변수는 다음과 같습니다$cell-selected-text-color,$cell-selected-background 그리고$cell-active-border-color, 각각 다음과 같다:

    $custom-grid-theme: grid-theme(
  $cell-selected-text-color: $text-color,
  $cell-active-border-color: $border-yellow,
  $cell-selected-background: $background-color
);

    Apply theme

    그런 다음 구성 요소 스타일(앱 스타일에도 포함될 수 있음)에 믹스인을 포함시켜 igx-hierarchical-grid가 기본 테마 대신 새로 생성된 테마를 사용하도록 하기만 하면 됩니다.

    @include css-vars($custom-grid-theme);

    사용자 정의 테마를 적용하면 선택한 그리드 셀이 선택한 색상으로 강조 표시됩니다.

    Demo

    Note

    샘플은 선택된 글로벌 테마Change Theme의 영향을 받지 않습니다.

    API References

    Additional Resources

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