## Timeline

Affiche une suite d'évènements dans un ordre chronologique.

### Usage

La timeline peut être divisée en plusieurs activités. Les timestamps sont des caractéristiques importantes qui les distinguent des autres composants. Notez la différence avec Steps.

:::demo

```html
<div class="block">
  <el-timeline>
    <el-timeline-item
      v-for="(activity, index) in activities"
      :key="index"
      :timestamp="activity.timestamp"
    >
      {{activity.content}}
    </el-timeline-item>
  </el-timeline>
</div>

<script>
  export default {
    data() {
      return {
        activities: [
          {
            content: "Début de l'évènement",
            timestamp: '2018-04-15',
          },
          {
            content: 'Approuvé',
            timestamp: '2018-04-13',
          },
          {
            content: 'Succès',
            timestamp: '2018-04-11',
          },
        ],
      }
    },
  }
</script>
```

:::

### Noeud personnalisé

Vous pouvez personnaliser la taille, la couleur et les icônes de chaque Noeud.

:::demo

```html
<div class="block">
  <el-timeline>
    <el-timeline-item
      v-for="(activity, index) in activities"
      :key="index"
      :icon="activity.icon"
      :type="activity.type"
      :color="activity.color"
      :size="activity.size"
      :hollow="activity.hollow"
      :timestamp="activity.timestamp"
    >
      {{activity.content}}
    </el-timeline-item>
  </el-timeline>
</div>

<script>
  export default {
    data() {
      return {
        activities: [
          {
            content: 'Icône',
            timestamp: '2018-04-12 20:46',
            size: 'large',
            type: 'primary',
            icon: 'el-icon-more',
          },
          {
            content: 'Couleur',
            timestamp: '2018-04-03 20:46',
            color: '#0bbd87',
          },
          {
            content: 'Taille',
            timestamp: '2018-04-03 20:46',
            size: 'large',
          },
          {
            content: 'Custom hollow',
            timestamp: '2018-04-03 20:46',
            type: 'primary',
            hollow: true,
          },
          {
            content: 'Défaut',
            timestamp: '2018-04-03 20:46',
          },
        ],
      }
    },
  }
</script>
```

:::

### Timestamp personnalisé

Le timestamp peut être placé au-dessus du contenu lorsque celui-ci est trop haut.

:::demo

```html
<div class="block">
  <el-timeline>
    <el-timeline-item timestamp="2018/4/12" placement="top">
      <el-card>
        <h4>Mise à jour du template GitHub</h4>
        <p>Commit de Tom le 2018/4/12 20:46</p>
      </el-card>
    </el-timeline-item>
    <el-timeline-item timestamp="2018/4/3" placement="top">
      <el-card>
        <h4>Mise à jour du template GitHub</h4>
        <p>Commit de Tom le 2018/4/3 20:46</p>
      </el-card>
    </el-timeline-item>
    <el-timeline-item timestamp="2018/4/2" placement="top">
      <el-card>
        <h4>Mise à jour du template GitHub</h4>
        <p>Commit de Tom le 2018/4/2 20:46</p>
      </el-card>
    </el-timeline-item>
  </el-timeline>
</div>
```

:::

### Attribut de Timeline-item

| Attribut       | Description                        | Type    | Valeurs acceptées                           | Défaut |
| -------------- | ---------------------------------- | ------- | ------------------------------------------- | ------ |
| timestamp      | Le contenu du timestamp.           | string  | —                                           | —      |
| hide-timestamp | Si le timestamp doit être affiché. | boolean | —                                           | false  |
| placement      | La position du timestamp.          | string  | top / bottom                                | bottom |
| type           | Le type de noeud.                  | string  | primary / success / warning / danger / info | —      |
| color          | La couleur de fond du noeud.       | string  | hsl / hsv / hex / rgb                       | —      |
| size           | La taille du noeud                 | string  | normal / large                              | normal |
| icon           | Le nom de classe de l'icône.       | string  | —                                           | —      |
| hollow         | icon is hollow                     | boolean | —                                           | false  |

### Slots de Timeline-Item

| Nom | Description                                 |
| --- | ------------------------------------------- |
| —   | Contenu personnalisé pour le timeline-item. |
| dot | Noeud personnalisé.                         |