<!DOCTYPE html><html><head><title>Basic Rating</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css"type="text/css" /></head><body><divid="root"><divclass="sample center"><igc-ratingclass="size-large"label="Rate Experience"max="5"step=".5"hover-preview></igc-rating></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */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:
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:
<!DOCTYPE html><html><head><title>Rating w/ Custom Symbol</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css"type="text/css" /></head><body><divid="root"><divclass="sample center"><igc-ratinglabel="Rate Experience"value="3"step=".5"hover-preview><igc-rating-symbol><igc-iconname="heart"></igc-icon><igc-iconname="empty-heart"slot="empty"></igc-icon></igc-rating-symbol><igc-rating-symbol><igc-iconname="heart"></igc-icon><igc-iconname="empty-heart"slot="empty"></igc-icon></igc-rating-symbol><igc-rating-symbol><igc-iconname="heart"></igc-icon><igc-iconname="empty-heart"slot="empty"></igc-icon></igc-rating-symbol><igc-rating-symbol><igc-iconname="heart"></igc-icon><igc-iconname="empty-heart"slot="empty"></igc-icon></igc-rating-symbol><igc-rating-symbol><igc-iconname="heart"></igc-icon><igc-iconname="empty-heart"slot="empty"></igc-icon></igc-rating-symbol></igc-rating></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */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.
<!DOCTYPE html><html><head><title>Single Selection Rating</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css"type="text/css" /></head><body><divid="root"><divclass="sample center"><igc-ratinglabel="Rate Experience"single><igc-rating-symbol><div>😣</div><divslot="empty">😣</div></igc-rating-symbol><igc-rating-symbol><div>😔</div><divslot="empty">😔</div></igc-rating-symbol><igc-rating-symbol><div>😐</div><divslot="empty">😐</div></igc-rating-symbol><igc-rating-symbol><div>🙂</div><divslot="empty">🙂</div></igc-rating-symbol><igc-rating-symbol><div>😆</div><divslot="empty">😆</div></igc-rating-symbol></igc-rating></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Tenga en cuenta que el atributo step no funciona con el modo de selección única.
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:
<!DOCTYPE html><html><head><title>Empty State Rating</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css"type="text/css" /></head><body><divid="root"><divclass="sample center"><igc-rating><igc-rating-symbol><igc-iconname="bandage"></igc-icon><igc-iconname="bacteria"slot="empty"></igc-icon></igc-rating-symbol><igc-rating-symbol><igc-iconname="bandage"></igc-icon><igc-iconname="bacteria"slot="empty"></igc-icon></igc-rating-symbol><igc-rating-symbol><igc-iconname="bandage"></igc-icon><igc-iconname="bacteria"slot="empty"></igc-icon></igc-rating-symbol><igc-rating-symbol><igc-iconname="bandage"></igc-icon><igc-iconname="bacteria"slot="empty"></igc-icon></igc-rating-symbol><igc-rating-symbol><igc-iconname="bandage"></igc-icon><igc-iconname="bacteria"slot="empty"></igc-icon></igc-rating-symbol></igc-rating></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */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.
<!DOCTYPE html><html><head><title>Styled Rating</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css"type="text/css" /></head><body><divid="root"><divclass="sample center"><igc-ratingclas="size-large"label="Styled Rating"value="2.5"step=".5"hover-preview></igc-rating></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css