element-plus/website/docs/fr-FR/timeline.md

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

<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

<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

<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é.