Notation

VRating permet de donner une note sur quelques icônes. C’est un groupe de boutons radio natifs : les flèches, l’envoi de formulaire et required fonctionnent comme dans tout formulaire.

Utilisation

vue

<script setup lang="ts">
import { ref } from 'vue'
import { VRating } from 'vectis-ui'

const rating = ref<number | null>(3)
</script>

<template>
  <VRating v-model="rating" label="Quality" hint="Your overall impression of the product." />
</template>

Exemples

Effaçable

clearable permet de revenir à null : recliquez la valeur courante, ou atteignez « Aucune note » avec les flèches.

vue

<script setup lang="ts">
import { ref } from 'vue'
import { VRating, VTypography } from 'vectis-ui'

const rating = ref<number | null>(4)
</script>

<template>
  <div class="demo">
    <VRating v-model="rating" label="Delivery" clearable />
    <VTypography variant="body-sm" tone="muted">Value: {{ rating ?? 'null' }}</VTypography>
  </div>
</template>

<style scoped>
.demo {
  display: grid;
  gap: var(--vectis-space-3);
}
</style>

Lecture seule

readonly affiche la valeur comme une seule image nommée d’après elle, par exemple « 3,7 sur 5 ». Une valeur fractionnaire remplit une partie d’icône.

vue

3.7 · 128 reviews

<script setup lang="ts">
import { VRating, VTypography } from 'vectis-ui'
</script>

<template>
  <div class="summary">
    <VRating
      :model-value="3.7"
      readonly
      size="sm"
      tone="warning"
      label="Average rating"
      hide-label
    />
    <VTypography variant="body-sm" tone="muted">3.7 · 128 reviews</VTypography>
  </div>
</template>

<style scoped>
.summary {
  display: flex;
  align-items: center;
  gap: var(--vectis-space-2);
}
</style>

Tailles

size règle les icônes sur 20, 24 ou 32 pixels.

vue

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

<template>
  <div class="sizes">
    <VRating :model-value="4" size="sm" label="Small" />
    <VRating :model-value="4" label="Medium" />
    <VRating :model-value="4" size="lg" label="Large" />
  </div>
</template>

<style scoped>
.sizes {
  display: grid;
  gap: var(--vectis-space-4);
}
</style>

Tons et icônes

tone colore les icônes remplies, et color le remplace par une couleur de votre choix. icon remplace l’étoile par n’importe quelle icône ; les vides sont dessinées en contour et les remplies avec sa forme pleine.

vue

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

<template>
  <div class="tones">
    <VRating :model-value="4" label="Accent" />
    <VRating :model-value="4" tone="warning" label="Warning" />
    <VRating :model-value="4" tone="neutral" label="Neutral" />
    <VRating :model-value="4" color="#e91e63" label="Custom colour" />
  </div>
</template>

<style scoped>
.tones {
  display: grid;
  gap: var(--vectis-space-4);
}
</style>

Validation

VRating suit le modèle des champs : error remplace l’aide et est annoncé, et required ajoute un astérisque et rend le choix obligatoire pour le navigateur.

vue

<script setup lang="ts">
import { computed, ref } from 'vue'
import { VRating } from 'vectis-ui'

const rating = ref<number | null>(null)
const error = computed(() => (rating.value === null ? 'Choose a rating.' : undefined))
</script>

<template>
  <VRating v-model="rating" label="Quality" :error="error" required name="quality" />
</template>

API

Props

Prop	Type	Défaut
`max`	`number`	`5`
Nombre d’icônes, et valeur la plus haute.
`label`	`string`	aucune
Légende du groupe. Par défaut, le nom accessible vient du dictionnaire de la bibliothèque.
`hideLabel`	`boolean`	`false`
Masque visuellement le libellé, qui reste le nom du groupe.
`hint`	`string`	aucune
Texte d’aide sous les icônes.
`error`	`string`	aucune
Message d’erreur qui remplace l’aide. Annoncé quand il apparaît ou change.
`required`	`boolean`	`false`
Rend la note obligatoire dans un formulaire et ajoute un astérisque.
`name`	`string`	aucune
Nom du champ dans l’envoi du formulaire.
`clearable`	`boolean`	`false`
Permet de revenir à aucune note, en recliquant la valeur courante ou avec le choix « Aucune note ».
`readonly`	`boolean`	`false`
Affiche la valeur comme une seule image. Une valeur fractionnaire remplit une partie d’icône.
`disabled`	`boolean`	`false`
Désactive tout le groupe.
`size`	`RatingSize'sm' \| 'md' \| 'lg'`	`'md'`
Taille des icônes.
`tone`	`RatingTone'accent' \| 'warning' \| 'danger' \| 'success' \| 'neutral'`	`'accent'`
Couleur des icônes remplies.
`color`	`string`	aucune
Couleur personnalisée des icônes remplies (hex, nom CSS ou `oklch()`), qui remplace le ton. Vérifiez son contraste.
`icon`	`IconSource`	`star`
Icône qui remplace l’étoile.
`v-model`	`number \| null`	`null`
Note de 1 à `max`, ou `null`. Peut être fractionnaire en lecture seule.

Types

Types utilisés dans les tables d’API. Importez les types exportés depuis vectis-ui.

export interface BuiltinIcon {
  name: string
  paths: readonly [string] | readonly [string, string]
}

export type IconRender =
  | { path: string; viewBox?: string }
  | { component: Component; props?: Record<string, unknown> }
  | { src: string }
  | { text: string; class?: string }
  | { class: string }

export type IconSource = string | BuiltinIcon | IconRender

Variables CSS

Token	Valeur
`--vectis-control-size-rating-sm`	`1.25rem`
`--vectis-control-size-rating-md`	`1.5rem`
`--vectis-control-size-rating-lg`	`2rem`