Las vistas de árbol se utilizan a menudo para mostrar árboles de directorios de sistemas de archivos o múltiples opciones en una estructura jerárquica. Un icono de navegador indica si una opción está en un estado expandido o no, luego muestra los elementos dentro de ella en una sección con sangría debajo de ella. Es muy prominente en las barras laterales de sitios web como Gmail para mostrar opciones y subopciones juntas.
Creación de la aplicación React e instalación del módulo:
Paso 1: Cree una aplicación React usando el siguiente comando.
npx create-react-app gfg
Paso 2: después de crear la carpeta de su proyecto, es decir, gfg, acceda a ella con el siguiente comando.
cd gfg
Paso 3: Después de crear la aplicación ReactJS, instale los módulos material-ui usando el siguiente comando.
npm install @material-ui/core npm install @material-ui/icons npm install @material-ui/lab
Necesitaremos el módulo de laboratorio Material-UI para el componente TreeView y el módulo de iconos para los iconos. Ejecute los siguientes comandos en su terminal en el directorio de su proyecto para instalar estos módulos.
Importación de TreeView: puede importar el componente <TreeView /> desde @material-ui/lab usando el siguiente código.
import { TreeView } from '@material-ui/lab';
Ejemplo: crearemos una pequeña vista de árbol como la de la barra lateral del sitio web GeeksforGeeks. Cree un nuevo archivo trees.js en la carpeta src donde definiremos nuestro componente.
Directorio del proyecto: crea el archivo trees.js.
Componente TreeView en Material-UI: El componente TreeView tiene algunos accesorios útiles:
- defaultCollapseIcon: para especificar el icono utilizado para colapsar el Node.
- defaultExpandIcon: para especificar el icono utilizado para expandir el Node.
- multiselección: un valor bool que, cuando es verdadero, activa la multiselección al presionar ctrl y shift.
Creación del componente Trees: el sitio web GeeksforGeeks tiene un menú de barra lateral en una estructura similar a un árbol con muchas secciones como Inicio, Cursos, Estructuras de datos, Algoritmos, etc. Crearemos una versión similar y más pequeña para entender cómo usar el componente TreeView. .
El componente <TreeView> es el componente superior en el que se define toda la estructura de árbol.
<TreeView> </TreeView>
Luego, cada Node se define utilizando el componente TreeItem que tiene dos accesorios principales: una identificación de Node única y una etiqueta. La etiqueta es donde puede definir qué elemento sería el Node, un botón, un div con estilo o un elemento de lista. Aquí usaremos un elemento de lista.
<TreeItem nodeId="1" label={
<ListItem button component="a" href="#">
<ListItemText primary="Home" />
</ListItem>}>
</TreeItem>
Ahora, cada uno de estos Nodes se puede anidar aún más según el requisito, definiendo así una estructura similar a un árbol.
Ejemplo:
Nombre de archivo: árboles.js
Javascript
import React, { Component } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import clsx from 'clsx';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import Drawer from '@material-ui/core/Drawer';
import { useTheme } from '@material-ui/core/styles';
import { TreeView } from '@material-ui/lab';
import TreeItem from '@material-ui/lab/TreeItem';
const drawerWidth = 240;
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
paddingTop: 5,
},
appbar: {
background: 'transparent',
boxShadow: 'none',
},
drawerPaper: {
position: 'relative',
whiteSpace: 'nowrap',
width: drawerWidth,
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
},
drawerPaperClose: {
overflowX: 'hidden',
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
width: theme.spacing(7),
[theme.breakpoints.up('sm')]: {
width: theme.spacing(9),
},
},
}));
export default function Trees() {
const theme = useTheme();
const classes = useStyles(theme);
const [open, setOpen] = React.useState(false);
function handleDrawer() {
setOpen(!open);
}
return (
<div className={classes.root}>
{/* AppBar part - Only contains a menu icon*/}
<AppBar position="static" color="primary" elevation={0}>
<Toolbar variant="dense">
{/* Menu icon onclick handler should open the drawer,
hence we change the state 'open' to true*/}
<IconButton edge="start"
style={{ color: theme.palette.secondary.icons }}
aria-label="menu" onClick={() => { handleDrawer() }}>
<MenuIcon />
</IconButton>
</Toolbar>
</AppBar>
{/* Drawer (can be placed anywhere in template) */}
<Drawer
variant="temporary"
classes={{
paper: clsx(classes.drawerPaper,
!open && classes.drawerPaperClose),
}}
open={open}>
<List>
<div>
{/* Tree Structure */}
<TreeView>
<TreeItem nodeId="1" label={
<ListItem button component="a" href="#">
<ListItemText primary="Home" />
</ListItem>}>
</TreeItem>
<TreeItem nodeId="2" label={
<ListItem button component="a" href="#">
<ListItemText primary="Data Structures" />
</ListItem>}>
<TreeItem nodeId="6" label={
<ListItem button component="a" href="#">
<ListItemText primary="Arrays" />
</ListItem>}>
</TreeItem>
<TreeItem nodeId="7" label={
<ListItem button component="a" href="#">
<ListItemText primary="Linked List" />
</ListItem>}>
</TreeItem>
</TreeItem>
<TreeItem nodeId="3" label={
<ListItem button component="a" href="#">
<ListItemText primary="Algortihms" />
</ListItem>}>
<TreeItem nodeId="8" label={
<ListItem button component="a" href="#">
<ListItemText primary="Searching" />
</ListItem>}>
</TreeItem>
<TreeItem nodeId="9" label={
<ListItem button component="a" href="#">
<ListItemText primary="Sorting" />
</ListItem>}>
</TreeItem>
</TreeItem>
<TreeItem nodeId="4" label={
<ListItem button component="a" href="#">
<ListItemText primary="Languages" />
</ListItem>}>
<TreeItem nodeId="10" label={
<ListItem button component="a" href="#">
<ListItemText primary="C++" />
</ListItem>}>
</TreeItem>
<TreeItem nodeId="11" label={
<ListItem button component="a" href="#">
<ListItemText primary="Java" />
</ListItem>}>
</TreeItem>
<TreeItem nodeId="12" label={
<ListItem button component="a" href="#">
<ListItemText primary="Python" />
</ListItem>}>
</TreeItem>
<TreeItem nodeId="13" label={
<ListItem button component="a" href="#">
<ListItemText primary="JavaScript" />
</ListItem>}>
</TreeItem>
</TreeItem>
<TreeItem nodeId="5" label={
<ListItem button component="a" href="#">
<ListItemText primary="GBlog" />
</ListItem>}></TreeItem>
</TreeView>
</div>
</List>
</Drawer>
{/* End-Drawer */}
</div>
);
}
Nombre de archivo: App.js
Javascript
import React, { Component } from 'react';
import CssBaseline from '@material-ui/core/CssBaseline';
import Container from '@material-ui/core/Container';
import Typography from '@material-ui/core/Typography';
import Trees from './trees';
class GFG extends Component {
render() {
return (
<React.Fragment>
<CssBaseline />
<Trees></Trees>
<br></br>
<Container maxWidth="sm">
<Typography component="h1" variant="h1"
align="center" gutterBottom>
Geeks for Geeks
</Typography>
<br />
<Typography component="h3" variant="h3"
align="center" gutterBottom>
TreeView Component
</Typography>
</Container>
</React.Fragment>
);
}
}
export default GFG;
Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando desde el directorio raíz del proyecto.
npm start
Producción:
Enlace de referencia: https://material-ui.com/components/tree-view/
Publicación traducida automáticamente
Artículo escrito por abhijeetcatches33 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA