Resumen de la calificación de React

    El componente Clasificación Ignite UI for React permite a los usuarios ver y proporcionar comentarios.

    Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:

    npm install igniteui-react

    Antes de usarlosIgrRating, debes registrarlo de la siguiente manera:

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

    La forma más sencilla de empezar a usar elIgrRating uso es la siguiente:

      <IgrRating></IgrRating>

    Esto creará un componente de calificación de cinco estrellas que se puede utilizar para ingresar y leer datos.

    Using Custom Symbols

    ElIgrRating componente permite usar símbolos personalizados en lugar de los símbolos de estrella por defecto. Si quieres usar un símbolo diferente, como SVG, Icon u otro símbolo unicode, deberías colocarIgrRatingSymbol los componentes entre los corchetes de apertura y cierre de losIgrRating:

      <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>

    El número de símbolos de clasificación entre los corchetes de apertura y cierre del componente de clasificación determina el valor máximo.

    Selección única

    El componente Clasificación Ignite UI for React tiene un único modo de selección que permite a los usuarios proporcionar diferentes iconos/elementos para los diferentes valores de clasificación. En este caso, solo se puede seleccionar uno de los iconos/elementos y reflejar los comentarios proporcionados por el usuario.

    <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>

    Ten en cuenta que elstep atributo no funciona con el modo de selección única.

    Empty & Selected

    El componente Ignite UI for React Rating permite a los usuarios utilizar diferentes iconos/elementos para el estado vacío y seleccionado de un solo valor de rating. Es obligatorio proporcionar 2 iconos para cada ranura (vacío y lleno) al declarar un símbolo, incluso si son iguales. Por ejemplo:

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

    Configuration

    Soltero

    Activa elsingle modo visual para la valoración. Útil cuando se usan símbolos que comunican valores únicos, como caras de emojis de retroalimentación.

    Valor

    Elvalue atributo establece el valor actual del componente.

    Etiqueta

    Ellabel atributo permite establecer el valor de etiqueta del componente de calificación.

    Formato de valor

    Una cadena de formato que establece aria-valuetext. Todas las instancias del mismo serán reemplazadas con el valor actual del control. Importante para lectores de pantalla y útil para localización.

    Valor máximo

    Elmax atributo establece el valor máximo permitido del componente de calificación.

    Paso

    Elstep atributo establece la fracción permitida de pasos entre dos símbolos. Útil para dividir los símbolos de valoración en dos.

    Vista previa al pasar el mouse

    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.

    Solo lectura

    ElreadOnly atributo permite a los usuarios configurar elIgrRating modo de solo lectura. Este atributo es útil cuando quieres usar el componente solo con fines informativos.

    Desactivado

    Eldisabled atributo desactiva el componente, haciendo imposible seleccionar un valor usando el ratón o el teclado.

    Methods

    Aumentar

    ElstepUp método incrementa el valor del componente porn pasos. Determinado por elstep factor.

    Bajar

    ElstepDown método disminuye el valor del componente porn pasos. Determinado por elstep factor.

    Eventos

    ElIgrRating componente emite dos eventos separados -hoverychange.

    Evento de desplazamiento

    Elhover evento se activa al pasar el cursor sobre un símbolo. Proporciona el valor del símbolo bajo el cursor del ratón. Útil para crear etiquetas de valor y lecturas personalizadas.

    Cambiar evento

    Elchange evento se activa cuando cambia el valor seleccionado.

    Styling

    ElIgrRating componente expone las piezas CSS de casi todos sus elementos internos. La siguiente tabla enumera todas las partes CSS expuestas:

    Nombre Descripción
    base El envoltorio principal que contiene todos los elementos de calificación.
    label La parte de la etiqueta.
    value-label La parte de la etiqueta de valor.
    symbols Un contenedor para todos los símbolos de clasificación.
    symbol La parte del símbolo predeterminado encapsulado.
    full La parte de los símbolos completos encapsulados.
    empty La parte de los símbolos vacíos encapsulados. 
    igc-rating::part(full) {
  color: var(--ig-primary-500)
}

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

    API Reference

    Additional Resources