Blazor 트리 개요

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

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

The Ignite UI for Blazor Tree component allows users to represent hierarchical data in a tree-view structure, maintaining parent-child relationships, as well as to define static tree-view structure without a corresponding data model. Its primary purpose is to allow end-users to visualize and navigate within hierarchical data structures. The IgbTree component also provides load on demand capabilities, item activation, multiple and cascade selection of items through built-in checkboxes, built-in keyboard navigation and more.

Blazor Tree Example

이 기본적인 Ignite UI for Blazor 에서는 항목 계층 구조를 지정하여 트리와 항목을 정의하는 방법을 확인할 수 있습니다.

How to Use Ignite UI for Blazor Tree With Ignite UI

You will also need to link an additional CSS file to apply the styling to the IgbTree component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

// in Program.cs file

builder.Services.AddIgniteUIBlazor(
    typeof(IgbTreeModule),
    typeof(IgbTreeItemModule)
);

The simplest way to start using the IgbTree is as follows:

Declaring a tree

IgbTreeItem is the representation of every item that belongs to the IgbTree. Items provide Disabled, Active, Selected and Expanded properties, which give you opportunity to configure the states of the item as per your requirement. The Value property can be used to add a reference to the data entry the item represents.

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

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

<IgbTree>
    @foreach (var student in this.Students)
    {
        <IgbTreeItem Value="@item.Id" Label="@item.Name">
        </IgbTreeItem>
    }
</IgbTree>

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

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

In order to render a tree you do not necessarily need a data set - individual items can be created without an underlying data model using the exposed Label property or provide a custom slot content for the IgbTreeItem label.

<IgbTree>
    <IgbTreeItem Label="North America">
        <IgbTreeItem Label="United States"></IgbTreeItem>
        <IgbTreeItem Label="Canada"></IgbTreeItem>
        <IgbTreeItem Label="Mexico"></IgbTreeItem>
    </IgbTreeItem>
    <IgbTreeItem Label="South America">
        <IgbTreeItem Label="Brazil"></IgbTreeItem>
        <IgbTreeItem Label="Uruguay"></IgbTreeItem>
    </IgbTreeItem>
    <IgbTreeItem Label="Europe">
        <IgbTreeItem Label="United Kingdom"></IgbTreeItem>
        <IgbTreeItem Label="Germany"></IgbTreeItem>
        <IgbTreeItem Label="Bulgaria"></IgbTreeItem>
    </IgbTreeItem>
</IgbTree>

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

Item Interactions

IgbTreeItem could be expanded or collapsed:

항목을 클릭하여 확장 표시기 (기본 동작).
by clicking on the item if the IgbTree ToggleNodeOnClick property is set to true.

By default, multiple items could be expanded at the same time. In order to change this behavior and allow expanding only single branch at a time, the SingleBranchExpand property could be enabled. This way when an item is expanded, all of the others already expanded branches in the same level will be collapsed.

Blazor Tree Selection

In order to setup item selection in the Ignite UI for Blazor Tree component, you just need to set its Selection property. This property accepts the following three modes: None, Multiple and Cascade. Below we will take a look at each of them in more detail.

None

In the IgbTree by default item selection is disabled. Users cannot select or deselect an item through UI interaction, but these actions can still be completed through the provided API method.

Multiple

To enable multiple item selection in the IgbTree just set the Selection property to multiple. This will render a checkbox for every item. Each item has two states - selected or not. This mode supports multiple selection.

<IgbTree Selection=TreeSelection.Multiple>
</IgbTree>

Cascade

To enable cascade item selection in the IgbTree, just set the selection property to cascade. This will render a checkbox for every item.

<IgbTree Selection=TreeSelection.Cascade>
</IgbTree>

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

Keyboard navigation in IgbTree provides a rich variety of keyboard interactions for the user. This functionality is enabled by default and allows users to navigate through the items.

The IgbTree navigation is compliant with W3C accessibility standards and convenient to use.

주요 조합

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

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

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

Styling

You can change the appearance of the IgbTreeItem, by using some of the exposed CSS parts listed below:

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

Using these CSS parts we can customize thе appearance of the IgbTree component like this:

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