Raccourci clavier : Ctrl + K
Commencer

Jauge

VMeter affiche une mesure dans une plage connue, comme l’espace disque utilisé, le niveau d’une batterie ou la robustesse d’un mot de passe. Sa couleur peut dire si la mesure est bonne, moyenne ou mauvaise.

Utilisation

vue
Storage
<script setup lang="ts">
import { VMeter } from 'vectis-ui'
</script>

<template>
  <VMeter class="meter" :value="64" label="Storage" />
</template>

<style scoped>
.meter {
  max-inline-size: 20rem;
}
</style>

Exemples

Zones

low, high et optimum suivent les règles du <meter> natif. La partie de la plage qui contient optimum est bonne et peinte en succès, la partie voisine est moyenne en avertissement, et la partie opposée est mauvaise en danger. Sans aucune des trois, la jauge prend la couleur d’accent.

vue
Humidity
CPU load
Battery
<script setup lang="ts">
import { VMeter } from 'vectis-ui'
</script>

<template>
  <div class="meters">
    <VMeter label="Humidity" :value="45" :low="30" :high="60" />
    <VMeter label="CPU load" :value="55" :low="30" :high="70" :optimum="0" />
    <VMeter label="Battery" :value="12" :low="20" :high="50" :optimum="100" />
  </div>
</template>

<style scoped>
.meters {
  display: grid;
  gap: var(--vectis-space-5);
  max-inline-size: 20rem;
}
</style>

Tons

tone fixe la couleur quelle que soit la zone. color accepte une couleur de votre choix, dont la piste est dérivée.

vue
Accent
Neutral
Danger
Purple
<script setup lang="ts">
import { VMeter } from 'vectis-ui'
</script>

<template>
  <div class="meters">
    <VMeter label="Accent" :value="60" tone="accent" />
    <VMeter label="Neutral" :value="60" tone="neutral" />
    <VMeter label="Danger" :value="60" tone="danger" />
    <VMeter label="Purple" :value="60" color="#7c3aed" />
  </div>
</template>

<style scoped>
.meters {
  display: grid;
  gap: var(--vectis-space-5);
  max-inline-size: 20rem;
}
</style>

Valeur

La valeur est par défaut un pourcentage de la plage. formatOptions formate la valeur elle-même selon la locale courante, et valueText la remplace par vos propres mots. Les lecteurs d’écran lisent le même texte.

vue
Humidity
Temperature
Storage
<script setup lang="ts">
import { VMeter } from 'vectis-ui'
</script>

<template>
  <div class="meters">
    <VMeter label="Humidity" :value="45" />
    <VMeter
      label="Temperature"
      :value="21.5"
      :min="-10"
      :max="40"
      :format-options="{ style: 'unit', unit: 'celsius' }"
    />
    <VMeter label="Storage" :value="7.2" :max="10" value-text="7.2 GB of 10 GB" />
  </div>
</template>

<style scoped>
.meters {
  display: grid;
  gap: var(--vectis-space-5);
  max-inline-size: 20rem;
}
</style>

Segments

segments découpe la barre en parts égales. La couleur seule ne distingue pas la zone : dites-la dans valueText quand elle compte.

vue
Password strength
Battery
<script setup lang="ts">
import { computed, ref } from 'vue'
import { VButton, VMeter } from 'vectis-ui'

const strengths = ['Weak', 'Fair', 'Good', 'Strong']
const strength = ref(2)
const text = computed(() => strengths[strength.value - 1])
</script>

<template>
  <div class="meters">
    <VMeter
      label="Password strength"
      :value="strength"
      :max="4"
      :low="1.5"
      :high="2.5"
      :optimum="4"
      :segments="4"
      :value-text="text"
    />
    <div class="actions">
      <VButton variant="outline" size="sm" :disabled="strength <= 1" @click="strength--">
        Weaker
      </VButton>
      <VButton variant="outline" size="sm" :disabled="strength >= 4" @click="strength++">
        Stronger
      </VButton>
    </div>
    <VMeter label="Battery" :value="70" :low="20" :high="50" :optimum="100" :segments="5" />
  </div>
</template>

<style scoped>
.meters {
  display: grid;
  gap: var(--vectis-space-5);
  max-inline-size: 20rem;
}

.actions {
  display: flex;
  gap: var(--vectis-space-2);
}
</style>

Tailles

size règle l’épaisseur de la barre, 4, 8 ou 12 pixels. La jauge occupe toute la largeur de son conteneur.

vue
Small
Medium
Large
<script setup lang="ts">
import { VMeter } from 'vectis-ui'
</script>

<template>
  <div class="meters">
    <VMeter size="sm" label="Small" :value="40" />
    <VMeter size="md" label="Medium" :value="40" />
    <VMeter size="lg" label="Large" :value="40" />
  </div>
</template>

<style scoped>
.meters {
  display: grid;
  gap: var(--vectis-space-5);
  max-inline-size: 20rem;
}
</style>

Texte masqué

hideLabel et hideValue retirent le texte au-dessus de la barre. Les lecteurs d’écran entendent toujours le libellé et la valeur.

vue
Quota
<script setup lang="ts">
import { VMeter } from 'vectis-ui'
</script>

<template>
  <VMeter class="meter" label="Quota" :value="30" hide-label hide-value />
</template>

<style scoped>
.meter {
  max-inline-size: 20rem;
}
</style>

API

Props

PropTypeDéfaut
valuenumber0
Mesure, ramenée dans la plage.
minnumber0
Borne inférieure de la plage.
maxnumber100
Borne supérieure de la plage.
lownumberaucune
Fin de la partie basse de la plage.
highnumberaucune
Début de la partie haute de la plage.
optimumnumberaucune
Meilleure valeur. Sa partie de la plage est bonne, la voisine moyenne et l’opposée mauvaise.
labelstringaucune
Ce qui est mesuré, affiché au-dessus de la barre et la nommant. Utilise le dictionnaire par défaut ; les attributs ARIA de nommage fournis sont prioritaires.
hideLabelbooleanfalse
Masque le libellé à l’écran. Les lecteurs d’écran le lisent toujours.
valueTextstringaucune
Texte remplaçant la valeur formatée, à l’écran et pour les lecteurs d’écran.
formatOptionsIntl.NumberFormatOptionsaucune
Options de Intl.NumberFormat formatant la valeur elle-même.
hideValuebooleanfalse
Masque la valeur à l’écran. Les lecteurs d’écran la lisent toujours.
toneMeterTone'accent' | 'neutral' | 'success' | 'warning' | 'danger'aucune
Couleur du remplissage. Choisie selon la zone quand low, high ou optimum est défini, accent sinon.
colorstringaucune
Couleur CSS personnalisée remplaçant le ton.
segmentsnumber1
Nombre de parts égales de la barre.
sizeMeterSize'sm' | 'md' | 'lg''md'
Épaisseur de la barre et taille du texte.

Variables CSS

TokenValeur
--vectis-control-size-meter-thickness-sm0.25rem
--vectis-control-size-meter-thickness-md0.5rem
--vectis-control-size-meter-thickness-lg0.75rem
--vectis-control-size-meter-segment-gap0.125rem