Chronologie

Flux d'événements vertical. Liste sémantique <ol>, l'ordre chronologique correspond à l'ordre du document.

Utilisation de base

Utilisation de base

1. 2026-09-01

   Revue de lancement
2. 2026-09-15

   Livraison de la première phase
3. 2026-09-25

   Réception en cours

<script setup lang="ts">
</script>

<template>
  <LhTimeline>
    <LhTimelineItem timestamp="2026-09-01">Revue de lancement</LhTimelineItem>
    <LhTimelineItem timestamp="2026-09-15" type="success">Livraison de la première phase</LhTimelineItem>
    <LhTimelineItem timestamp="2026-09-25" type="warning">Réception en cours</LhTimelineItem>
  </LhTimeline>
</template>

<script>
export default {}
</script>

<template>
  <LhTimeline>
    <LhTimelineItem timestamp="2026-09-01">Revue de lancement</LhTimelineItem>
    <LhTimelineItem timestamp="2026-09-15" type="success">Livraison de la première phase</LhTimelineItem>
    <LhTimelineItem timestamp="2026-09-25" type="warning">Réception en cours</LhTimelineItem>
  </LhTimeline>
</template>

Alternance gauche-droite

alternate

1. Q1

   Planification
2. Q2

   Développement
3. Q3

   Test de charge

hollow affiche le nœud sous forme de cercle creux, souvent utilisé pour les états non achevés.

Nœuds creux

1. Q1

   Non commencé
2. Q2

   En cours
3. Q3

   Terminé

<script setup lang="ts">
</script>

<template>
  <!-- Alternance gauche-droite -->
  <LhTimeline mode="alternate">
    <LhTimelineItem timestamp="Q1">Planification</LhTimelineItem>
    <LhTimelineItem timestamp="Q2">Développement</LhTimelineItem>
    <LhTimelineItem timestamp="Q3" type="danger">Test de charge</LhTimelineItem>
  </LhTimeline>
  <!-- Nœuds creux -->
  <LhTimeline>
    <LhTimelineItem timestamp="Q1" hollow>Non commencé</LhTimelineItem>
    <LhTimelineItem timestamp="Q2">En cours</LhTimelineItem>
    <LhTimelineItem timestamp="Q3" type="success">Terminé</LhTimelineItem>
  </LhTimeline>
</template>

<script>
export default {}
</script>

<template>
  <!-- Alternance gauche-droite -->
  <LhTimeline mode="alternate">
    <LhTimelineItem timestamp="Q1">Planification</LhTimelineItem>
    <LhTimelineItem timestamp="Q2">Développement</LhTimelineItem>
    <LhTimelineItem timestamp="Q3" type="danger">Test de charge</LhTimelineItem>
  </LhTimeline>
  <!-- Nœuds creux -->
  <LhTimeline>
    <LhTimelineItem timestamp="Q1" hollow>Non commencé</LhTimelineItem>
    <LhTimelineItem timestamp="Q2">En cours</LhTimelineItem>
    <LhTimelineItem timestamp="Q3" type="success">Terminé</LhTimelineItem>
  </LhTimeline>
</template>

API

LhTimeline Props

Prop	Description	Type	Valeur par défaut
mode	Mode de mise en page	"left" | "alternate"	'left'
sx	Propriétés de mise en page rapide sx	LhSxProps	—

LhTimelineItem Props

Prop	Description	Type	Valeur par défaut
timestamp	Horodatage	string	—
type	Type sémantique du nœud	'primary' | 'success' | 'warning' | 'danger'	—
hollow	Nœud creux	boolean	false
sx	Propriétés de mise en page rapide sx	LhSxProps	—

Slots : contenu default, horodatage timestamp, point personnalisé dot.

Accessibilité

• Liste sémantique <ol>, l'ordre chronologique correspond à l'ordre du document, les lecteurs d'écran annoncent les éléments dans l'ordre
• Les points des nœuds sont purement décoratifs (aria-hidden="true"), le slot de point personnalisé n'entre pas non plus dans l'arbre d'accessibilité

Définitions de types

Les structures de types TypeScript exportées par ce composant sont les suivantes (extraites automatiquement de packages/components/timeline/src/types.ts et de @lh-ui/share/core/* ; cliquez sur chaque entrée pour afficher la définition complète ; les descriptions des props se trouvent dans le tableau Props ci-dessus) :

LhTimelineItemProps

/** Props de l'élément (composant Item) */
export interface LhTimelineItemProps {
  timestamp?: string
  type?: 'primary' | 'success' | 'warning' | 'danger'
  hollow?: boolean
  /** Propriétés de mise en page rapide sx */
  sx?: LhSxProps
}

LhTimelineProps

/** Props de la chronologie */
export interface LhTimelineProps {
  /** Mode de mise en page (alternate : alternance gauche-droite) */
  mode?: LhTimelineMode
  /** Propriétés de mise en page rapide sx */
  sx?: LhSxProps
}

LhTimelineMode _{(provenant de @lh-ui/share/core/timeline)}

/** Mode de mise en page de la chronologie */
export type LhTimelineMode = 'left' | 'alternate'