API React MUI TreeItem

Material-UI es una biblioteca de interfaz de usuario que proporciona componentes robustos y personalizables predefinidos para React para facilitar el desarrollo web. El diseño de MUI se basa en la parte superior de Material Design de Google. 

En este artículo, vamos a discutir la API React MUI TreeItem . TreeView muestra una lista jerárquica. Generalmente se usa para mostrar un sistema de archivos o se puede usar como un navegador del sistema de archivos. El TreeItem es el componente que contiene el texto/valor dentro del TreeView. La API proporciona muchas funcionalidades y vamos a aprender a implementarlas.

API Importar TreeItem

import TreeItem from '@mui/lab/TreeItem';
// or
import { TreeItem } from '@mui/lab';

Lista de accesorios : aquí está la lista de diferentes accesorios utilizados con este componente. Podemos acceder a ellos y modificarlos según nuestras necesidades.

• children : Es un componente similar a la fila de la tabla.
• clases : esto anula los estilos existentes o agrega nuevos estilos al componente.
• sx : El accesorio del sistema permite definir anulaciones del sistema, así como estilos CSS adicionales. 
• nodeId : Toma el id del Node.
• colapsoIcon : Se utiliza para establecer el icono utilizado para colapsar
• ContentComponent : debe ser un TreeItemContent y usarse como un Node de contenido.
• ContentProps : se utiliza para accesorios de contenido.
• disabled : Se utiliza para deshabilitar el elemento.
• endIcon : Es el icono que se muestra al final del elemento.
• expandIcon : Es el icono que se utiliza para expandirlo.
• icono : Es el icono que se muestra al final del ítem.
• etiqueta: Se utiliza para establecer la etiqueta del artículo.
• TransitionComponent : se utiliza para la transición en la MUI.
• TransitionProps: los accesorios se aplican al componente de transición.

Sintaxis : Cree el TreeItem de la siguiente manera:

<TreeView defaultCollapseIcon={<ExpandMoreIcon />} 
  defaultExpandIcon={<ChevronRightIcon />}>
  <TreeItem nodeId="1" label="Applications">
    <TreeItem nodeId="2" label="Calendar" />
  </TreeItem>
</TreeView>

Instalar y crear la aplicación React y agregar las dependencias de MUI.

Paso 1: Cree un proyecto de reacción usando el siguiente comando.

npx create-react-app gfg_tutorial

Paso 2: Entrar en el directorio del proyecto

cd gfg_tutorial

Paso 3: instale las dependencias de MUI de la siguiente manera:

npm install @mui/material @emotion/react @emotion/styled @mui/lab @mui/icons-material

Paso 4 : Ejecute el proyecto de la siguiente manera:

npm start

Ejemplo 1 : En el siguiente ejemplo, tenemos un TreeView con TreeItem.

Aplicación.js