## Steps

Permet de guider l'utilisateur dans l'accomplissement de toutes les taches d'un processus. Les étapes peuvent être créées de manière à refléter le scénario en question et leur nombre ne peut être inférieur à 2.

### Usage

Voici une barre d'étapes basique.

:::demo Réglez l'attribut `active` avec une variable `Number`, qui indique l'index des étapes et commence à 0. L'attribut `space` permet de déterminer si l'espace entre les étapes doit être fixe à l'aide d'un `Number`. L'unité de `space` est `px`. Si cet attribut est absent, la barre sera responsive. L'attribut `finish-status` change le statut d'accomplissement des étapes.

```html
<el-steps :active="active" finish-status="success">
  <el-step title="Étape 1"></el-step>
  <el-step title="Étape 2"></el-step>
  <el-step title="Étape 3"></el-step>
</el-steps>

<el-button style="margin-top: 12px;" @click="next">Prochaine étape</el-button>

<script>
  export default {
    data() {
      return {
        active: 0
      };
    },

    methods: {
      next() {
        if (this.active++ > 2) this.active = 0;
      }
    }
  }
</script>
```
:::

### Barre avec statut

Vous pouvez afficher le statut de chaque étape.

:::demo Utilisez `title` pour définir le nom de l'étape, ou écrasez cet attribut en utilisant un `slot`. La liste complète des slots se trouve en fin de page.

```html
<el-steps :space="200" :active="1" finish-status="success">
  <el-step title="Terminé"></el-step>
  <el-step title="En cours"></el-step>
  <el-step title="Étape 3"></el-step>
</el-steps>
```
:::

### Barre avec description

Vous pouvez ajouter une description pour chaque étape.

:::demo
```html
<el-steps :active="1">
  <el-step title="Étape 1" description="Une description"></el-step>
  <el-step title="Étape 2" description="Une description"></el-step>
  <el-step title="Étape 3" description="Une description"></el-step>
</el-steps>
```
:::

### Centrer

Le titre et la description peuvent être centrés.

:::demo
```html
<el-steps :active="2" align-center>
  <el-step title="Étape 1" description="Une description"></el-step>
  <el-step title="Étape 2" description="Une description"></el-step>
  <el-step title="Étape 3" description="Une description"></el-step>
  <el-step title="Étape 4" description="Une description"></el-step>
</el-steps>
```
:::

### Barre avec icône

Une grande variété d'icônes peut être utilisée dans la barre d'étapes.

:::demo L'icône est ajoutée en utilisant `icon`. Les types d'icônes possibles sont référencés dans la documentation du composant Icon. De plus, vous pouvez utilisé une icône personnalisée en utilisant un `slot`.

```html
<el-steps :active="1">
  <el-step title="Étape 1" icon="el-icon-edit"></el-step>
  <el-step title="Étape 2" icon="el-icon-upload"></el-step>
  <el-step title="Étape 3" icon="el-icon-picture"></el-step>
</el-steps>
```
:::

### Barre verticale

La barre d'étape peut être affichée de manière verticale.

:::demo Mettez simplement l'attribut `direction` à ` vertical` dans l'élément `el-steps`.

```html
<div style="height: 300px;">
  <el-steps direction="vertical" :active="1">
    <el-step title="Étape 1"></el-step>
    <el-step title="Étape 2"></el-step>
    <el-step title="Étape 3"></el-step>
  </el-steps>
</div>
```
:::

### Barre d'étapes simple

La barre peut être simplifiée de manière à ce que `align-center`, `description`, `direction` et `space` soient ignorées.

:::demo
```html

<el-steps :space="200" :active="1" simple>
  <el-step title="Étape 1" icon="el-icon-edit"></el-step>
  <el-step title="Étape 2" icon="el-icon-upload"></el-step>
  <el-step title="Étape 3" icon="el-icon-picture"></el-step>
</el-steps>

<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
  <el-step title="Étape 1" ></el-step>
  <el-step title="Étape 2" ></el-step>
  <el-step title="Étape 3" ></el-step>
</el-steps>
```
:::

### Attributs de la barre

| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
|---------- |-------- |---------- |-------------  |-------- |
| space | L'espace entre chaque étape, sera responsive si omis. Supporte les pourcentages. | number / string | — | — |
| direction | L'orientation de la barre. | string | vertical/horizontal | horizontal |
| active | L'index de l'étape courante.  | number | — | 0 |
| process-status | Le statut de l'étape courante. | string | wait / process / finish / error / success | process |
| finish-status | Le statut de la dernière étape. | string | wait / process / finish / error / success | finish |
| align-center | Si le titre et la description doivent être centrés. | boolean | — | false |
| simple | Si un thème simple doit être appliqué. | boolean | - | false |

### Attributs des étapes

| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
|---------- |-------- |---------- |-------------  |-------- |
| title | Titre de l'étape. | string | — | — |
| description | Description de l'étape. | string | — | — |
| icon | step icon | Classe de l'icône d'étape. Les icônes peuvent aussi être passées via des slots. | string | — |
| status | Le statut actuel. Sera déterminé par la barre d'étapes si omis. | wait / process / finish / error / success | - |

### Slots des étapes

| Nom | Description |
|----|----|
| icon | L'icône de l'étape. |
| title | Le titre de l'étape. |
| description | La description de l'étape. |