Visão geral da árvore Blazor

Ignite UI for Blazor Tree, também conhecido como componente TreeView, é um controle de alto desempenho que visualiza estruturas de dados expansíveis dentro de uma UI em forma de árvore, permitindo que você aplique carga sob demanda para itens filhos. O Ignite UI for Blazor Tree também fornece recursos como expandir e recolher nós, navegação de aplicativo aninhada, nós Ignite UI for Blazor Tree podem ser gerados manualmente ou de uma fonte de dados vinculada.

Para os usuários finais, isso significa que eles podem navegar facilmente por diferentes páginas do aplicativo, usar seleção, caixas de seleção, adicionar textos, ícones, imagens e muito mais.

O componente Ignite UI for Blazor Tree permite que os usuários representem dados hierárquicos em uma estrutura de visualização em árvore, mantendo relacionamentos pai-filho, bem como definam uma estrutura de visualização em árvore estática sem um modelo de dados correspondente. Seu objetivo principal é permitir que os usuários finais visualizem e naveguem dentro de estruturas de dados hierárquicas. O componente IgbTree também fornece recursos de carga sob demanda, ativação de itens, seleção múltipla e em cascata de itens por meio de caixas de seleção integradas, navegação por teclado integrada e muito mais.

Blazor Tree Example

Neste exemplo básico Ignite UI for Blazor Tree, você pode ver como definir uma árvore e seus itens especificando a hierarquia de itens.

How to Use Ignite UI for Blazor Tree With Ignite UI

Você também precisará vincular um arquivo CSS adicional para aplicar o estilo ao componente IgbTree. O seguinte precisa ser colocado no arquivo wwwroot/index.html em um projeto Blazor Web Assembly ou no arquivo Pages/_Host.cshtml em um projeto Blazor Server:

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

// in Program.cs file

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

A maneira mais simples de começar a usar o IgbTree é a seguinte:

Declaring a tree

IgbTreeItem é a representação de cada item que pertence ao IgbTree. Os itens fornecem propriedades Disabled, Active, Selected e Expanded, que lhe dão a oportunidade de configurar os estados do item conforme sua necessidade. A propriedade Value pode ser usada para adicionar uma referência à entrada de dados que o item representa.

Os itens podem ser declarados usando uma das seguintes abordagens.

Declarando a árvore e seus itens especificando a hierarquia de itens e iterando por meio de um conjunto de dados

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

Os itens podem ser vinculados a um modelo de dados para que seus estados expandidos e selecionados também sejam refletidos nos dados subjacentes.

Declarando uma árvore criando itens estáticos não vinculados

Para renderizar uma árvore, você não precisa necessariamente de um conjunto de dados: itens individuais podem ser criados sem um modelo de dados subjacente usando a propriedade Label exposta ou fornecer um conteúdo de slot personalizado para o rótulo 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>

[!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 pode ser expandido ou recolhido:

clicando no indicador de expansão do item (comportamento padrão).
clicando no item se a propriedade IgbTree ToggleNodeOnClick estiver definida como true.

Por padrão, vários itens podem ser expandidos ao mesmo tempo. Para alterar esse comportamento e permitir a expansão de apenas uma ramificação por vez, a propriedade SingleBranchExpand pode ser habilitada. Dessa forma, quando um item é expandido, todas as outras ramificações já expandidas no mesmo nível serão recolhidas.

Blazor Tree Selection

Para configurar a seleção de itens no componente Ignite UI for Blazor Tree, você só precisa definir sua propriedade Selection. Esta propriedade aceita os três modos a seguir: None, Multiple e Cascade. Abaixo, daremos uma olhada em cada um deles com mais detalhes.

None

No IgbTree, por padrão, a seleção de itens é desabilitada. Os usuários não podem selecionar ou desmarcar um item por meio da interação da IU, mas essas ações ainda podem ser concluídas por meio do método de API fornecido.

Multiple

Para habilitar a seleção de múltiplos itens no IgbTree, basta definir a propriedade Selection como multiple. Isso renderizará uma caixa de seleção para cada item. Cada item tem dois estados - selecionado ou não. Este modo suporta seleção múltipla.

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

Cascade

Para habilitar a seleção de itens em cascata no IgbTree, basta definir a propriedade selection como cascade. Isso renderizará uma caixa de seleção para cada item.

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

Nesse modo, o estado de seleção de um pai depende inteiramente do estado de seleção de seus filhos. Quando um pai tem alguns filhos selecionados e alguns desmarcados, sua caixa de seleção está em um estado indeterminado.

A navegação por teclado no IgbTree fornece uma rica variedade de interações de teclado para o usuário. Essa funcionalidade é habilitada por padrão e permite que os usuários naveguem pelos itens.

A navegação IgbTree é compatível com os padrões de acessibilidade do W3C e é fácil de usar.

Combinações de teclas

↓- navega para o próximo item visível. Marca o item como ativo. Não faz nada se estiver no ÚLTIMO item.
Ctrl + ↓- navega para o próximo item visível. Não faz nada se estiver no ÚLTIMO item.
↑- navega para o item visível anterior. Marca o item como ativo. Não faz nada se estiver no PRIMEIRO item.
Ctrl + ↑- navega para o item visível anterior. Não faz nada se estiver no PRIMEIRO item.
←- em um item pai expandido, o recolhe. Se o item estiver recolhido ou não tiver filhos, move para seu item pai. Não faz nada se não houver um item pai.
→- em um item pai expandido, navega para o primeiro filho do item. Se em um item pai recolhido, expande-o. Não faz nada se o item não tiver filhos.
Início- navega para o PRIMEIRO item.
Fim- navega até o ÚLTIMO item visível.
Tab- navega para o próximo elemento focalizável na página, fora da árvore.
Shift + Tab- navega para o elemento focalizável anterior na página, fora da árvore.
Espaço- alterna a seleção do item atual. Marca o nó como ativo.
Shift + Espaço- alterna a seleção de todos os itens entre o ativo e o pressionado. Espaço enquanto segura Shift se a seleção estiver habilitada.
Enter- ativa o item em foco. Se o item tiver um link, abre o link.
*- expande o item e todos os itens irmãos no mesmo nível.

Quando a seleção está habilitada, a seleção de itens pelo usuário final só é permitida por meio da caixa de seleção renderizada. Como ambos os tipos de seleção permitem seleção múltipla, as seguintes interações de mouse e teclado estão disponíveis:

Clique- quando executado na caixa de seleção do item, alterna a seleção do item se a seleção estiver habilitada. Caso contrário, foca o item
Shift + Clique- quando executado na caixa de seleção do item, alterna a seleção de todos os itens entre o ativo e o clicado enquanto mantém Shift pressionado se a seleção estiver habilitada

Styling

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

Nome da peça	Descrição
`wrapper`	O invólucro para o item da árvore.
`selected`	Indica o estado selecionado. Aplica-se a`wrapper`.
`focused`	Indica estado focado. Aplica-se a`wrapper`.
`active`	Indica um estado ativo. Aplica-se a`wrapper`.
`indicator`	O indicador de expansão do item da árvore.
`label`	O conteúdo do item da árvore.
`text`	O item da árvore exibia texto.
`select`	A caixa de seleção do item da árvore quando a seleção está habilitada.

Usando essas partes CSS, podemos personalizar a aparência do componente IgbTree assim:

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