Visão geral da árvore Web Components

Ignite UI for Web Components 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 Web Components Tree também fornece recursos como expansão e recolhimento de nós, navegação de aplicativo aninhada, nós Ignite UI for Web Components Tree que 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 Web Components Tree permite que os usuários representem dados hierárquicos em uma estrutura de visão em árvore, mantendo relações pai-filho, assim como definir uma estrutura estática de visão em árvore sem um modelo de dados correspondente. Seu principal objetivo é permitir que os usuários finais visualizem e naveguem dentro de estruturas de dados hierárquicas. OIgcTreeComponent componente também oferece 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 embutidas, navegação por teclado embutida e muito mais.

Web Components Tree Example

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

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

Primeiro, você precisa instalar o Ignite UI for Web Components executando o seguinte comando:

npm install igniteui-webcomponents

Antes de usá-losIgcTreeComponent, você precisa registrá-los da seguinte forma:

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

Para uma introdução completa ao Ignite UI for Web Components, leia o tópico Comecando.

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

Declaring a tree

IgcTreeItemComponenté a representação de todo item que pertence a.IgcTreeComponent Os itens fornecemdisabled,activeselected eexpanded propriedades, que dão a você a oportunidade de configurar os estados do item conforme sua necessidade. Avalue propriedade 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

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

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 expostalabel ou fornecer um conteúdo de slot personalizado para oIgcTreeItemComponent rótulo.

<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

IgcTreeItemComponentpoderia ser expandido ou colapsado:

Clicando no indicador de expansão do item (comportamento padrão).
ao clicar no item se oIgcTreeComponent toggleNodeOnClick Propriedade é configurada paratrue.

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

Por padrão, vários itens poderiam ser expandidos ao mesmo tempo. Para mudar esse comportamento e permitir expandir apenas um único ramo por vez, asingleBranchExpand propriedade poderia ser ativada. Assim, quando um item for expandido, todos os outros ramos já expandidos no mesmo nível serão colapsados.

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

Além disso, forneceIgcTreeComponent os seguintes métodos de API para interações com itens:

expand- expande todos os itens. Se um array de itens for passado, expande apenas os itens especificados.
collapse- Colapsa todos os itens. Se um array de itens for passado, colapsa apenas os itens especificados.
IgcSelectComponent- seleciona todos os itens. Se um array de itens for passado, seleciona apenas os itens especificados. Não emiteselection evento.
Tree.Deselect- desseleciona todos os itens. Se um array de itens for passado, desmarca apenas os itens especificados. Não emiteselection evento.

Web Components Tree Selection

Para configurar a seleção de itens no componente Ignite UI for Web Components Árvore, basta definir a propriedade deleselection. Essa propriedade aceita os seguintes três modos: Nenhum, Múltiplo e Cascata. Abaixo, vamos analisar cada um deles com mais detalhes.

None

Por padrão,IgcTreeComponent a seleção de itens está desativada. Os usuários não podem selecionar ou desmarcar um item por meio da interação da interface, mas essas ações ainda podem ser realizadas pelo método da API fornecido.

Multiple

Para permitir a seleção de múltiplos itens, bastaIgcTreeComponent definir aselection propriedade para múltiplos. Isso gera uma caixa de seleção para cada item. Cada item tem dois estados - selecionados ou não. Este modo suporta múltiplas seleções.

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

Cascade

Para habilitar a seleçãoIgcTreeComponent de itens em cascata, basta definir a propriedade de seleção em cascata. Isso gera uma caixa de seleção para cada item.

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

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 ofereceIgcTreeComponent uma grande variedade de interações com o teclado para o usuário. Essa funcionalidade é ativada por padrão e permite que os usuários naveguem pelos itens.

AIgcTreeComponent navegação está em conformidade com os padrões de acessibilidade do W3C e é conveniente 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.
HOME- navega para o PRIMEIRO item.
END- 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 até o elemento focalizável anterior na página, fora da árvore.
SPACE- alterna a seleção do item atual. Marca o nó como ativo.
SHIFT + SPACE- alterna a seleção de todos os itens entre o ativo e o pressionado Espaço enquanto mantém pressionado SHIFT se a seleção estiver ativada.
ENTER- Ativa o item em destaque. 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 + Click- quando executado na caixa de seleção do item, alterna a seleção de todos os itens entre o ativo e o clicado enquanto segura SHIFT se a seleção estiver ativada

Web Components Tree Load On Demand

A Ignite UI for Web Components Tree pode ser renderizada de tal forma que exija a quantidade mínima de dados a serem recuperados do servidor para que o usuário possa vê-los o mais rápido possível. Com essa abordagem de carregamento dinâmico de dados, somente após o usuário expandir um item, os filhos para aquele item pai específico serão recuperados. Esse mecanismo, também conhecido como Load on Demand, pode ser facilmente configurado para funcionar com quaisquer dados remotos.

Após o usuário clicar no ícone de expansão, ele é substituído por um indicador de carregamento. Quando a propriedade de carregamento é resolvida como false, o indicador de carregamento desaparece e os filhos são carregados.

Você pode fornecer um conteúdo personalizado de slot para a área de carregamento usando oloadingIndicator slot. Se tal slot não estiver definido, oIgcCircularProgressComponent é usado.

Load On Demand With Virtualization

Carregar um número maior de filhos sob demanda na Ignite UI for Web Components Tree pode impactar negativamente o desempenho, já que os itens da árvore são definidos declarativamente pelo design. A demonstração a seguir mostra como a biblioteca @lit-labs/virtualizer pode ser usada para renderizar os itens da árvore filho em um contêiner virtualizado. O resultado é um desempenho aprimorado, já que apenas o pedaço visível dos filhos é renderizado no DOM.

Styling

Você pode mudar a aparênciaIgcTreeItemComponent do usuário usando algumas das partes CSS expostas listadas abaixo:

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 peças CSS, podemos personalizar a aparência doIgcTreeComponent componente assim:

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