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.

    EXAMPLE
    TS
    HTML
    CSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

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

    npm install igniteui-webcomponents
    cmd

    Antes de utilizar IgcRatingComponent, debe registrarlo de la siguiente manera:

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

    Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Primeros pasos.

    La forma más sencilla de empezar a utilizar IgcRatingComponent es la siguiente:

    <igc-rating></igc-rating>
    html

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

    Usar símbolos personalizados

    El componente IgcRatingComponent le permite utilizar símbolos personalizados en lugar de los símbolos de estrella predeterminados. Si desea utilizar un símbolo diferente, como SVG, icono u otro símbolo Unicode, debe colocar los componentes IgcRatingSymbolComponent entre los corchetes de apertura y cierre de IgcRatingComponent:

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

    EXAMPLE
    TS
    HTML
    CSS

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

    EXAMPLE
    TS
    HTML
    CSS

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

    Ignite UI for Web Components | CTA Banner

    Vacío y seleccionado

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

    EXAMPLE
    TS
    HTML
    CSS

    Configuración

    Soltero

    Activa el modo visual single para la calificación. Útil cuando se utilizan símbolos que comunican valores únicos, como caras emoji de retroalimentación.

    Valor

    El atributo value establece el valor actual del componente.

    Etiqueta

    El atributo label permite configurar el valor de la 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

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

    Paso

    El atributo step establece la fracción permitida de pasos entre dos símbolos. Útil al dividir los símbolos de calificación por la mitad.

    Vista previa al pasar el mouse

    El atributo de hover-preview hace que el componente muestre el posible resultado de la selección del usuario al pasar el mouse. Es útil cuando desea brindar información instantánea sobre cuál podría ser el valor seleccionado.

    Solo lectura

    El readOnly atributo permite a los usuarios establecer el IgcRatingComponent en modo de solo lectura. Este atributo es útil cuando se desea utilizar el componente solo con fines informativos.

    Desactivado

    El atributo disabled deshabilita el componente, lo que hace imposible seleccionar un valor con el mouse o el teclado.

    Métodos

    Aumentar

    El método stepUp incrementa el valor del componente en n pasos. Determinado por el factor step.

    Bajar

    El método stepDown disminuye el valor del componente en n pasos. Determinado por el factor step.

    Eventos

    El componente IgcRatingComponent emite dos eventos separados: igcHover e igcChange.

    Evento de desplazamiento

    El evento igcHover se activa al pasar el cursor sobre un símbolo. Proporciona el valor del símbolo debajo del cursor del mouse. Útil para crear etiquetas y lecturas de valores personalizados.

    Cambiar evento

    El evento igcChange se activa cuando cambia el valor seleccionado.

    Estilo

    El componente IgcRatingComponent proporciona base, etiqueta, etiqueta de valor, símbolos y símbolo que le permiten diseñar los símbolos del componente y la etiqueta que lo rodea.

    EXAMPLE
    TS
    HTML
    CSS

    Referencia de API

    Recursos adicionales