Web Components 트리 개요

TreeView 구성 요소라고도 하는 Ignite UI for Web Components 트리는 트리와 같은 UI 내에서 확장 가능한 데이터 구조를 시각화하는 고성능 컨트롤로, 자식 항목에 대한 요청 시 로드를 적용할 수 있습니다. 또한 Ignite UI for Web Components 트리는 노드 확장 및 축소, 중첩된 앱 탐색 Ignite UI for Web Components 트리 노드와 같은 기능을 제공하며 수동으로 또는 바인딩된 데이터 원본에서 생성할 수 있습니다.

최종 사용자의 경우 이는 다양한 앱 페이지를 쉽게 탐색하고, 선택 항목, 확인란을 사용하고, 텍스트, 아이콘, 이미지 등을 추가할 수 있음을 의미합니다.

Ignite UI for Web Components 트리 컴포넌트는 사용자가 계층적 데이터를 트리 뷰 구조로 표현하며 부모-자식 관계를 유지하고, 대응하는 데이터 모델 없이 정적인 트리 뷰 구조를 정의할 수 있게 합니다. 주요 목적은 최종 사용자가 계층적 데이터 구조 내에서 시각화하고 탐색할 수 있도록 하는 것입니다. 이 컴포넌트는IgcTreeComponent 또한 주문 시 로드 기능, 아이템 활성화, 내장 체크박스, 내장 키보드 내비게이션 등을 통한 다중 및 연쇄 아이템 선택을 제공합니다.

Web Components Tree Example

이 기본 Ignite UI for Web Components 트리 예제에서는 항목 계층을 지정하여 트리와 해당 항목을 정의하는 방법을 볼 수 있습니다.

How to Use Ignite UI for Web Components Tree With Ignite UI

먼저 다음 명령을 실행하여 Ignite UI for Web Components 설치해야 합니다.

npm install igniteui-webcomponents

사용하기IgcTreeComponent 전에 다음과 같이 등록해야 합니다:

import { defineComponents, IgcTreeComponent } from 'igniteui-webcomponents';
defineComponents(IgcTreeComponent);

Ignite UI for Web Components에 대한 완전한 소개는 '시작 주제'를 읽어보세요.

사용하기 가장 간단한 방법은IgcTreeComponent 다음과 같습니다:

Declaring a tree

IgcTreeItemComponent는 에IgcTreeComponent 속하는 모든 항목의 표현입니다. 아이템은 아이템 상태를 필요에 맞게 구성할 수 있는 속성을 제공합니다disabled​active​selected​expanded. 이 속성은value 해당 항목이 나타내는 데이터 입력에 대한 참조를 추가하는 데 사용할 수 있습니다.

항목은 다음 방법 중 하나를 사용하여 선언할 수 있습니다.

• 항목 계층 구조를 지정하고 데이터 세트를 반복하여 트리와 해당 항목 선언

<igc-tree>
    ${data.map((x) => html`
        <igc-tree-item .value=${x} .expanded=${x.expanded} .label=${x.label}>
              ${x.children.map((y) => html`
                  <igc-tree-item .value=${y} .expanded=${y.expanded}>
                      <span slot="label">${y.label}</slot>
                  </igc-tree-item>
              `
        </igc-tree-item>
    `
</igc-tree>

항목의 확장 및 선택 상태가 기본 데이터에도 반영되도록 항목을 데이터 모델에 바인딩할 수 있습니다.

• 바인딩되지 않은 정적 항목을 생성하여 트리 선언

트리를 렌더링하기 위해 반드시 데이터 세트가 필요한 것은 아닙니다 - 노출label 된 속성을 사용해 기본 데이터 모델 없이 개별 항목을 생성하거나 라벨에 맞춤IgcTreeItemComponent 슬롯 콘텐츠를 제공할 수 있습니다.

<igc-tree>
    <igc-tree-item>
        <div slot="label">
            I am a parent item 1
            <img src="hard_coded_src.webb" alt="Alt Text">
        </div>
        <igc-tree-item label="I am a child item 1">
        </igc-tree-item>
    </igc-tree-item>

    <igc-tree-item>
        <div slot="label">
            I am a parent item 2
            <img src="hard_coded_src.webb" alt="Alt Text">
        </div>
        <igc-tree-item label="I am a child item 1">
        </igc-tree-item>
    </igc-tree-item>
</igc-tree>

[!Note] You can provide a custom slot content for each IgcTreeItemComponent's indentation, expansion and label area respectively using the provided indentation, indicator and label slots.

Item Interactions

IgcTreeItemComponent확장 또는 접이식이 가능하다:

• 아이템 확장 표시기(기본 동작)를 클릭해 보세요.
• 만약IgcTreeComponent toggleNodeOnClick 속성은 로 설정되어 있습니다true.

<igc-tree toggle-node-on-click="true">
    <igc-tree-item label="North America">
        <igc-tree-item label="United States"></igc-tree-item>
        <igc-tree-item label="Canada"></igc-tree-item>
        <igc-tree-item label="Mexico"></igc-tree-item>
    </igc-tree-item>
    <igc-tree-item label="South America">
        <igc-tree-item label="Brazil"></igc-tree-item>
    </igc-tree-item>
</igc-tree>

기본적으로 여러 아이템을 동시에 확장할 수 있었습니다. 이 동작을 변경하고 한 번에 단일 분기만 확장할 수 있도록 하기 위해 이singleBranchExpand 속성을 활성화할 수 있습니다. 이렇게 하면 아이템이 확장될 때 같은 레벨 내에서 이미 확장된 다른 모든 가지가 모두 접히게 됩니다.

<igc-tree single-branch-expand="true">
    <igc-tree-item label="North America">
        <igc-tree-item label="United States"></igc-tree-item>
        <igc-tree-item label="Canada"></igc-tree-item>
        <igc-tree-item label="Mexico"></igc-tree-item>
    </igc-tree-item>
    <igc-tree-item label="South America">
        <igc-tree-item label="Brazil"></igc-tree-item>
    </igc-tree-item>
</igc-tree>

또한, 아이템IgcTreeComponent 상호작용을 위한 다음과 같은 API 메서드를 제공합니다:

• expand- 모든 항목을 확장합니다. 아이템 배열이 전달되면 지정된 항목만 확장됩니다.
• collapse- 모든 아이템을 접습니다. 아이템 배열이 전달되면 지정된 항목만 붕괴됩니다.
• IgcSelectComponent- 모든 항목을 선택합니다. 아이템 배열이 전달되면 지정된 항목만 선택합니다. 이벤트를 발생시키selection 지 않습니다.
• Tree.Deselect- 모든 항목을 선택 해제합니다. 아이템 배열이 전달되면 지정된 항목만 선택 해제됩니다. 이벤트를 발생시키selection 지 않습니다.

Web Components Tree Selection

Ignite UI for Web Components 트리 컴포넌트에서 아이템 선택을 설정하려면 속성selection만 설정하면 됩니다. 이 속성은 None, Multiful, Cascade의 세 가지 모드를 수용합니다. 아래에서 각 항목을 좀 더 자세히 살펴보겠습니다.

None

​IgcTreeComponent기본적으로 아이템 선택이 비활성화되어 있습니다. 사용자는 UI 상호작용을 통해 항목을 선택하거나 해제할 수 없지만, 제공된 API 메서드를 통해 이러한 동작을 수행할 수 있습니다.

Multiple

여러 항목 선택을 가능하게 하기 위해IgcTreeComponent 그냥selection property를 다중. 이 경우 모든 항목에 체크박스가 표시됩니다. 각 아이템은 두 가지 상태를 가지는데, 선택된 상태와 그렇지 않은 상태입니다. 이 모드는 다중 선택을 지원합니다.

<igc-tree selection="multiple">
</igc-tree>

Cascade

캐스케이드 항목 선택IgcTreeComponent을 활성화하려면 선택 속성을 캐 스케이드로 설정하세요. 이 경우 모든 항목에 체크박스가 표시됩니다.

<igc-tree selection="Cascade">
</igc-tree>

이 모드에서 부모의 선택 상태는 전적으로 자식의 선택 상태에 따라 달라집니다. 부모에 선택된 자식과 선택 취소된 자식이 있는 경우 해당 확인란은 확정되지 않은 상태입니다.

Keyboard Navigation

키보드 내IgcTreeComponent 비게이션은 사용자에게 다양한 키보드 상호작용을 제공합니다. 이 기능은 기본적으로 활성화되어 있어 사용자가 아이템을 탐색할 수 있게 해줍니다.

내비게이션은IgcTreeComponent W3C 접근성 기준을 준수하며 사용하기 편리합니다.

주요 조합

• ↓- 표시되는 다음 항목으로 이동합니다. 항목을 활성으로 표시합니다. 마지막 항목인 경우 아무 작업도 수행하지 않습니다.
• CTRL + ↓- 다음으로 표시되는 항목으로 이동합니다. LAST 항목에 있으면 아무 작업도 수행하지 않습니다.
• ↑- 이전에 표시된 항목으로 이동합니다. 항목을 활성으로 표시합니다. 첫 번째 항목인 경우 아무 작업도 수행하지 않습니다.
• CTRL + ↑- 이전에 표시된 항목으로 이동합니다. 첫 번째 항목에서는 아무 작업도 수행하지 않습니다.
• ←- 확장된 상위 항목에서는 해당 항목을 축소합니다. 항목이 축소되었거나 하위 항목이 없으면 상위 항목으로 이동합니다. 상위 항목이 없으면 아무 작업도 수행하지 않습니다.
• →- 확장된 상위 항목에서 항목의 첫 번째 하위 항목으로 이동합니다. 접힌 상위 항목에 있는 경우 확장합니다. 항목에 하위 항목이 없으면 아무 작업도 수행하지 않습니다.
• HOME- 첫 번째 항목으로 이동합니다.
• END- 마지막으로 표시되는 항목으로 이동합니다.
• TAB- 트리 외부의 페이지에서 포커스 가능한 다음 요소로 이동합니다.
• SHIFT + TAB- 트리 외부의 페이지에서 포커스 가능한 이전 요소로 이동합니다.
• SPACE- 현재 항목의 선택을 전환합니다. 노드를 활성으로 표시합니다.
• SHIFT + SPACE- 모든 항목의 선택을 활성 항목과 누른 항목 사이에 전환합니다. 선택이 활성화된 경우 누르고 있는 SHIFT 동안 스페이스.
• ENTER- 포커스가 있는 항목을 활성화합니다. 항목에 링크가 있는 경우 링크를 엽니다.
• *- 항목과 같은 수준의 모든 형제 항목을 확장합니다.

선택이 활성화되면 최종 사용자의 항목 선택은 렌더링된 확인란을 통해서만 허용됩니다. 두 선택 유형 모두 다중 선택을 허용하므로 다음과 같은 마우스 및 키보드 상호 작용을 사용할 수 있습니다.

• 클릭- 항목 확인란을 수행할 때 선택이 활성화된 경우 항목 선택을 전환합니다. 그렇지 않으면 항목에 초점을 맞춥니다.
• SHIFT + Click- 항목 확인란에서 수행하면 모든 항목의 선택을 활성 항목과 누른 SHIFT 상태에서 클릭한 항목 사이에서 전환합니다.

Web Components Tree Load On Demand

Ignite UI for Web Components 트리는 사용자가 가능한 한 빨리 볼 수 있도록 서버에서 최소한의 데이터를 검색해야 하는 방식으로 렌더링할 수 있습니다. 이 동적 데이터 로드 방법을 사용하면 사용자가 항목을 확장한 후에만 해당 특정 부모 항목의 자식이 검색됩니다. Load on Demand라고도 하는 이 메커니즘은 모든 원격 데이터와 함께 작동하도록 쉽게 구성할 수 있습니다.

사용자가 확장 아이콘을 클릭하면 로딩 표시기로 대체됩니다. 로딩 속성이 false로 확인되면 로딩 표시기가 사라지고 자식이 로드됩니다.

슬롯을loadingIndicator 이용해 로딩 구역에 맞춤 슬롯 콘텐츠를 제공할 수 있습니다. 만약 해당 슬롯이 정의되지 않았다면, 이IgcCircularProgressComponent 사용됩니다.

Load On Demand With Virtualization

Ignite UI for Web Components 트리에서 요청 시 더 많은 수의 자식을 로드하면 트리 항목이 디자인에 의해 선언적으로 정의되기 때문에 성능에 부정적인 영향을 줄 수 있습니다. 다음 데모에서는 @lit-labs/virtualizer 라이브러리를 사용하여 가상화된 컨테이너의 하위 트리 항목을 렌더링하는 방법을 보여줍니다. 그 결과 보이는 자식 청크만 DOM에서 렌더링되므로 성능이 향상됩니다.

Styling

아래에 나열된 노출된 CSS 부품 중 일부를 사용해 외IgcTreeItemComponent 관을 변경할 수 있습니다:

부품명	설명
wrapper	나무 항목의 래퍼입니다.
selected	선택된 상태를 나타냅니다. 적용대상wrapper.
focused	집중된 상태를 나타냅니다. 적용대상wrapper.
active	활성 상태를 나타냅니다. 적용대상wrapper.
indicator	트리 항목의 확장 표시기입니다.
label	트리 항목 콘텐츠입니다.
text	트리 항목에 텍스트가 표시되었습니다.
select	선택이 활성화된 경우 트리 항목의 확인란입니다.

이 CSS 부품들을 사용하면 컴포넌트의IgcTreeComponent 외관을 다음과 같이 커스터마이즈할 수 있습니다:

igc-tree-item::part(active) {
  background: var(--ig-secondary-500);
  color: var(--ig-secondary-500-contrast);
}

API References

• IgcTreeComponent
• IgcTreeItemComponent
• IgcIconComponent
• IgcCircularProgressComponent
• Styling & Themes

Additional Resources

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