mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-14 17:31:02 +08:00
c2b6c30f92
* feat: timeline add hollow prop * feat: update * feat: format Co-authored-by: kooriookami <18114643032@163.com>
167 lines
4.6 KiB
Markdown
167 lines
4.6 KiB
Markdown
## 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é. |
|