Web Components 계층적 그리드 셀 선택

Web Components 계층적 그리드의 Ignite UI for Web Components 셀 선택은 풍부한 데이터 선택 기능을 가능하게 하고 구성 요소에서 강력한 API를 IgcHierarchicalGridComponent 제공합니다. Web Components Hierarchical Grid는 세 가지 선택 모드를 지원합니다.

• 계층적 그리드(Hierarchical Grid) 다중 셀 선택
• 계층적 그리드 단일 선택
• 계층적 그리드 없음 선택

​IgcHierarchicalGridComponent에서 그리드 수준에서 셀 선택 모드를 지정할 수 있습니다. 예를 들어 부모 그리드에서는 다중 셀 선택을 활성화할 수 있지만 자식 그리드에서는 셀 선택 모드를 단일 또는 비활성화할 수 있습니다.

각 옵션에 대해 자세히 알아보겠습니다.

Web Components 계층적 그리드 셀 선택 예

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

EXAMPLE

TS

HTML

CSS

import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebHierarchicalGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcHierarchicalGridComponent, IgcRowIslandComponent } from 'igniteui-webcomponents-grids/grids';
import SingersData from './SingersData.json';
import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';

defineAllComponents();

import "./index.css";

ModuleManager.register(
    IgcPropertyEditorPanelModule
);

export class Sample {

    private propertyEditorHierarchicalGrid: IgcPropertyEditorPanelComponent
    private cellSelectionEditorHierarchicalGrid: IgcPropertyEditorPropertyDescriptionComponent
    private cellSelectionEditorRowIsland: IgcPropertyEditorPropertyDescriptionComponent
    private hierarchicalGrid: IgcHierarchicalGridComponent
    private rowIsland: IgcRowIslandComponent
    private _bind: () => void;

    constructor() {
        var propertyEditorHierarchicalGrid = this.propertyEditorHierarchicalGrid = document.getElementById('PropertyEditorHierarchicalGrid') as IgcPropertyEditorPanelComponent;
        var cellSelectionEditorHierarchicalGrid = this.cellSelectionEditorHierarchicalGrid = document.getElementById('CellSelectionEditorHierarchicalGrid') as IgcPropertyEditorPropertyDescriptionComponent;
        var cellSelectionEditorRowIsland = this.cellSelectionEditorRowIsland = document.getElementById('CellSelectionEditorRowIsland') as IgcPropertyEditorPropertyDescriptionComponent;
        this.webRowIslandCellSelectionChange = this.webRowIslandCellSelectionChange.bind(this);
        var hierarchicalGrid = this.hierarchicalGrid = document.getElementById('hierarchicalGrid') as IgcHierarchicalGridComponent;
        var rowIsland = this.rowIsland = document.getElementById('rowIsland') as IgcRowIslandComponent;

        this._bind = () => {
            propertyEditorHierarchicalGrid.componentRenderer = this.renderer;
            propertyEditorHierarchicalGrid.target = this.hierarchicalGrid;
            cellSelectionEditorRowIsland.changed = this.webRowIslandCellSelectionChange;
            hierarchicalGrid.data = this.singersData;
        }
        this._bind();
    }

    private _singersData: any[] = SingersData;
    public get singersData(): any[] {
        return this._singersData;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            PropertyEditorPanelDescriptionModule.register(context);
            WebHierarchicalGridDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

    public webRowIslandCellSelectionChange(sender: any, args: IgcPropertyEditorPropertyDescriptionChangedEventArgs): void {
        var rowIsland = this.rowIsland;
        if (rowIsland)
            rowIsland.cellSelection = args.newValue.toLocaleLowerCase();
    }

}

new Sample();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample ig-typography">
    <div class="options vertical">
        <igc-property-editor-panel
        name="PropertyEditorHierarchicalGrid"
        id="PropertyEditorHierarchicalGrid"
        description-type="WebHierarchicalGrid"
        is-horizontal="true"
        is-wrapping-enabled="true">
            <igc-property-editor-property-description
            label="Hierarchical Grid Cell Selection"
            property-path="CellSelection"
            name="CellSelectionEditorHierarchicalGrid"
            id="CellSelectionEditorHierarchicalGrid"
            value-type="EnumValue">
            </igc-property-editor-property-description>
            <igc-property-editor-property-description
            label="Row Island Cell Selection"
            property-path=""
            name="CellSelectionEditorRowIsland"
            id="CellSelectionEditorRowIsland"
            value-type="EnumValue"
            drop-down-names="None, Single, Multiple, MultipleCascade"
            drop-down-values="None, Single, Multiple, MultipleCascade">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

    <div class="container fill">
        <igc-hierarchical-grid
        auto-generate="false"
        primary-key="ID"
        id="hierarchicalGrid"
        name="hierarchicalGrid"
        id="hierarchicalGrid">
            <igc-column
            field="Artist"
            header="Artist"
            data-type="string">
            </igc-column>
            <igc-column
            field="HasGrammyAward"
            header="Has Grammy Award"
            data-type="boolean">
            </igc-column>
            <igc-column
            field="Debut"
            header="Debut"
            data-type="number">
            </igc-column>
            <igc-column
            field="GrammyNominations"
            header="Grammy Nominations"
            data-type="number"
            has-summary="true">
            </igc-column>
            <igc-column
            field="GrammyAwards"
            header="Grammy Awards"
            data-type="number"
            has-summary="true">
            </igc-column>
            <igc-row-island
            child-data-key="Albums"
            auto-generate="false"
            name="rowIsland"
            id="rowIsland">
                <igc-column
                field="Album"
                header="Album"
                data-type="string">
                </igc-column>
                <igc-column
                field="LaunchDate"
                header="Launch Date"
                data-type="date">
                </igc-column>
                <igc-column
                field="BillboardReview"
                header="Billboard Review"
                data-type="string">
                </igc-column>
                <igc-column
                field="USBillboard200"
                header="US Billboard 200"
                data-type="string">
                </igc-column>
            </igc-row-island>
        </igc-hierarchical-grid>
    </div>
</div>

    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

cssコピー

Edit in: Codesandbox

이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

선택 유형

계층적 그리드(Hierarchical Grid) 다중 셀 선택

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

셀을 선택하는 방법:

• ​마우스 드래그- 셀의 직사각형 데이터 선택이 수행됩니다.
• ​Ctrl 키 누르기 + 마우스 끌기- 여러 범위 선택이 수행됩니다. 다른 기존 셀 선택은 유지됩니다.
• ​Shift 키를 사용하여 즉시 다중 셀 선택. 단일 셀을 선택하고 Shift 키를 누른 채 다른 단일 셀을 선택합니다. 두 셀 사이의 셀 범위가 선택됩니다. Shift 키를 누른 상태에서 다른 두 번째 셀을 선택하면 셀 선택 범위는 처음 선택한 셀 위치(시작점)를 기준으로 업데이트됩니다.
• ​Shift 키를 누른 상태에서 화살표 키를 사용하여 키보드 다중 셀 선택. 선택된 셀을 기준으로 다중 셀 선택 범위가 생성됩니다.
• ​Shift 키를 누른 상태에서 Ctrl + ↑ ​ ​↓ ​ ​←​ ​→ 키와 Ctrl + Home / End를 사용하여 키보드 다중 셀 선택. 선택된 셀을 기준으로 다중 셀 선택 범위가 생성됩니다.
• 로 클릭하면 마우스 왼쪽 키를 누른 상태에서 Ctrl 키 키는 선택한 셀 컬렉션에 단일 셀 범위를 추가합니다.
• 마우스로 클릭하고 드래그하면 연속적인 다중 셀 선택이 가능합니다.

계층적 그리드 단일 선택

​cellSelection​ ​Single로 설정하면 그리드에서 한 번에 하나의 셀만 선택할 수 있습니다. 또한 모드 마우스 끌기는 작동하지 않으며 셀을 선택하는 대신 기본 텍스트 선택이 됩니다.

단일 셀을 선택한 경우 selected 이벤트가 발생합니다. 선택 모드 ~이다 하나의 또는 다수의. 다중 셀 선택 모드에서 셀 범위를 선택할 때 RangeSelected 이벤트가 방출됩니다.

계층적 그리드 없음 선택

셀 선택을 비활성화하려면 cellSelection​ ​none으로 설정하면 됩니다. 이 모드에서 셀을 클릭하거나 키보드로 탐색하려고 하면 셀이 선택되지 않고​ ​활성화 스타일만 적용되며 페이지의 다른 요소를 스크롤하거나 클릭하면 셀이 손실됩니다. 선택을 정의하는 유일한 방법은 아래에 설명된 API 메서드를 사용하는 것입니다.

키보드 탐색 상호 작용

Shift 키를 누르고 있는 동안

• 현재 선택 항목에 위 셀을 추가하려면 Shift + ↑를 누르세요.
• 현재 선택 항목에 아래 셀을 추가하려면 Shift + ↓를 누르세요.
• 현재 선택 항목에 왼쪽 셀을 추가하려면 Shift + ←를 누르세요.
• Shift + → 현재 선택 항목에 오른쪽 셀을 추가합니다.

Ctrl + Shift 키를 누르고 있는 동안

• Ctrl + Shift + ↑를 사용하면 열에서 초점이 맞춰진 셀 위의 모든 셀을 선택할 수 있습니다.
• Ctrl + Shift + ↓를 눌러 열에서 초점이 맞춰진 셀 아래의 모든 셀을 선택합니다.
• Ctrl + Shift + ←를 누르면 행 시작 부분까지 모든 셀을 선택합니다.
• Ctrl + Shift + → 행 끝까지의 모든 셀을 선택합니다.
• Ctrl + Shift + Home: 초점이 맞춰진 셀부터 그리드의 첫 번째 셀까지 모든 셀을 선택합니다.
• Ctrl + Shift + End -초점이 맞춰진 셀부터 그리드의 마지막 셀까지 모든 셀을 선택합니다.

연속스크롤은 Grid의 Body 내에서만 가능합니다.

API 사용법

다음은 범위를 선택하거나, 선택 항목을 지우거나, 선택한 셀 데이터를 가져오는 데 사용할 수 있는 방법입니다.

범위 선택

selectRange- API를 사용하여 셀 범위를 선택합니다. rowStart 및 rowEnd는 행 인덱스를 사용해야 하고, columnStart 및 columnEnd는 열 인덱스 또는 열 데이터 필드 값을 사용할 수 있습니다.

const range = { rowStart: 2, rowEnd: 2, columnStart: 1, columnEnd: 1 };
this.grid.selectRange(range);
ts

셀 선택 지우기

clearCellSelection 현재 셀 선택을 지웁니다.

this.grid.clearCellSelection();
ts

선택한 데이터 가져오기

getSelectedData 선택 항목에 따라 선택한 데이터의 배열을 형식으로 반환합니다. 아래 예:

• 세 개의 서로 다른 단일 셀을 선택한 경우:

expectedData = [
    { CompanyName: 'Infragistics' },
    { Name: 'Michael Langdon' },
    { ParentID: 147 }
];
typescript

• 한 열에서 세 개의 셀을 선택한 경우:

expectedData = [
    { Address: 'Obere Str. 57'},
    { Address: 'Avda. de la Constitución 2222'},
    { Address: 'Mataderos 2312'}
];
typescript

• 행 1개, 열 3개에서 마우스 드래그로 셀 3개를 선택한 경우:

expectedData = [
    { Address: 'Avda. de la Constitución 2222', City: 'México D.F.', ContactTitle: 'Owner' }
];
typescript

• 2개의 행과 3개의 열에서 마우스 드래그로 3개의 셀을 선택한 경우:

expectedData = [
    { ContactTitle: 'Sales Agent', Address: 'Cerrito 333', City: 'Buenos Aires'},
    { ContactTitle: 'Marketing Manager', Address: 'Sierras de Granada 9993', City: 'México D.F.'}
];
typescript

• 서로 다른 두 범위를 선택한 경우:

expectedData = [
    { ContactName: 'Martín Sommer', ContactTitle: 'Owner'},
    { ContactName: 'Laurence Lebihan', ContactTitle: 'Owner'},
    { Address: '23 Tsawassen Blvd.', City: 'Tsawassen'},
    { Address: 'Fauntleroy Circus', City: 'London'}
];
typescript

• 두 개의 겹치는 범위를 선택한 경우 형식은 다음과 같습니다.

expectedData = [
    { ContactName: 'Diego Roel', ContactTitle: 'Accounting Manager', Address: 'C/ Moralzarzal, 86'},
    { ContactName: 'Martine Rancé', ContactTitle: 'Assistant Sales Agent', Address: '184, chaussée de Tournai', City: 'Lille'},
    { ContactName: 'Maria Larsson', ContactTitle: 'Owner', Address: 'Åkergatan 24', City: 'Bräcke'},
    { ContactTitle: 'Marketing Manager', Address: 'Berliner Platz 43', City: 'München'}
];
typescript

기능 통합

다중 셀 선택은 인덱스 기반입니다(DOM 요소 선택).

• Sorting- 정렬이 수행되면 선택이 지워지지 않습니다. 오름차순 또는 내림차순으로 정렬하는 동안 현재 선택된 셀은 동일하게 유지됩니다.
• Paging- 페이징 시 선택한 셀이 지워집니다. 선택 항목은 여러 페이지에 걸쳐 유지되지 않습니다.
• Filtering- 필터링이 수행되면 선택이 지워지지 않습니다. 필터링이 지워지면 처음에 선택한 셀이 반환됩니다.
• Resizing- 열 크기 조정 시 선택한 셀이 지워지지 않습니다.
• Hiding- 선택한 셀을 지우지 않습니다. 열이 숨겨져 있으면 표시되는 다음 열의 셀이 선택됩니다.
• pinning- 선택한 셀이 지워지지 않습니다. 숨기는 것도 마찬가지
• GroupBy- 열 그룹화 시 선택한 셀이 지워지지 않습니다.

스타일링

사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 일부 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.

<igc-hierarchical-grid class="hGrid"></igc-hierarchical-grid>
ts

그런 다음 해당 클래스에 대한 관련 CSS 속성을 설정합니다.

.hGrid {
    --ig-grid-cell-selected-text-color: #fff;
    --ig-grid-cell-active-border-color: #f2c43c;
    --ig-grid-cell-selected-background: #0062a3;
    --ig-grid-cell-editing-background: #0062a3;
}
css

데모

EXAMPLE

TS

HTML

CSS

import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebHierarchicalGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
import SingersData from './SingersData.json';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';

defineAllComponents();

import "./index.css";

ModuleManager.register(
    IgcPropertyEditorPanelModule
);

export class Sample {

    private propertyEditor: IgcPropertyEditorPanelComponent
    private cellSelectionEditor: IgcPropertyEditorPropertyDescriptionComponent
    private hGrid: IgcHierarchicalGridComponent
    private _bind: () => void;

    constructor() {
        var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
        var cellSelectionEditor = this.cellSelectionEditor = document.getElementById('CellSelectionEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var hGrid = this.hGrid = document.getElementById('hGrid') as IgcHierarchicalGridComponent;

        this._bind = () => {
            propertyEditor.componentRenderer = this.renderer;
            propertyEditor.target = this.hGrid;
            hGrid.data = this.singersData;
        }
        this._bind();
    }

    private _singersData: any[] = SingersData;
    public get singersData(): any[] {
        return this._singersData;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            PropertyEditorPanelDescriptionModule.register(context);
            WebHierarchicalGridDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

}

new Sample();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample ig-typography">
    <div class="options vertical">
        <igc-property-editor-panel
        name="PropertyEditor"
        id="PropertyEditor"
        description-type="WebHierarchicalGrid"
        is-horizontal="true"
        is-wrapping-enabled="true">
            <igc-property-editor-property-description
            property-path="CellSelection"
            name="CellSelectionEditor"
            id="CellSelectionEditor"
            value-type="EnumValue"
            drop-down-names="None, Single, Multiple"
            drop-down-values="None, Single, Multiple">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

    <div class="container fill">
        <igc-hierarchical-grid
        auto-generate="false"
        id="hGrid"
        name="hGrid"
        id="hGrid"
        primary-key="ID">
            <igc-column
            field="Artist"
            header="Artist"
            data-type="string"
            resizable="true">
            </igc-column>
            <igc-column
            field="Photo"
            header="Photo"
            data-type="image"
            min-width="115px"
            resizable="true">
            </igc-column>
            <igc-column
            field="Debut"
            header="Debut"
            data-type="number"
            min-width="88px"
            max-width="230px"
            resizable="true">
            </igc-column>
            <igc-column
            field="GrammyNominations"
            header="Grammy Nominations"
            data-type="string"
            resizable="true">
            </igc-column>
            <igc-column
            field="GrammyAwards"
            header="Grammy Awards"
            data-type="string"
            resizable="true">
            </igc-column>
            <igc-row-island
            child-data-key="Albums"
            auto-generate="false">
                <igc-column
                field="Album"
                header="Album"
                data-type="string"
                resizable="true">
                </igc-column>
                <igc-column
                field="LaunchDate"
                header="Launch Date"
                data-type="date"
                resizable="true">
                </igc-column>
                <igc-column
                field="BillboardReview"
                header="Billboard Review"
                data-type="string"
                resizable="true">
                </igc-column>
                <igc-column
                field="USBillboard200"
                header="US Billboard 200"
                data-type="string"
                resizable="true">
                </igc-column>
                <igc-row-island
                child-data-key="Songs"
                auto-generate="false">
                    <igc-column
                    field="Number"
                    header="No."
                    data-type="string"
                    resizable="true">
                    </igc-column>
                    <igc-column
                    field="Title"
                    header="Title"
                    data-type="string"
                    resizable="true">
                    </igc-column>
                    <igc-column
                    field="Released"
                    header="Released"
                    data-type="string"
                    resizable="true">
                    </igc-column>
                    <igc-column
                    field="Genre"
                    header="Genre"
                    data-type="string"
                    resizable="true">
                    </igc-column>
                </igc-row-island>
            </igc-row-island>
            <igc-row-island
            child-data-key="Tours"
            auto-generate="false">
                <igc-column
                field="Tour"
                header="Tour"
                data-type="string"
                resizable="true">
                </igc-column>
                <igc-column
                field="StartedOn"
                header="Started on"
                data-type="string"
                resizable="true">
                </igc-column>
                <igc-column
                field="Location"
                header="Location"
                data-type="string"
                resizable="true">
                </igc-column>
                <igc-column
                field="Headliner"
                header="Headliner"
                data-type="string"
                resizable="true">
                </igc-column>
            </igc-row-island>
        </igc-hierarchical-grid>
    </div>
</div>

    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

#hGrid {
    --ig-grid-cell-selected-text-color: #FFFFFF;
    --ig-grid-cell-active-border-color: #f2c43c;
    --ig-grid-cell-selected-background: #0062a3;
}

cssコピー

Edit in: Codesandbox

API 참조

• IgcHierarchicalGridComponent

추가 리소스

• 선택
• 행 선택
• 필터링
• 정렬
• 요약
• 열 이동
• 열 고정
• 열 크기 조정
• 가상화 및 성능

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

• Ignite UI for Web Components 포럼
• ​GitHub Ignite UI for Web Components