Ir al contenido
English

Navegar

English

Escribe para buscar. Pulsa Escape para cerrar.

    Componentes · css

    Línea de tiempo (timeline)

    Una lista ordenada de momentos sobre un raíl: una fecha, un título y el texto que cada momento necesite. Es una <ol> con un <time> por elemento, así que el orden y las fechas están en el marcado y no solo en el dibujo. El estado lo escribe quien redacta en data-iv-state; el marcador cambia de forma además de color. Sin JavaScript.

    CSS: css/components/timeline.css (en ivolt.css). Añadido en la v0.6.

    Raíl verticalfixtures/timeline/basic.htmlAbrir sola — Raíl vertical
    <ol class="iv-timeline" style="max-width: 34rem">
  <li class="iv-timeline__item" data-iv-state="done">
    <time class="iv-timeline__time" datetime="2026-09">Phase 1–4</time>
    <div class="iv-timeline__body">
      <h3 class="iv-timeline__title">Foundations shipped</h3>
      <p class="iv-u-m-0 iv-u-text-sm">Tokens, layout, buttons, forms, dialog and the layer order, frozen in the contract.</p>
    </div>
  </li>
  <li class="iv-timeline__item" data-iv-state="done">
    <time class="iv-timeline__time" datetime="2026-09">v0.5</time>
    <div class="iv-timeline__body">
      <h3 class="iv-timeline__title">Time &amp; light</h3>
      <p class="iv-u-m-0 iv-u-text-sm">Datepicker, tooltip, popover, megamenu and the effects layer; gate green in three engines.</p>
    </div>
  </li>
  <li class="iv-timeline__item" data-iv-state="current">
    <time class="iv-timeline__time" datetime="2026-09">v0.6</time>
    <div class="iv-timeline__body">
      <h3 class="iv-timeline__title">Structure</h3>
      <p class="iv-u-m-0 iv-u-text-sm">Expressive-layer tokens, navbar, stepper, declarative toast and these content blocks.</p>
    </div>
  </li>
  <li class="iv-timeline__item" data-iv-state="upcoming">
    <time class="iv-timeline__time" datetime="2026-10">v0.7</time>
    <div class="iv-timeline__body">
      <h3 class="iv-timeline__title">Planned, not written</h3>
      <p class="iv-u-m-0 iv-u-text-sm">Animated counter and the remaining candidates of the roadmap. Nothing here is published yet.</p>
    </div>
  </li>
</ol>

<p class="iv-u-text-sm iv-u-text-muted iv-u-mt-6" style="max-width: 34rem">The states come from the real roadmap of this package (<code>docs/ROADMAP.md</code>): three moments done or in progress, one still planned. State is written by the author in <code>data-iv-state</code>; the marker shape carries it as well as the colour.</p>

    Lados alternos

    iv-timeline--alternate cuelga los elementos de un raíl central, alternando lados desde el punto de ruptura md; por debajo la lista vuelve al raíl único de la variante por defecto. Pide entradas cortas: un párrafo largo a la izquierda y uno breve a la derecha dejan la columna desigual.

    Raíl alternofixtures/timeline/alternate.htmlAbrir sola — Raíl alterno
    <ol class="iv-timeline iv-timeline--alternate" style="max-width: 44rem">
  <li class="iv-timeline__item" data-iv-state="done">
    <time class="iv-timeline__time" datetime="2026-09-13">13 Sep 2026</time>
    <div class="iv-timeline__body">
      <h3 class="iv-timeline__title">Contract frozen</h3>
      <p class="iv-u-m-0 iv-u-text-sm">Classes, tokens, attributes and events named before a line of CSS.</p>
    </div>
  </li>
  <li class="iv-timeline__item" data-iv-state="done">
    <time class="iv-timeline__time" datetime="2026-09-14">14 Sep 2026</time>
    <div class="iv-timeline__body">
      <h3 class="iv-timeline__title">Owner's visual review</h3>
      <p class="iv-u-m-0 iv-u-text-sm">Twenty-two modules polished against real screenshots, baselines regenerated.</p>
    </div>
  </li>
  <li class="iv-timeline__item" data-iv-state="current">
    <time class="iv-timeline__time" datetime="2026-09-14">Today</time>
    <div class="iv-timeline__body">
      <h3 class="iv-timeline__title">v0.6 in progress</h3>
      <p class="iv-u-m-0 iv-u-text-sm">Shared tokens for shadow, halo and tracking; content blocks land with their fixtures.</p>
    </div>
  </li>
  <li class="iv-timeline__item" data-iv-state="upcoming">
    <time class="iv-timeline__time" datetime="2026-10">Next</time>
    <div class="iv-timeline__body">
      <h3 class="iv-timeline__title">Release review</h3>
      <p class="iv-u-m-0 iv-u-text-sm">Nothing is published or deployed without explicit authorisation.</p>
    </div>
  </li>
</ol>

<p class="iv-u-text-sm iv-u-text-muted iv-u-mt-6">From the <code>md</code> breakpoint up the items hang from a central rail, alternating sides; below it the list falls back to the single rail of the basic timeline.</p>

    Raíl horizontal

    iv-timeline--horizontal coloca los elementos en columnas a lo largo de un raíl horizontal desde md, con desplazamiento y puntos de anclaje. Una región con scroll tiene que alcanzarse con el teclado, así que quien redacta sirve tabindex="0" y una etiqueta en la propia lista; el CSS le da anillo de foco.

    Raíl horizontalfixtures/timeline/horizontal.htmlAbrir sola — Raíl horizontal
    <ol class="iv-timeline iv-timeline--horizontal" tabindex="0" aria-label="Release history">
  <li class="iv-timeline__item" data-iv-state="done">
    <time class="iv-timeline__time" datetime="2026-09">v0.1</time>
    <div class="iv-timeline__body">
      <h3 class="iv-timeline__title">Blueprint</h3>
      <p class="iv-u-m-0 iv-u-text-sm">Bible, architecture and contract written first.</p>
    </div>
  </li>
  <li class="iv-timeline__item" data-iv-state="done">
    <time class="iv-timeline__time" datetime="2026-09">v0.3</time>
    <div class="iv-timeline__body">
      <h3 class="iv-timeline__title">Spectacular</h3>
      <p class="iv-u-m-0 iv-u-text-sm">Carousel, picker, surfaces and the expressive layer.</p>
    </div>
  </li>
  <li class="iv-timeline__item" data-iv-state="done">
    <time class="iv-timeline__time" datetime="2026-09">v0.5</time>
    <div class="iv-timeline__body">
      <h3 class="iv-timeline__title">Time &amp; light</h3>
      <p class="iv-u-m-0 iv-u-text-sm">Datepicker, tooltip, popover, megamenu.</p>
    </div>
  </li>
  <li class="iv-timeline__item" data-iv-state="current">
    <time class="iv-timeline__time" datetime="2026-09">v0.6</time>
    <div class="iv-timeline__body">
      <h3 class="iv-timeline__title">Structure</h3>
      <p class="iv-u-m-0 iv-u-text-sm">Navbar, stepper and content blocks.</p>
    </div>
  </li>
  <li class="iv-timeline__item" data-iv-state="upcoming">
    <time class="iv-timeline__time" datetime="2026-10">v0.7</time>
    <div class="iv-timeline__body">
      <h3 class="iv-timeline__title">Planned</h3>
      <p class="iv-u-m-0 iv-u-text-sm">Counter and the rest of the roadmap.</p>
    </div>
  </li>
</ol>

<p class="iv-u-text-sm iv-u-text-muted iv-u-mt-6">The horizontal rail scrolls with snapping. The author serves <code>tabindex="0"</code> and a label on the list so the scroll region is reachable from the keyboard.</p>

    Anatomía

    ClaseElementoFunción
    iv-timeline<ol>El raíl. Ordenada, porque una línea de tiempo tiene dirección.
    iv-timeline__item<li>Un momento; dibuja su tramo de línea y su marcador.
    iv-timeline__time<time datetime>La fecha, en versalitas monoespaciadas. Un datetime legible por máquina la convierte en algo más que una etiqueta.
    iv-timeline__body<div>Todo lo demás: título, texto, enlaces.
    iv-timeline__titleencabezadoNombre del momento; elige el nivel que pida la página.
    iv-timeline--compactmodificadorRitmo más apretado para muchas entradas breves.

    Estados

    data-iv-state en un elemento admite done (marcador relleno), current (relleno con el halo de foco común y un pulso lento) y upcoming (marcador hueco y texto atenuado). Un elemento sin el atributo se dibuja como hecho. El pulso se detiene con prefers-reduced-motion, y en modo de colores forzados los marcadores conservan su contorno para que los tres estados sigan distinguiéndose sin color.

    Tokens y locales

    LocalPor defectoQué mueve
    --iv-timeline-linevar(--iv-color-border)Color del raíl.
    --iv-timeline-markervar(--iv-color-primary)Color de los marcadores.
    --iv-timeline-size0.75remDiámetro de un marcador.
    --iv-timeline-rail1.25remDistancia del raíl al texto.
    --iv-timeline-gapvar(--iv-space-6)Separación entre elementos.
    --iv-timeline-top0.2remAjuste vertical que alinea el marcador con la primera línea de su texto.

    El __time usa --iv-tracking-caps, uno de los tokens de la capa expresiva añadidos en la v0.6 (ver tokens y temas), para que sus versalitas casen con las cabeceras de tabla y las leyendas de fieldset.

    Accesibilidad y teclado

    El orden de la lista es la cronología, así que nada depende de leer el raíl. Cada fecha es un <time> con valor legible por máquina. El estado llega al dibujo por la forma del marcador y por el texto, nunca solo por el color: si un estado importa a quien lee, dilo también con palabras en el cuerpo. La variante horizontal es una región con scroll: sírvela con tabindex="0" y un aria-label para poder desplazarla con el teclado, como hace su fixture.

    Sin JavaScript

    No hay JavaScript. No se inicializa nada, no se registra nada y nada cambia después de cargar la página: la línea de tiempo es una lista con un raíl dibujado por pseudoelementos.

    Errores frecuentes

    • Una <ul> en lugar de una <ol>. El orden es justamente lo importante.
    • Una fecha como texto suelto. <time datetime="2026-09"> no cuesta nada y significa algo.
    • Marcar el momento actual solo con color. La forma del marcador y el texto también deberían decirlo.
    • Párrafos largos en la variante alterna: las dos columnas dejan de casar y el raíl pierde su ritmo.