Raccourci clavier : Ctrl + K
Commencer

Frise chronologique

VTimeline liste des événements datés dans l’ordre. Chaque VTimelineItem a un marqueur sur la ligne, une date, un titre et son propre contenu.

Utilisation

vue

  1. Order shipped

    The parcel left our warehouse in Lyon.

  2. Payment confirmed

    Paid by card ending in 4242.

  3. Order placed

    Three items, delivered to Paris. 
<script setup lang="ts">
import { VTimeline, VTimelineItem } from 'vectis-ui'
</script>

<template>
  <VTimeline aria-label="Order history">
    <VTimelineItem datetime="2026-10-06T09:15" title="Order shipped">
      The parcel left our warehouse in Lyon.
    </VTimelineItem>
    <VTimelineItem datetime="2026-10-05T16:40" title="Payment confirmed">
      Paid by card ending in 4242.
    </VTimelineItem>
    <VTimelineItem datetime="2026-10-05T16:32" title="Order placed">
      Three items, delivered to Paris.
    </VTimelineItem>
  </VTimeline>
</template>

Exemples

Dates en colonne

layout="split" place les dates dans une colonne de l’autre côté de la ligne, aussi large que la date la plus longue, jusqu’au tiers de la largeur. Sous 30rem, la frise revient à stacked.

vue

  1. Order shipped

    The parcel left our warehouse in Lyon.

  2. Payment confirmed

    Paid by card ending in 4242.

  3. Order placed

    Three items, delivered to Paris. 
<script setup lang="ts">
import { VTimeline, VTimelineItem } from 'vectis-ui'
</script>

<template>
  <VTimeline layout="split" aria-label="Order history">
    <VTimelineItem datetime="2026-10-06T09:15" title="Order shipped">
      The parcel left our warehouse in Lyon.
    </VTimelineItem>
    <VTimelineItem datetime="2026-10-05T16:40" title="Payment confirmed">
      Paid by card ending in 4242.
    </VTimelineItem>
    <VTimelineItem datetime="2026-10-05T16:32" title="Order placed">
      Three items, delivered to Paris.
    </VTimelineItem>
  </VTimeline>
</template>

Côtés alternés

layout="alternate" envoie un événement sur deux de l’autre côté de la ligne, face à sa date, et revient à stacked sous 36rem. Une année ou un mois s’écrit à cette précision. Les deux dispositions côte à côte prennent leur largeur de leur parent : dans une rangée flex, donnez à la frise une base propre.

vue

  1. Project started

    A handful of components for an internal tool.

  2. First public preview

    Published on npm with twelve components.

  3. Version 1.0

    A stable API, documented in English and French.

  4. Version 2.0

    Design tokens, dark theme and nineteen new components. 
<script setup lang="ts">
import { VTimeline, VTimelineItem } from 'vectis-ui'
</script>

<template>
  <VTimeline layout="alternate" :heading-level="3">
    <VTimelineItem datetime="2019" title="Project started">
      A handful of components for an internal tool.
    </VTimelineItem>
    <VTimelineItem datetime="2021-03" title="First public preview">
      Published on npm with twelve components.
    </VTimelineItem>
    <VTimelineItem datetime="2024-09" title="Version 1.0">
      A stable API, documented in English and French.
    </VTimelineItem>
    <VTimelineItem datetime="2026-10" title="Version 2.0">
      Design tokens, dark theme and nineteen new components.
    </VTimelineItem>
  </VTimeline>
</template>

Horizontale

orientation="horizontal" dispose les événements en largeur, marqueurs, dates et titres alignés. Quand ils ne tiennent plus, la liste défile et devient un arrêt de tabulation pour qu’on puisse la faire défiler au clavier.

vue

  1. Research

  2. Design

  3. Build

  4. Beta

  5. Launch

<script setup lang="ts">
import { VTimeline, VTimelineItem } from 'vectis-ui'
import { code } from 'vectis-ui/icons'
</script>

<template>
  <VTimeline orientation="horizontal" aria-label="Roadmap">
    <VTimelineItem datetime="2026-01" title="Research" tone="neutral" />
    <VTimelineItem datetime="2026-03" title="Design" tone="neutral" />
    <VTimelineItem datetime="2026-06" title="Build" :icon="code" />
    <VTimelineItem datetime="2026-09" title="Beta" />
    <VTimelineItem datetime="2026-11" title="Launch" />
  </VTimeline>
</template>

Marqueurs

tone colore le marqueur et icon le dessine dans une pastille ronde. Le slot marker le remplace, par exemple par un avatar. Les marqueurs sont masqués aux lecteurs d’écran : dites dans le titre ce que signifie le ton.

vue

  1. Deployed to production

    Release 2.0.1 is live.

  2. Tests retried

    Two browser tests passed on the second attempt.

  3. Build failed

    Type error in the date input.

  4. Camille approved the changes

  5. Commit pushed

<script setup lang="ts">
import { VAvatar, VTimeline, VTimelineItem } from 'vectis-ui'
import { check_circle, code, error } from 'vectis-ui/icons'
</script>

<template>
  <VTimeline aria-label="Deployments">
    <VTimelineItem
      datetime="2026-10-06T10:02"
      title="Deployed to production"
      tone="success"
      :icon="check_circle"
    >
      Release 2.0.1 is live.
    </VTimelineItem>
    <VTimelineItem datetime="2026-10-06T09:48" title="Tests retried" tone="warning">
      Two browser tests passed on the second attempt.
    </VTimelineItem>
    <VTimelineItem datetime="2026-10-06T09:30" title="Build failed" tone="danger" :icon="error">
      Type error in the date input.
    </VTimelineItem>
    <VTimelineItem datetime="2026-10-06T09:20" title="Camille approved the changes">
      <template #marker>
        <VAvatar name="Camille Martin" size="sm" />
      </template>
    </VTimelineItem>
    <VTimelineItem datetime="2026-10-06T09:12" title="Commit pushed" tone="neutral" :icon="code" />
  </VTimeline>
</template>

Dates

timeText affiche une date relative tandis que <time> garde la date exacte. locale et formatOptions changent l’écriture des jours et des instants. Sur une page rendue côté serveur, définissez timeZone dans formatOptions pour les dates qui portent un décalage.

vue

  1. Camille commented

  2. Sam approved

  3. Alex opened it

  1. Kick-off

  2. Design review

  3. Release

<script setup lang="ts">
import { VTimeline, VTimelineItem } from 'vectis-ui'
</script>

<template>
  <div class="dates">
    <VTimeline size="sm" aria-label="Activity">
      <VTimelineItem datetime="2026-10-06T11:58" time-text="Just now" title="Camille commented" />
      <VTimelineItem datetime="2026-10-06T10:00" time-text="2 hours ago" title="Sam approved" />
      <VTimelineItem datetime="2026-10-05T17:20" time-text="Yesterday" title="Alex opened it" />
    </VTimeline>
    <VTimeline
      size="sm"
      locale="fr-FR"
      :format-options="{ weekday: 'long', day: 'numeric', month: 'long' }"
      aria-label="Planning"
    >
      <VTimelineItem datetime="2026-10-12" title="Kick-off" />
      <VTimelineItem datetime="2026-10-14" title="Design review" />
      <VTimelineItem datetime="2026-10-19" title="Release" />
    </VTimeline>
  </div>
</template>

<style scoped>
.dates {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vectis-space-8);
}

.dates > * {
  flex: 1 1 14rem;
}
</style>

API

Props

VTimeline
PropTypeDéfaut
orientationTimelineOrientation'vertical' | 'horizontal''vertical'
Événements de haut en bas ou de gauche à droite.
layoutTimelineLayout'stacked' | 'split' | 'alternate''stacked'
Place des dates d’une frise verticale : au-dessus des titres, en colonne de l’autre côté de la ligne, ou face au contenu sur des côtés alternés.
sizeTimelineSize'sm' | 'md''md'
Densité des espacements, des marqueurs et du texte du contenu.
headingLevelTimelineHeadingLevel1 | 2 | 3 | 4 | 5 | 6aucune
Rend les titres en h1 à h6. Sans elle, ce sont des paragraphes.
localestringaucune
Locale d’écriture des dates. Par défaut, celle du design system.
formatOptionsIntl.DateTimeFormatOptionsaucune
Options Intl.DateTimeFormat des jours et des instants. Les années et les mois gardent leur format.
VTimelineItem
PropTypeDéfaut
datetimestringaucune
Année, mois, jour ou instant ISO, écrit dans la locale à l’intérieur d’un <time>.
timeTextstringaucune
Texte visible qui remplace la date écrite.
titlestringaucune
Ce qui s’est passé. Remplacé par le slot title.
toneTimelineItemTone'neutral' | 'accent' | 'danger' | 'success' | 'warning''accent'
Couleur du marqueur.
iconIconSourceaucune
Icône dessinée dans une pastille ronde à la place du point.

Slots

VTimeline
SlotType
default{}
Enfants VTimelineItem.
VTimelineItem
SlotType
default{}
Détails de l’événement.
title{}
Titre avec balisage.
marker{}
Remplace le point ou la pastille. C’est une décoration.

Types

Types utilisés dans les tables d’API. Importez les types exportés depuis vectis-ui.

export interface BuiltinIcon {
  name: string
  paths: readonly [string] | readonly [string, string]
}
export type IconRender =
  | { path: string; viewBox?: string }
  | { component: Component; props?: Record<string, unknown> }
  | { src: string }
  | { text: string; class?: string }
  | { class: string }
export type IconSource = string | BuiltinIcon | IconRender

Variables CSS

TokenValeur
--vectis-control-size-timeline-dot-sm0.5rem
--vectis-control-size-timeline-dot-md0.625rem
--vectis-control-size-timeline-icon-sm1.5rem
--vectis-control-size-timeline-icon-md2rem
--vectis-control-size-timeline-item-min12rem