Blazor 트리 개요

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

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

    Ignite UI for Blazor Tree 구성 요소를 사용하면 사용자가 부모-자식 관계를 유지하면서 계층적 데이터를 트리 뷰 구조로 표현할 수 있으며, 해당 데이터 모델 없이 정적 트리 뷰 구조를 정의할 수 있습니다. 주요 목적은 최종 사용자가 계층적 데이터 구조 내에서 시각화하고 탐색할 수 있도록 하는 것입니다. IgbTree 구성 요소는 또한 로드 온 디맨드 기능, 항목 활성화, 기본 제공 체크박스를 통한 항목의 다중 및 계단식 선택, 기본 제공 키보드 탐색 등을 제공합니다.

    Blazor Tree Example

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

    EXAMPLE
    MODULES
    RAZOR
    CSS

    Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

    How to Use Ignite UI for Blazor Tree With Ignite UI

    ​IgbTree 구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 Blazor Web Assembly 프로젝트의 wwwroot/index.html 파일이나 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 배치해야 합니다.

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
razor
    // in Program.cs file

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

    ​IgbTree 사용을 시작하는 가장 간단한 방법은 다음과 같습니다.

    Declaring a tree

    IgbTreeItem에 속한 IgbTree 모든 항목의 표현입니다. 항목은 요구 사항에 따라 항목의 상태를 구성할 수 있는 기회를 제공하는 속성을 제공합니다 Disabled​ ​Selected​ ​Active​ ​Expanded. 이 Value 속성은 항목이 나타내는 데이터 항목에 대한 참조를 추가하는 데 사용할 수 있습니다.

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

    • 항목 계층 구조를 지정하고 데이터 세트를 반복하여 트리와 해당 항목 선언
    <IgbTree>
    @foreach (var student in this.Students)
    {
        <IgbTreeItem Value="@item.Id" Label="@item.Name">
        </IgbTreeItem>
    }
</IgbTree>
razor

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

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

    트리를 렌더링하기 위해 반드시 데이터 세트가 필요한 것은 아닙니다 - 노출 Label 된 속성을 사용하여 기본 데이터 모델 없이 개별 항목을 만들거나 레이블에 대한 사용자 지정 슬롯 콘텐츠를 제공할 수 있습니다 IgbTreeItem.

    <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>
razor

    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 확장되거나 축소될 수 있습니다.

    • 항목을 클릭하여 확장 표시기 (기본 동작).
    • 항목을 클릭하면 IgbTree ToggleNodeOnClick 속성이 로 설정되어 있는지 확인합니다 true.

    기본적으로 여러 항목을 동시에 확장할 수 있습니다. 이 동작을 변경하고 한 번에 SingleBranchExpand 하나의 분기만 확장할 수 있도록 하려면 속성을 사용하도록 설정할 수 있습니다. 이렇게 하면 항목이 확장될 때 동일한 수준에서 이미 확장된 다른 모든 분기가 축소됩니다.

    Blazor Tree Selection

    Ignite UI for Blazor에서 항목 선택을 설정하려면 Selection 속성을 설정하기만 하면 됩니다. 이 속성은 None, Multiple 및 Cascade의 세 가지 모드를 허용합니다. 아래에서 각각을 더 자세히 살펴보겠습니다.

    None

    ​IgbTree 에서는 기본적으로 항목 선택이 비활성화되어 있습니다. 사용자는 UI 상호 작용을 통해 항목을 선택하거나 선택 취소할 수 없지만 제공된 API 메서드를 통해 이러한 작업을 완료할 수 있습니다.

    Multiple

    에서 여러 항목을 선택할 수 있도록 하려면 IgbTree 그냥 설정하기만 하면 됩니다. Selection property 를 배수. 이렇게 하면 모든 항목에 대한 확인란이 렌더링됩니다. 각 항목에는 선택되거나 선택되지 않은 두 가지 상태가 있습니다. 이 모드는 다중 선택을 지원합니다.

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

    Cascade

    ​IgbTree에서 계단식 항목 선택을 활성화하려면 선택 속성을 cascade로 설정하면 됩니다. 그러면 모든 항목에 대한 확인란이 렌더링됩니다.

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

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

    Keyboard Navigation

    ​IgbTree의 키보드 탐색은 사용자에게 다양한 키보드 상호 작용을 제공합니다. 이 기능은 기본적으로 활성화되어 있으며 사용자가 항목을 탐색할 수 있도록 합니다.

    ​IgbTree 탐색은 W3C 접근성 표준을 준수하며 사용이 편리합니다.

    주요 조합

    • ↓- 표시되는 다음 항목으로 이동합니다. 항목을 활성으로 표시합니다. 마지막 항목인 경우 아무 작업도 수행하지 않습니다.
    • Ctrl + ↓- 표시되는 다음 항목으로 이동합니다. 마지막 항목인 경우 아무 작업도 수행하지 않습니다.
    • ↑- 이전에 표시된 항목으로 이동합니다. 항목을 활성으로 표시합니다. 첫 번째 항목인 경우 아무 작업도 수행하지 않습니다.
    • Ctrl + ↑- 표시된 이전 항목으로 이동합니다. 첫 번째 항목인 경우 아무 작업도 수행하지 않습니다.
    • ←- 확장된 상위 항목에서는 해당 항목을 축소합니다. 항목이 축소되었거나 하위 항목이 없으면 상위 항목으로 이동합니다. 상위 항목이 없으면 아무 작업도 수행하지 않습니다.
    • →- 확장된 상위 항목에서 항목의 첫 번째 하위 항목으로 이동합니다. 접힌 상위 항목에 있는 경우 확장합니다. 항목에 하위 항목이 없으면 아무 작업도 수행하지 않습니다.
    • 홈- 첫 번째 항목으로 이동합니다.
    • 끝- 마지막으로 표시된 항목으로 이동합니다.
    • 탭- 트리 외부의 페이지에서 포커스를 받을 수 있는 다음 요소로 이동합니다.
    • Shift + Tab- 트리 외부의 페이지에서 초점을 맞출 수 있는 이전 요소로 이동합니다.
    • 스페이스- 현재 항목 선택을 전환합니다. 노드를 활성으로 표시합니다.
    • Shift + Space- 선택이 활성화된 경우 Shift를 누른 상태에서 활성 항목과 Space를 누른 항목 사이의 모든 항목 선택을 전환합니다.
    • Enter- 초점이 맞춰진 항목을 활성화합니다. 항목에 링크가 있으면 링크를 엽니다.
    • *- 항목과 같은 수준의 모든 형제 항목을 확장합니다.

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

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

    Styling

    아래에 나열된 노출된 CSS 부분 중 일부를 사용하여 모양을 변경할 수 있습니다. IgbTreeItem​

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

    이러한 CSS 부분을 사용하여 다음과 같이 IgbTree 구성 요소의 모양을 사용자 정의할 수 있습니다.

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

    EXAMPLE

    API References

    Additional Resources