Reaccionar MUI TimelineSeparator API

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 TimelineSeparator de React MUI. TimelineSeparator es la línea entre dos elementos de la línea de tiempo que forma la línea en la línea de tiempo y los elementos aparecen a la izquierda o a la derecha. Además, el TimelineDot aparece en él. La API proporciona muchas funcionalidades y vamos a aprender a implementarlas.

Importar API Separador de línea de tiempo

import TimelineSeparator from '@mui/lab/TimelineSeparator';
// or
import { TimelineSeparator } 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: la propiedad del sistema permite definir anulaciones del sistema, así como estilos CSS adicionales. 

Sintaxis: Cree el componente TimelineSeparator de la siguiente manera:

<TimelineItem>
    <TimelineSeparator>
        <TimelineDot color="success" />
    </TimelineSeparator>
    <TimelineContent>Javascript</TimelineContent>
</TimelineItem>

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: Accede al 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

Paso 4: Ejecute el proyecto de la siguiente manera:

npm start

Ejemplo 1: en el siguiente ejemplo, tenemos una línea de tiempo con TimelineSeparators entre los elementos de la línea de tiempo.

import "./App.css";
import Timeline from "@mui/lab/Timeline";
import TimelineItem from "@mui/lab/TimelineItem";
import TimelineSeparator from "@mui/lab/TimelineSeparator";
import TimelineConnector from "@mui/lab/TimelineConnector";
import TimelineContent from "@mui/lab/TimelineContent";
import TimelineDot from "@mui/lab/TimelineDot";
function App() {
  return (
    <div className="App">
      <div
        className="head"
        style={{
          width: "fit-content",
          margin: "auto",
        }}
      >
        <h1
          style={{
            color: "green",
          }}
        >
          GeeksforGeeks
        </h1>
        <strong>React MUI TimelineSeparator API</strong>
      </div>
  
      <Timeline>
        <TimelineItem position="left">
          <TimelineSeparator>
            <TimelineDot />
            <TimelineConnector />
          </TimelineSeparator>
          <TimelineContent>Frontend Learning Path</TimelineContent>
        </TimelineItem>
        <TimelineItem>
          <TimelineSeparator>
            <TimelineDot />
            <TimelineConnector />
          </TimelineSeparator>
          <TimelineContent>HTML</TimelineContent>
        </TimelineItem>
        <TimelineItem>
          <TimelineSeparator>
            <TimelineDot />
            <TimelineConnector />
          </TimelineSeparator>
          <TimelineContent>CSS</TimelineContent>
        </TimelineItem>
        <TimelineItem>
          <TimelineSeparator>
            <TimelineDot />
          </TimelineSeparator>
          <TimelineContent>Javascript</TimelineContent>
        </TimelineItem>
      </Timeline>
    </div>
  );
}
  
export default App;

Producción:

 

Ejemplo 2 : En el siguiente ejemplo, hemos personalizado los componentes TimelineSeparator usando el atributo sx.

import "./App.css";
import Timeline from "@mui/lab/Timeline";
import TimelineItem from "@mui/lab/TimelineItem";
import TimelineSeparator from "@mui/lab/TimelineSeparator";
import TimelineConnector from "@mui/lab/TimelineConnector";
import TimelineContent from "@mui/lab/TimelineContent";
import TimelineDot from "@mui/lab/TimelineDot";
function App() {
  return (
    <div className="App">
      <div
        className="head"
        style={{
          width: "fit-content",
          margin: "auto",
        }}
      >
        <h1
          style={{
            color: "green",
          }}
        >
          GeeksforGeeks
        </h1>
        <strong>React MUI TimelineSeparator API</strong>
      </div>
  
      <Timeline>
        <TimelineItem position="left">
          <TimelineSeparator
            sx={{
              backgroundColor: "green",
              opacity: 0.5,
            }}
          >
            <TimelineDot />
            <TimelineConnector />
          </TimelineSeparator>
          <TimelineContent>Frontend Learning Path</TimelineContent>
        </TimelineItem>
        <TimelineItem>
          <TimelineSeparator
            sx={{
              backgroundColor: "green",
              opacity: 0.5,
            }}
          >
            <TimelineDot />
            <TimelineConnector />
          </TimelineSeparator>
          <TimelineContent>HTML</TimelineContent>
        </TimelineItem>
        <TimelineItem>
          <TimelineSeparator
            sx={{
              backgroundColor: "green",
              opacity: 0.5,
            }}
          >
            <TimelineDot />
            <TimelineConnector />
          </TimelineSeparator>
          <TimelineContent>CSS</TimelineContent>
        </TimelineItem>
        <TimelineItem>
          <TimelineSeparator
            sx={{
              backgroundColor: "green",
              opacity: 0.5,
            }}
          >
            <TimelineDot />
          </TimelineSeparator>
          <TimelineContent>Javascript</TimelineContent>
        </TimelineItem>
      </Timeline>
    </div>
  );
}
  
export default App;

Producción:

 

Referencia: https://mui.com/material-ui/api/timeline-separator/