Visão geral da árvore React

Ignite UI for React Árvore, também conhecido como componente TreeView, é um controle de alto desempenho que visualiza estruturas de dados expansíveis em uma interface do usuário semelhante a uma árvore, permitindo que você aplique carga sob demanda para itens filho. A Árvore Ignite UI for React também fornece recursos como expansão e recolhimento de nós, navegação de aplicativos aninhados Ignite UI for React nós da Árvore 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.

The Ignite UI for React 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 IgrTree 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.

React Tree Example

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

How to Use Ignite UI for React Tree With Ignite UI

Primeiro, você precisa instalar o pacote npm Ignite UI for React correspondente executando o seguinte comando:

npm install igniteui-react

You will then need to import the IgrTreeand its necessary CSS, like so:

import { IgrTree, IgrTreeItem } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

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

Declaring a tree

IgrTreeItem is the representation of every item that belongs to the IgrTree. 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.

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

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 IgrTreeItem label.

<IgrTree>
    <IgrTreeItem label='North America'>
        <IgrTreeItem label='United States' />
        <IgrTreeItem label='Canada' />
        <IgrTreeItem label='Mexico' />
    </IgrTreeItem>
    <IgrTreeItem label='South America'>
        <IgrTreeItem label='Brazil' />
        <IgrTreeItem label='Uruguay' />
    </IgrTreeItem>
    <IgrTreeItem label='Europe'>
        <IgrTreeItem label='United Kingdom' />
        <IgrTreeItem label='Germany' />
        <IgrTreeItem label='Bulgaria' />
    </IgrTreeItem>
</IgrTree>

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

Item Interactions

IgrTreeItem could be expanded or collapsed:

Clicando no indicador de expansão do item (comportamento padrão).
by clicking on the item if the IgrTree 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.

React Tree Selection

In order to setup item selection in the Ignite UI for React 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 IgrTree 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 IgrTree 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.

<IgrTree selection="multiple" />

Cascade

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

<IgrTree selection="cascade" />

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.

Keyboard navigation in IgrTree 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 IgrTree navigation is compliant with W3C accessibility standards and convenient to use.

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

Styling

You can change the appearance of the IgrTreeItem, 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.

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

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