Descripción general de la clasificación Web Components
El componente Ignite UI for Web Components Rating permite a los usuarios ver y proporcionar comentarios.
Primero, debe instalar la Ignite UI for Web Components ejecutando el siguiente comando:
npm install igniteui-webcomponents
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);
Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Introducción.
La forma más sencilla de empezar a utilizar IgcRatingComponent 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
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>
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 de calificación Ignite UI for Web Components tiene un modo de selección único que permite a los usuarios proporcionar diferentes íconos/elementos para los diferentes valores de calificació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>
Tenga en cuenta que el atributo
stepno funciona con el modo de selección única.
Empty & Selected
El componente Ignite UI for Web Components Rating permite a los usuarios usar diferentes íconos/elementos para el estado vacío y seleccionado de un único valor de calificación. Es obligatorio proporcionar 2 iconos para cada espacio (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
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.
Methods
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.
Styling
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.