Descripción general del árbol React

Ignite UI for React Tree, también conocido como componente TreeView, es un control de alto rendimiento que visualiza estructuras de datos expandibles dentro de una interfaz de usuario con forma de árbol, lo que le permite aplicar carga a pedido para elementos secundarios. Ignite UI for React Tree también proporciona funciones como nodos expandibles y contraídos, navegación de aplicaciones anidadas, los nodos Ignite UI for React Tree se pueden generar manualmente o desde una fuente de datos vinculada.

Para los usuarios finales, esto significa que pueden navegar fácilmente a través de diferentes páginas de aplicaciones, usar selecciones, casillas de verificación, agregar textos, íconos, imágenes y más.

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

En este ejemplo básico Ignite UI for React Tree, puedes ver cómo definir un árbol y sus elementos especificando la jerarquía de elementos.

How to Use Ignite UI for React Tree With Ignite UI

Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:

npm install igniteui-react

Entonces tendrás que importar elIgrTree CSS necesario y su contenido, así:

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

La forma más sencilla de empezar a usar elIgrTree uso es la siguiente:

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.

Los elementos se pueden vincular a un modelo de datos para que sus estados expandidos y seleccionados también se reflejen en los datos subyacentes.

Declarar un árbol creando elementos estáticos independientes

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:

Haciendo clic en el indicador de expansión del objeto (comportamiento por defecto).
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" />

En este modo, el estado de selección de un padre depende completamente del estado de selección de sus hijos. Cuando un padre tiene algunos hijos seleccionados y algunos no seleccionados, su casilla de verificación está en un 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.

Combinaciones de teclas

↓: navega al siguiente elemento visible. Marca el elemento como activo. No hace nada si está en el ÚLTIMO elemento.
CTRL + ↓- navega al siguiente elemento visible. No hace nada si está en el ÚLTIMO artículo.
↑- navega al elemento visible anterior. Marca el elemento como activo. No hace nada si está en el PRIMER elemento.
CTRL + ↑- navega al elemento visible anterior. No hace nada si está en el PRIMER artículo.
←: en un elemento principal expandido, lo contrae. Si el elemento está contraído o no tiene hijos, se mueve a su elemento principal. No hace nada si no hay ningún elemento principal.
→- en un elemento principal expandido, navega al primer elemento secundario del elemento. Si se encuentra en un elemento principal contraído, lo expande. No hace nada si el artículo no tiene hijos.
HOME- navega al PRIMER elemento.
END- navega hasta el ÚLTIMO elemento visible.
TAB- navega al siguiente elemento enfocable en la página, fuera del árbol.
SHIFT + TAB- navega al elemento enfocable anterior en la página, fuera del árbol.
SPACE- alterna la selección del elemento actual. Marca el nodo como activo.
SHIFT + SPACE- alterna la selección de todos los elementos entre el activo y el que presiona Espacio mientras se mantiene presionado SHIFT si la selección está habilitada.
ENTER- Activa el elemento enfocado. Si el elemento tiene un vínculo, abre el vínculo.
*: expande el artículo y todos los artículos hermanos en el mismo nivel.

Cuando la selección está habilitada, la selección de elementos por parte del usuario final solo se permite a través de la casilla de verificación representada. Dado que ambos tipos de selección permiten selección múltiple, están disponibles las siguientes interacciones con el mouse y el teclado:

Hacer clic: cuando se realiza en la casilla de verificación del elemento, alterna la selección del elemento si la selección está habilitada. De lo contrario, enfoca el elemento.
SHIFT + Click- cuando se realiza en la casilla de verificación del elemento, alterna la selección de todos los elementos entre el activo y el que se hace clic mientras se mantiene presionada SHIFT si la selección está habilitada

Styling

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

Nombre de la pieza	Descripción
`wrapper`	El contenedor del elemento del árbol.
`selected`	Indica el estado seleccionado. Se aplica a`wrapper`.
`focused`	Indica estado enfocado. Se aplica a`wrapper`.
`active`	Indica un estado activo. Se aplica a`wrapper`.
`indicator`	El indicador de expansión del elemento del árbol.
`label`	El contenido del elemento del árbol.
`text`	El elemento del árbol mostraba texto.
`select`	La casilla de verificación del elemento del árbol cuando la selección está habilitada.

Usando estas piezas CSS podemos personalizar la apariencia delIgrTree componente de esta manera:

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