Chronologie

Afficher les événements dans l’ordre chronologique avec des dispositions alternées ou verticales.

Importation

import { Timeline } from 'asterui'

Exemples

Chronologie de base

Chronologie simple avec contenu alterné.

1984
First Macintosh computer
iMac
1998

import { Timeline } from 'asterui'
import { CheckCircleIcon } from '@aster-ui/icons/solid'

function App() {
  return (
      <Timeline>
        <Timeline.Item start="1984" icon={<CheckCircleIcon />} end="First Macintosh computer" endBox />
        <Timeline.Item start="iMac" icon={<CheckCircleIcon />} end="1998" startBox />
      </Timeline>
    )
}

export default App

Chronologie verticale

Empiler les éléments verticalement.

Apple Watch
2015
2015
2017
iPhone X
Apple Silicon M1
2020
2020

import { Timeline } from 'asterui'
import { CheckCircleIcon } from '@aster-ui/icons/solid'

function App() {
  return (
      <Timeline vertical>
        <Timeline.Item start="2015" icon={<CheckCircleIcon className="text-primary" />} end="Apple Watch" endBox />
        <Timeline.Item start="2017" icon={<CheckCircleIcon className="text-primary" />} end="iPhone X" endBox />
        <Timeline.Item start="2020" icon={<CheckCircleIcon className="text-primary" />} end="Apple Silicon M1" endBox />
      </Timeline>
    )
}

export default App

Chronologie horizontale

Afficher les éléments horizontalement.

Step 1
Planning
Step 2
Development
Step 3
Testing
Step 4
Launch

import { Timeline } from 'asterui'
import { CheckCircleIcon, ClockIcon } from '@aster-ui/icons/solid'

function App() {
  return (
      <Timeline horizontal>
        <Timeline.Item start="Step 1" icon={<CheckCircleIcon />} end="Planning" endBox />
        <Timeline.Item start="Step 2" icon={<CheckCircleIcon />} end="Development" endBox />
        <Timeline.Item start="Step 3" icon={<ClockIcon />} end="Testing" endBox />
        <Timeline.Item start="Step 4" icon={<ClockIcon />} end="Launch" endBox />
      </Timeline>
    )
}

export default App

Chronologie compacte

Tout le contenu d'un côté.

1984
First Macintosh computer
1998
iMac

import { Timeline } from 'asterui'
import { CheckCircleIcon } from '@aster-ui/icons/solid'

function App() {
  return (
      <Timeline vertical compact>
        <Timeline.Item
          icon={<CheckCircleIcon />}
          end={
            <div>
              <time>1984</time>
              <div className="text-lg font-black">First Macintosh computer</div>
            </div>
          }
          endBox
        />
        <Timeline.Item
          icon={<CheckCircleIcon />}
          end={
            <div>
              <time>1998</time>
              <div className="text-lg font-black">iMac</div>
            </div>
          }
          endBox
        />
      </Timeline>
    )
}

export default App

Icône alignée

Aligner les icônes au début au lieu du centre.

Project Started
2023
2023
2024
Beta Release
Public Launch
2025
2025

import { Timeline } from 'asterui'
import { CheckCircleIcon, ClockIcon } from '@aster-ui/icons/solid'

function App() {
  return (
      <Timeline vertical snapIcon>
        <Timeline.Item start="2023" icon={<CheckCircleIcon />} end="Project Started" endBox />
        <Timeline.Item start="2024" icon={<CheckCircleIcon />} end="Beta Release" endBox />
        <Timeline.Item start="2025" icon={<ClockIcon />} end="Public Launch" endBox />
      </Timeline>
    )
}

export default App

Couleurs

Appliquer différentes couleurs aux éléments de la chronologie.

Task 1
Completed
Completed
In Progress
Task 2
Task 3
Warning
Warning
Error
Task 4

import { Timeline } from 'asterui'
import { CheckCircleIcon, ClockIcon, ExclamationCircleIcon } from '@aster-ui/icons/solid'

function App() {
  return (
      <Timeline vertical>
        <Timeline.Item start="Completed" icon={<CheckCircleIcon />} end="Task 1" endBox color="success" />
        <Timeline.Item start="In Progress" icon={<ClockIcon />} end="Task 2" endBox color="info" />
        <Timeline.Item start="Warning" icon={<ExclamationCircleIcon />} end="Task 3" endBox color="warning" />
        <Timeline.Item start="Error" icon={<ExclamationCircleIcon />} end="Task 4" endBox color="error" />
      </Timeline>
    )
}

export default App

Mode : Début

Tous les éléments alignés au début.

2020
Event One
2021
Event Two
2022
Event Three

import { Timeline } from 'asterui'
import { CheckCircleIcon } from '@aster-ui/icons/solid'

function App() {
  return (
      <Timeline vertical mode="start">
        <Timeline.Item start="2020" icon={<CheckCircleIcon />} end="Event One" endBox />
        <Timeline.Item start="2021" icon={<CheckCircleIcon />} end="Event Two" endBox />
        <Timeline.Item start="2022" icon={<CheckCircleIcon />} end="Event Three" endBox />
      </Timeline>
    )
}

export default App

Mode : Fin

Tous les éléments alignés à la fin.

Event One
2020
2020
Event Two
2021
2021
Event Three
2022
2022

import { Timeline } from 'asterui'
import { CheckCircleIcon } from '@aster-ui/icons/solid'

function App() {
  return (
      <Timeline vertical mode="end">
        <Timeline.Item start="2020" icon={<CheckCircleIcon />} end="Event One" endBox />
        <Timeline.Item start="2021" icon={<CheckCircleIcon />} end="Event Two" endBox />
        <Timeline.Item start="2022" icon={<CheckCircleIcon />} end="Event Three" endBox />
      </Timeline>
    )
}

export default App

État en attente

Afficher une activité en cours à la fin.

Meeting started
9:00 AM
9:00 AM
9:30 AM
Presentation complete
Q&A session
10:00 AM
10:00 AM
Loading
Recording in progress...

import { Timeline } from 'asterui'
import { CheckCircleIcon } from '@aster-ui/icons/solid'

function App() {
  return (
      <Timeline vertical pending="Recording in progress...">
        <Timeline.Item start="9:00 AM" icon={<CheckCircleIcon />} end="Meeting started" endBox color="success" />
        <Timeline.Item start="9:30 AM" icon={<CheckCircleIcon />} end="Presentation complete" endBox color="success" />
        <Timeline.Item start="10:00 AM" icon={<CheckCircleIcon />} end="Q&A session" endBox color="success" />
      </Timeline>
    )
}

export default App

État de chargement

Afficher un spinner de chargement sur des éléments individuels.

Complete
Step 1
Step 1
Step 2
Loading
Processing...
Pending
Step 3
Step 3

import { Timeline } from 'asterui'
import { CheckCircleIcon, ClockIcon } from '@aster-ui/icons/solid'

function App() {
  return (
      <Timeline vertical>
        <Timeline.Item start="Step 1" icon={<CheckCircleIcon />} end="Complete" endBox color="success" />
        <Timeline.Item start="Step 2" loading end="Processing..." endBox />
        <Timeline.Item start="Step 3" icon={<ClockIcon />} end="Pending" endBox />
      </Timeline>
    )
}

export default App

Ordre inversé

Inverser l'ordre des éléments de la chronologie.

First Event
1st
1st
2nd
Second Event
Third Event
3rd
3rd

import { Timeline, Button } from 'asterui'
import { CheckCircleIcon } from '@aster-ui/icons/solid'
import { useState } from 'react'

function App() {
  const [reversed, setReversed] = useState(false);
  
  return (
      <div className="space-y-4">
        <Button size="sm" onClick={() => setReversed(!reversed)}>
          {reversed ? 'Normal Order' : 'Reverse Order'}
        </Button>
        <Timeline vertical reverse={reversed}>
          <Timeline.Item start="1st" icon={<CheckCircleIcon />} end="First Event" endBox />
          <Timeline.Item start="2nd" icon={<CheckCircleIcon />} end="Second Event" endBox />
          <Timeline.Item start="3rd" icon={<CheckCircleIcon />} end="Third Event" endBox />
        </Timeline>
      </div>
    )
}

export default App

API déclarative

Utiliser la propriété items pour des chronologies pilotées par les données.

Company Founded
2020
2020
2021
Series A Funding
Global Expansion
2022
2022
2023
IPO

import { Timeline } from 'asterui'
import { CheckCircleIcon } from '@aster-ui/icons/solid'

function App() {
  const items = [
    { key: '1', start: '2020', end: 'Company Founded', endBox: true, icon: <CheckCircleIcon />, color: 'primary' },
    { key: '2', start: '2021', end: 'Series A Funding', endBox: true, icon: <CheckCircleIcon />, color: 'success' },
    { key: '3', start: '2022', end: 'Global Expansion', endBox: true, icon: <CheckCircleIcon />, color: 'info' },
    { key: '4', start: '2023', end: 'IPO', endBox: true, icon: <CheckCircleIcon />, color: 'warning' },
  ];
  
  return (
      <Timeline vertical items={items} />
    )
}

export default App

API

`Timeline`

Propriété	Description	Type	Défaut
`children`	Éléments de chronologie (modèle composé)	`React.ReactNode`	`-`
`items`	Éléments de chronologie (API déclarative)	`TimelineItemConfig[]`	`-`
`vertical`	Orientation de disposition verticale	`boolean`	`false`
`horizontal`	Disposition horizontale (par défaut)	`boolean`	`false`
`compact`	Tous les éléments d’un côté	`boolean`	`false`
`snapIcon`	Aligner l’icône au début au lieu du centre	`boolean`	`false`
`mode`	Disposition de distribution des éléments	`'start' \| 'alternate' \| 'end'`	`'alternate'`
`reverse`	Inverser l’ordre des éléments	`boolean`	`false`
`pending`	Afficher l’indicateur en attente/chargement à la fin	`React.ReactNode`	`-`
`pendingIcon`	Icône personnalisée pour l’élément en attente	`React.ReactNode`	`-`
`data-testid`	ID de test pour le composant	`string`	`'timeline'`
`aria-label`	Label accessible pour la chronologie	`string`	`-`
`className`	Classes CSS supplémentaires	`string`	`-`

`Timeline.Item`

Propriété	Description	Type	Défaut
`start`	Contenu à la position de début (gauche/haut)	`React.ReactNode`	`-`
`end`	Contenu à la position de fin (droite/bas)	`React.ReactNode`	`-`
`icon`	Icône ou marqueur central	`React.ReactNode`	`-`
`startBox`	Envelopper le contenu de début dans timeline-box	`boolean`	`false`
`endBox`	Envelopper le contenu de fin dans timeline-box	`boolean`	`false`
`color`	Couleur du point/connecteur de chronologie	`'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'error' \| 'neutral'`	`-`
`loading`	Afficher un spinner de chargement au lieu de l’icône	`boolean`	`false`
`data-testid`	ID de test pour cet élément	`string`	`-`
`className`	Classes CSS supplémentaires	`string`	`-`

`TimelineItemConfig`

Propriété	Description	Type	Défaut
`key`	Clé unique pour l’élément	`React.Key`	`-`
`start`	Contenu à la position de début	`React.ReactNode`	`-`
`end`	Contenu à la position de fin	`React.ReactNode`	`-`
`icon`	Icône ou marqueur central	`React.ReactNode`	`-`
`startBox`	Envelopper le contenu de début dans timeline-box	`boolean`	`false`
`endBox`	Envelopper le contenu de fin dans timeline-box	`boolean`	`false`
`color`	Couleur du point/connecteur de chronologie	`TimelineColor`	`-`
`loading`	Afficher un spinner de chargement	`boolean`	`false`
`className`	Classes CSS supplémentaires	`string`	`-`

Accessibilité

Utilise une structure de liste sémantique (role="list") pour les lecteurs d’écran
Les éléments de chronologie sont annoncés dans l’ordre
Supporte aria-label pour décrire l’objectif de la chronologie
Les connecteurs sont décoratifs et cachés de la technologie d’assistance
Les états de chargement incluent des indicateurs de spinner visuels