Componente de línea de tiempo de diseño de hormigas de la interfaz de usuario de ReactJS

La línea de tiempo se utiliza para mostrar una serie de información que debe ordenarse por tiempo (ascendente o descendente).

Ant Design Library tiene este componente prediseñado y también es muy fácil de integrar. Podemos usar este componente de línea de tiempo usando el siguiente enfoque fácilmente.

Sintaxis:

<Timeline>
      <Timeline.Item>
         Content of the timeline
      </Timeline.Item>
</Timeline>

Propiedad de la línea de tiempo:

• modo: Esta propiedad define la alineación de la línea de tiempo.
• pendiente: Esta propiedad establece la existencia de los últimos Nodes de publicación o su contenido.
• pendienteDot: esta propiedad establece el punto del último fantasma si pendiente es verdadero.
• reverse: Esta propiedad define que Nodes serán inversos o no.

Propiedad Timeline.Item:

• color: esta propiedad define el color del elemento de la línea de tiempo; el valor predeterminado es azul.
• punto: esta propiedad define el punto de línea de tiempo personalizado.
• etiqueta: Esta propiedad establece la etiqueta.
• position: esta propiedad define la posición de la línea de tiempo.

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 demo

• Paso 2: después de crear la carpeta de su proyecto, es decir, la demostración, muévase a ella con el siguiente comando.

  cd demo

• Paso 3: después de crear la aplicación ReactJS, instale la biblioteca antd con el siguiente comando.

  npm install antd

Estructura del proyecto:

Ejemplo: ahora escriba el siguiente código en el nombre de archivo App.js.

import { Timeline } from "antd";
import "antd/dist/antd.css";
  
function App() {
  return (
    <div className="App">
      <div style={{ padding: "100px" }}>
        <h1 style={{ marginBottom: "2rem" }}>
          Demo for Timeline
        </h1>
        /* Time Creating */
        <Timeline>
          /* Timeline elements*/
          <Timeline.Item>
            Create a services site 2015-09-01
          </Timeline.Item>
          <Timeline.Item>
            Solve initial network problems 2015-09-01
          </Timeline.Item>
          <Timeline.Item>
            Technical testing 2015-09-01
          </Timeline.Item>
          <Timeline.Item>
            Network problems being solved 2015-09-01
          </Timeline.Item>
        </Timeline>
        ,
      </div>
    </div>
  );
}
  
export default App;

Ejecución de la aplicación: Ejecute la aplicación utilizando el siguiente comando.

npm start

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

Referencia: https://ant.design/components/timeline/