Sergio Pereira
ESEN
LinkedInManfred
Idioma
ESEN
Apariencia
Display

Timeline

Línea de tiempo con el punto centrado en títulos de cualquier alto

Preview

  1. 01

    Hito 1

    Descripción del hito.

  2. 02

    Hito 2

    Descripción del hito.

  3. 03

    Hito 3

    Descripción del hito.

size
layout
current

Code

import css from "./Timeline.module.css";

type Size = "sm" | "md";
type Layout = "stacked" | "axis";

interface ResponsiveSize {
  base: Size;
  mobile?: Size;
  tablet?: Size;
  desktop?: Size;
  wide?: Size;
}

interface ResponsiveLayout {
  base: Layout;
  mobile?: Layout;
  tablet?: Layout;
  desktop?: Layout;
  wide?: Layout;
}

interface TimelineProps {
  size: Size | ResponsiveSize;
  layout: Layout | ResponsiveLayout;
  children: React.ReactNode;
}

function getResponsiveClasses(
  value: Size | Layout | ResponsiveSize | ResponsiveLayout,
): string {
  if (typeof value === "string") {
    return css[value];
  }

  const classes = [css[`${value.base}_base`]];

  if (value.mobile) classes.push(css[`${value.mobile}_mobile`]);
  if (value.tablet) classes.push(css[`${value.tablet}_tablet`]);
  if (value.desktop) classes.push(css[`${value.desktop}_desktop`]);
  if (value.wide) classes.push(css[`${value.wide}_wide`]);

  return classes.join(" ");
}

export default function Timeline({
  size,
  layout,
  children,
}: TimelineProps) {
  return (
    <ol
      className={`
        ${css.timeline}
        ${getResponsiveClasses(size)}
        ${getResponsiveClasses(layout)}
      `}
      role="list"
    >
      {children}
    </ol>
  );
}

Props

PropTypeRequiredDescription
size"sm" | "md" | ResponsiveSizerequiredTamaño del punto, del halo y de los huecos entre hitos. Fijo o responsive.
layout"stacked" | "axis" | ResponsiveLayoutrequiredApilada (año encima, carril a la izquierda) o en eje (carril en el centro, año a un lado y contenido al otro). Fija o responsive.
childrenReact.ReactNoderequiredLos hitos, un <TimelineItem> por hito.
TimelineItem.yearReact.ReactNoderequiredFecha o etiqueta del hito; en eje va al otro lado del carril.
TimelineItem.titleReact.ReactNoderequiredTítulo del hito. El punto se centra en él, mida lo que mida.
TimelineItem.currentboolean—Marca el hito actual: punto lleno con halo (aria-current).
TimelineItem.childrenReact.ReactNoderequiredContenido bajo el título.