Quiero tener algo de texto en ambos lados de la línea de tiempo de la biblioteca de AntDesign .
Pero tampoco quiero que esté centrado en el medio de la página. Estoy usando este código como se ve a continuación:
<Timeline mode="left"> <Timeline.Item label="Date 1">Test</Timeline.Item> <Timeline.Item label="Date 2">Some information</Timeline.Item> <Timeline.Item label="Date 3">More information</Timeline.Item> </Timeline>Ejemplo de zona de juegos: https://codesandbox.io/s/select-with-search-field-antd-4-16-12-forked-n4c5i?file=/index.js
Estoy abierto a cualquier solución. Algo de CSS sería genial, pero no quiero especificar el ancho de mi línea de tiempo, ya que debería usar el tamaño que sea necesario.
Parece que no es tan fácil, porque tiene estilos codificados para esto. Y este es un problema conocido (lamentablemente) https://github.com/ant-design/ant-design/issues/26485
Por el momento, puede piratear esto con su propio css y anular los estilos antd.
import React from "react"; import ReactDOM from "react-dom"; import "antd/dist/antd.css"; import { Timeline, Typography } from "antd"; import "./index.css"; ReactDOM.render( <div> <Typography.Title level={1}>Header</Typography.Title> <Typography.Paragraph> Some information, I somehow want the timeline to be exactly below, and not centered in the middle of the screen. I was to do this without specifing a specific width pixel size. </Typography.Paragraph> <div className="timeline_container"> <Timeline mode="left"> <Timeline.Item label="Date 1">Test</Timeline.Item> <Timeline.Item label="Date 2">Some information</Timeline.Item> <Timeline.Item label="Date 3"> More information. Long text... </Timeline.Item> </Timeline> </div> </div>, document.getElementById("container") ); div.timeline_container div.ant-timeline-item-label { width: calc(10% - 12px) !important; } div.timeline_container div.ant-timeline-item-content { left: calc(11% - 4px) !important; width: calc(89% - 4px) !important; } div.timeline_container div.ant-timeline-item-tail, div.ant-timeline-item-head { left: 11% !important; }DEMOSTRACIÓN: https://codesandbox.io/s/select-with-search-field-antd-4-16-12-forked-8ynww?file=/index.js