Resumen de la calificación de Web Components

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

    En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:

    npm install igniteui-webcomponents

    Antes de usarlosIgcRatingComponent, debes registrarlo de la siguiente manera:

    import { defineComponents, IgcRatingComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcRatingComponent);

    Para una introducción completa al Ignite UI for Web Components, lee el tema Empezar.

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

    <igc-rating></igc-rating>

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

    Using Custom Symbols

    ElIgcRatingComponent 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 colocarIgcRatingSymbolComponent los componentes entre los corchetes de apertura y cierre de losIgcRatingComponent:

    <igc-rating>
  <igc-rating-symbol> <div>💙</div> <div slot="empty">💙</div> </igc-rating-symbol>
  <igc-rating-symbol> <div>💙</div> <div slot="empty">💙</div> </igc-rating-symbol>
  <igc-rating-symbol> <div>💙</div> <div slot="empty">💙</div> </igc-rating-symbol>
  <igc-rating-symbol> <div>💙</div> <div slot="empty">💙</div> </igc-rating-symbol>
</igc-rating>

    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 Web Components 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.

    <igc-rating single>
  <igc-rating-symbol> <div>😣</div> <div slot="empty">😣</div> </igc-rating-symbol>
  <igc-rating-symbol> <div>😣</div> <div slot="empty">😣</div> </igc-rating-symbol>
  <igc-rating-symbol> <div>😣</div> <div slot="empty">😣</div> </igc-rating-symbol>
  <igc-rating-symbol> <div>😣</div> <div slot="empty">😣</div> </igc-rating-symbol>
  <igc-rating-symbol> <div>😣</div> <div slot="empty">😣</div> </igc-rating-symbol>
</igc-rating>

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

    Empty & Selected

    El componente Ignite UI for Web Components 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:

    <igc-rating-symbol>
  <igc-icon collection="default" name="bandage"></igc-icon>
  <igc-icon collection="default" name="bacteria" slot="empty"></igc-icon>
</igc-rating-symbol>

    Configuración

    Single

    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.

    Value

    Elvalue atributo establece el valor actual del componente.

    Label

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

    Value Format

    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.

    Max Value

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

    Step

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

    Hover Preview

    The hover-preview 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.

    Read-Only

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

    Disabled

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

    Methods

    Step Up

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

    Step Down

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

    Eventos

    ElIgcRatingComponent componente emite dos eventos separados -igcHoveryigcChange.

    Hover Event

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

    Change Event

    EligcChange evento se activa cuando cambia el valor seleccionado.

    Styling

    ElIgcRatingComponent 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