Componente Rating para Zeedhi
O component zd-rating foi criado para ser utilizado como uma barra de avaliação
Instalação
Para instalar o pacote do componente, basta rodar o comando:
npm i @zeedhi/zd-rating
Com isso, dois pacotes serão instalados: o @zeedhi/zd-rating-common
e o @zeedhi/zd-rating-vue
.
Após a instalação, é necessário que você importe o pacote @zeedhi/zd-rating-vue dentro de seu arquivo de configuração zeedhi.ts
import { ZdRating } from '@zeedhi/zd-rating-vue';
Vue.component('ZdRating', ZdRating);
Já o pacote @zeedhi/zd-rating-common
deve ser importado no arquivo controller do componente.
Uso Básico
Para usar, defina a propriedade component como 'ZdRating'.
{
"name": "rating-example",
"component": "ZdRating"
}
Propriedades
Nome | Tipo | Default | Descrição |
---|---|---|---|
value | number | 0 | Armazena o valor do ZdRating |
backgroundColor | string | 'var(--zd-font-color)' | A cor usada nos ícones vazios |
color | string | 'primary' | Aplica a cor especificada aos itens |
clearable | boolean | false | Os ícones têm um tamanho menor |
emptyIcon | string | 'star-outline' | O ícone exibido quando estiver vazio |
fullIcon | string | 'star' | O ícone exibido quando estiver preenchido |
halfIcon | string | 'mdi-star-half-full' | O ícone exibido quando estiver pela metade |
halfIncrements | boolean | false | Permite a seleção de meio incrementos |
hover | boolean | false | Fornece feedback visual ao passar o mouse sobre os ícones |
length | number | string | 5 | A quantidade de itens a ser exibido |
readonly | boolean | false | Remove todos os efeitos de foco e eventos de ponteiro |
size | number | string | '' | Define a altura e a largura do componente. |
Eventos
Nome | Parametros | Descrição |
---|---|---|
onChange | value: number | diparado quando o valor do componente é alterado ao click |