element/examples/docs/fr-FR/rate.md
2019-04-12 10:40:46 +08:00

4.5 KiB

Rate

Utilisé pour donner une note sur cinq étoiles.

Usage

:::demo Rate divise les scores en trois niveaux et ces niveaux peuvent être distingués en utilisant différentes couleurs de fond. Par défaut ces couleurs sont identiques, mais vous pouvez affecter un tableau des codes couleur à l'attribut colors, ainsi que les deux seuils via low-threshold et high-threshold.

<div class="block">
  <span class="demonstration">Défaut</span>
  <el-rate v-model="value1"></el-rate>
</div>
<div class="block">
  <span class="demonstration">Couleurs pour chaque niveau</span>
  <el-rate
    v-model="value2"
    :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
  </el-rate>
</div>

<script>
  export default {
    data() {
      return {
        value1: null,
        value2: null
      }
    }
  }
</script>

:::

Avec du texte

Vous pouvez ajouter du texte à chaque score.

:::demo Ajoutez l'attribut show-text pour afficher du texte à droite des étoiles. Vous pouvez choisir les textes avec l'attribut texts. C'est un tableau dont la taille doit être égale au score max max.

<el-rate
  v-model="value"
  :texts="['oops', 'disappointed', 'normal', 'good', 'great']"
  show-text>
</el-rate>

<script>
  export default {
    data() {
      return {
        value: null
      }
    }
  }
</script>

:::

Plus d'icônes

Vous pouvez utiliser différentes icônes pour chaque

:::demo Vous pouvez personnaliser les icônes de chaque niveau en utilisant icon-classes. Dans cet exemple, nous utilisons aussi void-icon-class qui permet de choisir l'icône des valeurs non-sélectionnées.

<el-rate
  v-model="value"
  :icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"
  void-icon-class="icon-rate-face-off"
  :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
</el-rate>

<script>
  export default {
    data() {
      return {
        value: null
      }
    }
  }
</script>

:::

Lecture seule

Le score peut être en lecture seule. Les demi-étoiles sont supportées.

:::demo Utilisez disabled pour mettre le composant en lecture seule. Ajoutez show-score pour afficher le score à droite des étoiles. De plus, vous pouvez utiliser score-template pour déterminer un template. Il doit contenir {value} qui sera remplacé par la valeur du score.

<el-rate
  v-model="value"
  disabled
  show-score
  text-color="#ff9900"
  score-template="{value} points">
</el-rate>

<script>
  export default {
    data() {
      return {
        value: 3.7
      }
    }
  }
</script>

:::

Attributs

Attribut Description Type Valeurs acceptées Défaut
value / v-model La valeur liée. number 0
max Score maximum. number 5
disabled Si le score est en lecture seule. boolean false
allow-half Si les demi-étoiles sont autorisées. boolean false
low-threshold Seuil entre les niveaux bas et moyen. La valeur sera incluse dans le niveau bas. number 2
high-threshold Seuil entre les niveaux moyen et haut. La valeur sera incluse entre dans le niveau haut. number 4
colors Couleurs des icônes. Doit en contenir trois, correspondants à chaque niveau. array ['#F7BA2A', '#F7BA2A', '#F7BA2A']
void-color Couleur des icônes non-sélectionnées. string #C6D1DE
disabled-void-color Couleur des icônes non-sélectionnées en lecture seule. string #EFF2F7
icon-classes Liste des classes des icônes. Doit en contenir trois, correspondants à chaque niveau. array ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']
void-icon-class Classe des icônes non-sélectionnées. string el-icon-star-off
disabled-void-icon-class Classe des icônes non-sélectionnées en lecture seule. string el-icon-star-on
show-text Si du texte doit apparaître à droite des étoiles. boolean false
show-score Si le score doit apparaître. Incompatible avec show-text. boolean false
text-color Couleur du texte. string #1F2D3D
texts Label des différents scores. array ['极差', '失望', '一般', '满意', '惊喜']
score-template Template du score. string {value}

Évènements

Nom Description Paramètres
change Se déclenche quand la valeur change. Valeur après le changement.