Vitral 0.2
Formulário

Rating

Estrelas para avaliar, em passos inteiros ou em metades e quartos, limpas ao escolher de novo a mesma estrela.

Testado com WAI-ARIA

Importação

main.ts
import { Rating } from '@vitral/vue';

Básico

Your rating
Value: 3
<script setup lang="ts">import { Rating, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const score = ref<number | null>(3);</script> <template>    <StackPanel spacing="0.375rem" style="min-width: 16rem">        <span id="rating-label">Your rating</span>        <Rating v-model="score" aria-labelledby="rating-label" />        <small style="color: var(--vt-text-muted-color)">Value: {{ score ?? 'none' }}</small>    </StackPanel></template>

Meias estrelas

Um step de 0.5. Pressione a metade esquerda de uma estrela para a metade, a direita para a inteira; as setas andam pelo step.

How was it?
Value: 3.5
<script setup lang="ts">import { Rating, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const half = ref<number | null>(3.5);</script> <template>    <StackPanel spacing="0.375rem" style="min-width: 16rem">        <span id="rating-half">How was it?</span>        <Rating v-model="half" :step="0.5" aria-labelledby="rating-half" />        <small style="color: var(--vt-text-muted-color)">Value: {{ half ?? 'none' }}</small>    </StackPanel></template>

Quartos

Qualquer step divide a estrela: a cheia é desenhada sobre a vazia e recortada na fração, então não há glifo pela metade para manter.

Precision
Value: 4.25
<script setup lang="ts">import { Rating, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const quarter = ref<number | null>(4.25);</script> <template>    <StackPanel spacing="0.375rem" style="min-width: 16rem">        <span id="rating-quarter">Precision</span>        <Rating v-model="quarter" :step="0.25" aria-labelledby="rating-quarter" />        <small style="color: var(--vt-text-muted-color)">Value: {{ quarter ?? 'none' }}</small>    </StackPanel></template>

Uma média, somente leitura

Para o que uma avaliação mais serve: um número que não é uma estrela inteira e que nunca foi escolhido por este leitor.

4.3 out of 5, from 1,284 reviews
<script setup lang="ts">import { Rating, StackPanel } from '@vitral/vue'; const average = 4.3;</script> <template>    <StackPanel orientation="horizontal" spacing="0.625rem" align="center" wrap>        <Rating :model-value="average" :step="0.1" readonly aria-label="Average rating" />        <small style="color: var(--vt-text-muted-color)">{{ average }} out of 5, from 1,284 reviews</small>    </StackPanel></template>

Mais estrelas, outros ícones

<script setup lang="ts">import { Rating } from '@vitral/vue';import { ref } from 'vue'; const ten = ref<number | null>(7);</script> <template>    <Rating v-model="ten" :stars="10" on-icon="circle" off-icon="circle" :clearable="false" aria-label="Score out of ten" /></template>

Somente leitura e desabilitado

<script setup lang="ts">import { Rating } from '@vitral/vue';</script> <template>    <Rating :model-value="4" readonly aria-label="Average rating" />    <Rating :model-value="2" disabled aria-label="Disabled rating" /></template>

API

Lido de packages/vue/src/components/Rating/types.ts, então diz o que o componente aceita de fato.

Props

NomeTipoDescrição
starsnumberQuantas estrelas. O padrão é 5.
stepnumberA menor mudança: `1` estrelas inteiras, `0.5` metades, `0.25` quartos. Uma avaliação de estrelas inteiras é um grupo de radios de estrelas, que é o que ela é; uma fracionária é um slider, porque meia estrela não é uma opção numa lista, é uma posição numa escala.
clearablebooleanUm clique na estrela escolhida limpa a avaliação, e as setas podem chegar a zero. O padrão é true.
readonlyboolean—
disabledboolean—
invalidboolean—
onIconIconPropO ícone de uma estrela escolhida. O padrão é uma estrela preenchida.
offIconIconPropO ícone de uma estrela não escolhida. O padrão é uma estrela de contorno.

Mais pt, dt e unstyled de BaseProps; veja pass-through e modo sem estilo.

Emits

EventoPayloadDescrição
changeevent: { originalEvent: Event; value: number | null }—
focusevent: FocusEvent—
blurevent: FocusEvent—

Slots

NomeProps do slotDescrição
onicon(props: { value: number })—
officon(props: { value: number })—

Usado nestes templates