element/examples/docs/fr-FR/slider.md
Simon Malesys 958efaefc3 I18n: French translation (#12153)
* Docs: add french translation (fr-FR) in "components.json".

* Docs: add french translation (fr-FR) in "page.json"

* Docs: add french translation (fr-FR) in "route.json"

* Docs: add french translation (fr-FR) in "title.json"

* Docs: remove a comma in "title.json"

* Docs: translate alert.md into french (fr-FR)

* Docs: remove a comma in "component.json"

* Docs: translate badge.md into french (fr-FR)

* * a77b5518 Docs: translate breadcrumb.md into french (fr-FR)

* * a77b5518 Docs: translate breadcrumb.md into french (fr-FR)

* Docs: translate button.md into french (fr-FR)

* Docs: translate card.md into french (fr-FR)

* Docs: translate carousel.md into french (fr-FR)

* Docs: translate cascader.md into french (fr-FR)

* Docs: translate checkbox.md into french (fr-FR)

* Docs: translate collapse.md into french (fr-FR)

* Docs: translate color-picker.md into french (fr-FR)

* Docs: translate color.md into french (fr-FR)

* Docs: translate container.md into french (fr-FR)

* Docs: translate custom-theme.md into french (fr-FR)

* Docs: translate date-picker.md into french (fr-FR)

* Docs: translate datetime-picker.md into french (fr-FR)

* Docs: translate dialog.md into french (fr-FR)

* Docs: translate form.md into french (fr-FR)

* Docs: translate i18n.md into french (fr-FR)

* Docs: translate icon.md into french (fr-FR)

* Docs: translate input-number.md into french (fr-FR)

* Docs: translate input.md into french (fr-FR)

* Docs: translate installation.md into french (fr-FR)

* Docs: translate dropdown.md into french (fr-FR)

* Docs: translate layout.md into french (fr-FR)

* Docs: translate loading.md into french (fr-FR)

* Docs: translate menu.md into french (fr-FR)

* Docs: translate message-box.md into french (fr-FR)

* Docs: translate message.md into french (fr-FR)

* Docs: translate notification.md into french (fr-FR)

* Docs: translate pagination.md into french (fr-FR)

* Docs: translate popover.md into french (fr-FR)

* Docs: translate progress.md into french (fr-FR)

* Docs: translate quickstart.md into french (fr-FR)

* Docs: translate radio.md into french (fr-FR)

* Docs: translate rate.md into french (fr-FR)

* Docs: translate select.md into french (fr-FR)

* Docs: translate slider.md into french (fr-FR)

* Docs: translate steps.md into french (fr-FR)

* Docs: translate switch.md into french (fr-FR)

* Docs: translate table.md into french (fr-FR)

* Docs: translate tabs.md into french (fr-FR)

* Docs: translate tag.md into french (fr-FR)

* Docs: translate time-picker.md into french (fr-FR)

* Docs: translate tooltip.md into french (fr-FR)

* Docs: translate transfer.md into french (fr-FR)

* Docs: translate transition.md into french (fr-FR)

* Docs: translate tree.md into french (fr-FR)

* Docs: translate typography.md into french (fr-FR)

* Docs: translate upload.md into french (fr-FR)

* Docs: update the configuration for the french translation

* Docs: update the french documentation from 2.4.4 to 2.4.11

* Changelog: translate to line 408 into french (fr-FR)

* Changelog: finish the translation into french (fr-FR)

* Changelog: update from 2.4.11 to 2.5.4

* Doc: update french translation from 2.4.11 to 2.5.4

* Changelog: fix a display bug with the subtitles

* Examples: add french language (fr-FR) in search.vue component

* Doc: change some french titles

* Doc: add the french locale to app.vue
2019-02-12 09:08:19 +08:00

5.8 KiB

Slider

Permet de sélectionner une valeur au sein d'un intervalle.

Usage

La valeur est affichée lorsque le slider est utilisé.

:::demo Vous pouvez décider de la valeur initiale en initialisant la variable liée.

<template>
  <div class="block">
    <span class="demonstration">Valeur par défaut</span>
    <el-slider v-model="value1"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">Valeur initiale personnalisée</span>
    <el-slider v-model="value2"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">Pas de tooltip</span>
    <el-slider v-model="value3" :show-tooltip="false"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">Tooltip formatté</span>
    <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">Désactivé</span>
    <el-slider v-model="value5" disabled></el-slider>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value1: 0,
        value2: 50,
        value3: 36,
        value4: 48,
        value5: 42
      }
    },
    methods: {
      formatTooltip(val) {
        return val / 100;
      }
    }
  }
</script>

:::

Valeurs discrètes

Les valeurs peuvent être discrètes.

:::demo Réglez le pas avec l'attribut step. Vous pouvez affiché chaque point grâce à show-stops.

<template>
  <div class="block">
    <span class="demonstration">Points absents</span>
    <el-slider
      v-model="value6"
      :step="10">
    </el-slider>
  </div>
  <div class="block">
    <span class="demonstration">Points affichés</span>
    <el-slider
      v-model="value7"
      :step="10"
      show-stops>
    </el-slider>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value6: 0,
        value7: 0
      }
    }
  }
</script>

:::

Slider avec champ d'input

Vous pouvez afficher un champ d'input synchronisé pour entrer une valeur précise rapidement.

:::demo Ajoutez l'attribut show-input pour ajouter le champ à droite du Slider.

<template>
  <div class="block">
    <el-slider
      v-model="value8"
      show-input>
    </el-slider>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value8: 0
      }
    }
  }
</script>

:::

Sélectionner une intervalle

Vous pouvez sélectionner des intervalles de valeurs au lieu d'une valeur unique.

:::demo Ajouter l'attribut range active le mode intervalle, ou la valeur sera maintenant un tableau contenant les deux valeurs de l'intervalle.

<template>
  <div class="block">
    <el-slider
      v-model="value9"
      range
      show-stops
      :max="10">
    </el-slider>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value9: [4, 8]
      }
    }
  }
</script>

:::

Mode vertical

:::demo Ajoutez l'attribut vertical active le mode vertical. Dans ce mode, l'attribut height est requis.

<template>
  <div class="block">
    <el-slider
      v-model="value10"
      vertical
      height="200px">
    </el-slider>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value10: 0
      }
    }
  }
</script>

:::

Attributs

Attribut Description Type Valeurs acceptées Défaut
value / v-model La valeur liée. number 0
min Valeur minimale. number 0
max Valeur maximale. number 100
disabled Si le Slider est désactivé. boolean false
step La taille du pas. number 1
show-input Si une champ d'input doit être affiché, ne marche que si range est false. boolean false
show-input-controls Si des boutons de contrôle doivent être affichés quand show-input est true. boolean true
input-size Taille du champ d'input. string large / medium / small / mini small
show-stops Si les points de valeurs discrètes doivent être affichés. boolean false
show-tooltip Si le tooltip doit être affiché. boolean true
format-tooltip Format du contenu du tooltip. function(value)
range Si le mode intervalle est activé. boolean false
vertical Si le mode vertical est activé. boolean false
height Hauteur du Slider, requis en mode vertical. string
label Label pour les lecteurs d'écran. string
debounce Délai après écriture en millisecondes, marche quand show-input est true. number 300
tooltip-class Classe du tooltip. string

Évènements

Nom Description Paramètres
change Se déclenche quand la valeur change (si le changement est fait à la souris, se déclenche quand la souris redevient immobile). La nouvelle valeur.