Jauge de stock — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 2)

Jauge de stock

Gabarits et directives · niveau 2

Énoncé

Pour chaque livre, afficher une jauge de 10 rem de large dont la partie colorée occupe 5 % par exemplaire (plafonnée à 20 exemplaires), en rouge sous 5 exemplaires. La jauge doit aussi être lisible par un lecteur d'écran (rôle meter). Quelle partie revient à :style, et laquelle à :class ?

Corrigé


<ul id="app">
  <li v-for="livre in livres" :key="livre.titre">
    {{ livre.titre }} ({{ livre.stock }})
    <span class="jauge" role="meter" aria-valuemin="0" aria-valuemax="20" :aria-valuenow="livre.stock"
          :aria-label="'Stock de ' + livre.titre">
      <span :class="{ critique: livre.stock < 5 }" :style="{ width: Math.min(livre.stock, 20) * 5 + '%' }"></span>
    </span>
  </li>
</ul>

La classe et le style de chaque barre :


"" width: 60%;
"critique" width: 15%;
"critique" width: 0%;
"" width: 100%;

La largeur est une valeur calculée, continue : :style. La couleur d'alerte est un état (critique ou non) : :class, et la couleur elle-même reste dans la feuille de style. Le rôle meter et ses attributs aria-value… donnent la valeur exacte au lecteur d'écran.