Componente de línea de tiempo en React.js

Las líneas de tiempo se utilizan a menudo en las interfaces de usuario para ilustrar un procedimiento paso a paso. Puede describir al usuario en qué etapa del proceso se encuentra actualmente y cuáles son las tareas adicionales. El módulo Material UI Labs proporciona un componente de línea de tiempo junto con otros componentes de utilidad para que sea muy fácil de incluir en nuestra aplicación React.

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/lab

Como ejemplo, crearemos un componente Etapas que ilustre las diferentes etapas por las que pasa un artículo en GeeksforGeeks en forma de una línea de tiempo. Cree un archivo stage.js en la carpeta src donde definiremos este componente.

Estructura del proyecto: Tendrá el siguiente aspecto.

Componente de línea de tiempo en Material-UI

El componente Timeline en Material UI labs muestra los elementos en orden cronológico y les da a los desarrolladores la libertad de modificar la forma en que se muestran hasta cierto punto. Tiene algunos accesorios útiles:

• alinear: el contenido textual se puede publicar a la izquierda, a la derecha o alternando con la línea de tiempo.
• color: se usa para indicar el color del punto de la línea de tiempo en esa etapa. Es el accesorio del componente TimelineDot que usamos dentro del componente Timeline.

import React from 'react';
import Timeline from '@material-ui/lab/Timeline';
import TimelineItem from '@material-ui/lab/TimelineItem';
import TimelineSeparator from '@material-ui/lab/TimelineSeparator';
import TimelineConnector from '@material-ui/lab/TimelineConnector';
import TimelineContent from '@material-ui/lab/TimelineContent';
import TimelineDot from '@material-ui/lab/TimelineDot';
import { Paper } from '@material-ui/core';
  
const paperstyle={
    padding: '8px 1px',
    textAlign:'center',
}
  
export default function Stages() {
    return (
        <Timeline align="alternate">
            <TimelineItem>
                <TimelineSeparator>
                    <TimelineDot color="primary" />
                    <TimelineConnector />
                </TimelineSeparator>
                <TimelineContent>
                <Paper elevation={3} style={paperstyle}>Step 1 : Write
                </Paper>
                </TimelineContent>
            </TimelineItem>
            <TimelineItem>
                <TimelineSeparator>
                    <TimelineDot color="primary" />
                    <TimelineConnector />
                </TimelineSeparator>
                <TimelineContent>
                <Paper elevation={3} style={paperstyle}>Step 2 : Draft
                </Paper>
                </TimelineContent>
            </TimelineItem>
            <TimelineItem>
                <TimelineSeparator>
                    <TimelineDot color="primary" />
                    <TimelineConnector />
                </TimelineSeparator>
                <TimelineContent>
                <Paper elevation={3} 
                       style={paperstyle}>Step 3 : Pending
                </Paper>
                </TimelineContent>
            </TimelineItem>
            <TimelineItem>
                <TimelineSeparator>
                    <TimelineDot />
                </TimelineSeparator>
                <TimelineContent>
                <Paper elevation={3} 
                       style={paperstyle}>Step 4 : Publish
                </Paper>
                </TimelineContent>
            </TimelineItem>
        </Timeline>
    );
}

Ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

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 Stages from './stages';
  
class GFG extends Component {
    render() {
        return (
            <React.Fragment>
                <CssBaseline />
                <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>
                        Timeline of an Article
                    </Typography>
                </Container>
                <Container maxWidth="sm">
                    <Stages></Stages>
                </Container>
            </React.Fragment>
        );
    }
}
  
export default GFG;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida: