Visão geral da classificação React

    O componente Classificação Ignite UI for React permite que os usuários visualizem e forneçam comentários.

    Primeiro, você precisa instalar o pacote npm Ignite UI for React correspondente executando o seguinte comando:

    npm install igniteui-react

    Antes de usá-losIgrRating, você precisa registrá-los da seguinte forma:

    import { IgrRating } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

    A maneira mais simples de começar a usar oIgrRating é a seguinte:

      <IgrRating></IgrRating>

    Isso criará um componente de classificação de cinco estrelas que pode ser usado para inserir e ler dados.

    Using Custom Symbols

    OIgrRating componente permite que você use símbolos personalizados no lugar dos símbolos padrão de estrela. Se você quiser usar um símbolo diferente, como SVG, ícone ou outro símbolo unicode, deve colocarIgrRatingSymbol componentes entre os colchetes de abertura e fechamento doIgrRating:

      <IgrRating className="size-large" label="Rate Experience" step={.5} hoverPreview={true}>
    <IgrRatingSymbol>
        <IgrIcon name='heart' collection="material"></IgrIcon>
    </IgrRatingSymbol>
    <IgrRatingSymbol>
        <IgrIcon  name='heart' collection="material"></IgrIcon>
    </IgrRatingSymbol>
    <IgrRatingSymbol>
      <IgrIcon  name='heart' collection="material"></IgrIcon>
    </IgrRatingSymbol>
    <IgrRatingSymbol>
       <IgrIcon  name='heart' collection="material"></IgrIcon>
    </IgrRatingSymbol>
    <IgrRatingSymbol>
       <IgrIcon  name='heart' collection="material"></IgrIcon>
    </IgrRatingSymbol>
</IgrRating>

    O número de símbolos de classificação entre os colchetes de abertura e fechamento do componente de classificação determina o valor máximo.

    Seleção única

    O componente Ignite UI for React Rating tem um único modo de seleção que permite aos usuários fornecer diferentes ícones/elementos para os diferentes valores de classificação. Nesse caso, apenas um dos ícones/elementos pode ser selecionado e refletir o feedback dado pelo usuário.

    <IgrRating single={true}>
  <IgrRatingSymbol>
      <div>😣</div>
      <div slot="empty">😣</div>
  </IgrRatingSymbol>
  <IgrRatingSymbol>
      <div>😣</div>
      <div slot="empty">😣</div>
  </IgrRatingSymbol>
  <IgrRatingSymbol>
      <div>😣</div>
      <div slot="empty">😣</div>
  </IgrRatingSymbol>
  <IgrRatingSymbol>
      <div>😣</div>
      <div slot="empty">😣</div>
  </IgrRatingSymbol>
  <IgrRatingSymbol>
      <div>😣</div>
      <div slot="empty">😣</div>
  </IgrRatingSymbol>
</IgrRating>

    Lembre-se de que ostep atributo não funciona no modo de seleção única.

    Empty & Selected

    O componente Ignite UI for React Rating permite que os usuários usem diferentes ícones/elementos para o estado vazio e selecionado de um único valor de classificação. É obrigatório fornecer 2 ícones para cada slot (vazio e cheio) ao declarar um símbolo, mesmo que sejam iguais. Por exemplo:

    <IgrRatingSymbol>
    <div><IgrIcon name='bandage' collection="material"></IgrIcon></div>
    <div slot='empty'><IgrIcon name='bacteria' collection="material"></IgrIcon></div>
</IgrRatingSymbol>

    Configuration

    Solteiro

    Ativa osingle modo visual para a avaliação. Útil ao usar símbolos que comunicam valores únicos, como emojis de feedback.

    Valor

    Ovalue atributo define o valor atual do componente.

    Etiqueta

    Olabel atributo permite definir o valor do rótulo do componente de avaliação.

    Formato do valor

    Uma cadeia de caracteres de formato que define aria-valuetext. Todas as instâncias dele serão substituídas pelo valor atual do controle. Importante para leitores de tela e útil para localização.

    Valor máximo

    Omax atributo define o valor máximo permitido do componente de avaliação.

    Passo

    Ostep atributo define a fração permitida de passos entre dois símbolos. Útil ao dividir os símbolos de avaliação ao meio.

    Visualização do foco

    The hoverPreview attribute makes the component show the possible outcome of user selection on hover. It is useful when you want to give instant feedback about what the selected value could be.

    Somente leitura

    OreadOnly atributo permite que os usuários definam oIgrRating modo somente leitura. Esse atributo é útil quando você quer usar o componente apenas para fins informativos.

    Desabilitado

    Odisabled atributo desativa o componente, tornando impossível selecionar um valor usando mouse ou teclado.

    Methods

    Intensificar

    OstepUp método incrementa o valor do componente emn etapas. Determinado pelostep fator.

    Diminuir

    OstepDown método diminui o valor do componente emn etapas. Determinado pelostep fator.

    Eventos

    OIgrRating componente emite dois eventos separados -hoverandchange.

    Evento de foco

    Ohover evento é acionado ao passar o mouse sobre um símbolo. Ele fornece o valor do símbolo sob o cursor do mouse. Útil para criar etiquetas de valor e leituras personalizadas.

    Evento de mudança

    Ochange evento é disparado quando o valor selecionado muda.

    Styling

    OIgrRating componente expõe partes do CSS para quase todos os seus elementos internos. A tabela a seguir lista todas as partes CSS expostas:

    Nome Descrição
    base O wrapper principal que contém todos os elementos de classificação.
    label A parte do rótulo.
    value-label A parte do rótulo de valor.
    symbols Um wrapper para todos os símbolos de classificação.
    symbol A parte do símbolo padrão encapsulado.
    full A parte dos símbolos completos encapsulados.
    empty A parte dos símbolos vazios encapsulados. 
    igc-rating::part(full) {
  color: var(--ig-primary-500)
}

igc-rating::part(empty) {
  color: var(--ig-secondary-200);
}

    API Reference

    Additional Resources