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.

    El componente Ignite UI for React Tree permite a los usuarios representar datos jerárquicos en una estructura de vista en árbol, manteniendo relaciones padre-hijo, así como definir una estructura estática de vista en árbol sin un modelo de datos correspondiente. Su propósito principal es permitir que los usuarios finales visualizen y naveguen dentro de estructuras de datos jerárquicas. ElIgrTree componente también ofrece capacidades de carga bajo demanda, activación de ítems, selección múltiple y en cascada de elementos mediante casillas de verificación integradas, navegación con teclado integrada y más.

    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

    IgrTreeItemes la representación de cada objeto que pertenece a laIgrTree. Los objetos proporcionandisabled propiedadesactive​selected​expanded y los que te dan la oportunidad de configurar los estados del objeto según tus necesidades. Lavalue propiedad puede usarse para añadir una referencia a la entrada de datos que representa el elemento.

    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

    Para renderizar un árbol no necesitas necesariamente un conjunto de datos: se pueden crear elementos individuales sin un modelo de datos subyacente usando la propiedad de exposiciónlabel o proporcionar un contenido de ranura personalizado para laIgrTreeItem etiqueta.

    <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

    IgrTreeItempodrían expandirse o colapsarse:

    • Haciendo clic en el indicador de expansión del objeto (comportamiento por defecto).
    • Haciendo clic en el elemento si elIgrTree toggleNodeOnClick Propiedad está configurada comotrue.

    Por defecto, varios elementos podían expandirse al mismo tiempo. Para cambiar este comportamiento y permitir expandir solo una sola rama a la vez, se podía habilitar lasingleBranchExpand propiedad. De este modo, cuando un objeto se expande, todas las demás ramas ya ampliadas en el mismo nivel se colapsarán.

    React Tree Selection

    Para configurar la selección de objetos en el componente Ignite UI for React Árbol, solo tienes que establecer suselection propiedad. Esta propiedad acepta los siguientes tres modos: Ninguno, Múltiple y Cascada. A continuación, analizaremos cada uno de ellos con más detalle.

    None

    Por defecto,IgrTree la selección de objetos está desactivada. Los usuarios no pueden seleccionar ni deseleccionar un elemento mediante la interacción con la interfaz, pero estas acciones aún pueden completarse mediante el método de API proporcionado.

    Multiple

    Para permitir la selección de múltiples elementos en elIgrTree solo configura laselection propiedad para que sea varios. Esto mostrará una casilla para cada elemento. Cada elemento tiene dos estados: seleccionados o no. Este modo permite selección múltiple.

    <IgrTree selection="multiple" />

    Cascade

    Para habilitar la selección de elementos en cascadaIgrTree, simplemente configura la propiedad de selección en cascada. Esto mostrará una casilla para cada elemento.

    <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

    La navegación con teclado ofreceIgrTree una gran variedad de interacciones con teclado para el usuario. Esta funcionalidad está activada por defecto y permite a los usuarios navegar entre los elementos.

    LaIgrTree navegación cumple con los estándares de accesibilidad del W3C y es cómoda de usar.

    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

    Puedes cambiar la apariencia de laIgrTreeItem opción usando algunas de las piezas CSS expuestas que se enumeran a continuación:

    Nombre de la pieza Descripción
    wrapper El contenedor del elemento del árbol.
    selected Indica el estado seleccionado. Se aplica awrapper.
    focused Indica estado enfocado. Se aplica awrapper.
    active Indica un estado activo. Se aplica awrapper.
    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);
}

    API References

    Additional Resources