Descripción general de la calificación Blazor

    El componente de calificación de Ignite UI for Blazor permite a los usuarios ver y brindar comentarios.

    Antes de usarlosIgbRating, debes registrarlo de la siguiente manera:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbRatingModule));

    También tendrás que vincular un archivo CSS adicional para aplicar el estilo alIgbRating componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de ensamblador web Blazor o en el archivo Pages/_Host.cshtml de un proyecto Blazor Server:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

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

    <IgbRating></IgbRating>

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

    Using Custom Symbols

    ElIgbRating 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 colocarIgbRatingSymbol los componentes entre los corchetes de apertura y cierre de losIgbRating:

    <IgbRating>
  <IgbRatingSymbol> <div>💙</div> <div slot="empty">💙</div> </IgbRatingSymbol>
  <IgbRatingSymbol> <div>💙</div> <div slot="empty">💙</div> </IgbRatingSymbol>
  <IgbRatingSymbol> <div>💙</div> <div slot="empty">💙</div> </IgbRatingSymbol>
  <IgbRatingSymbol> <div>💙</div> <div slot="empty">💙</div> </IgbRatingSymbol>
  <IgbRatingSymbol> <div>💙</div> <div slot="empty">💙</div> </IgbRatingSymbol>
</IgbRating>

    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 Blazor tiene un único modo de selección que permite a los usuarios proporcionar diferentes íconos o elementos para los distintos valores de calificación. En este caso, solo se puede seleccionar uno de los íconos o elementos y reflejar la retroalimentación proporcionada por el usuario.

    <IgbRating>
  <IgbRatingSymbol> <div>😣</div> <div slot="empty">😣</div> </IgbRatingSymbol>
  <IgbRatingSymbol> <div>😣</div> <div slot="empty">😣</div> </IgbRatingSymbol>
  <IgbRatingSymbol> <div>😣</div> <div slot="empty">😣</div> </IgbRatingSymbol>
  <IgbRatingSymbol> <div>😣</div> <div slot="empty">😣</div> </IgbRatingSymbol>
  <IgbRatingSymbol> <div>😣</div> <div slot="empty">😣</div> </IgbRatingSymbol>
</IgbRating>

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

    Empty & Selected

    La Ignite UI for Blazor 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 íconos para cada espacio (vacío y lleno) al declarar un símbolo, incluso si son iguales. Por ejemplo:

    <IgbRatingSymbol>
  <IgbIcon Collection="material" IconName="bandage"></IgbIcon>
  <IgbIcon Collection="material" IconName="bacteria" slot="empty"></IgbIcon>
</IgbRatingSymbol>

    Configuration

    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

    ElHoverPreview atributo hace que el componente muestre el posible resultado de la selección de usuario al pasar el cursor. Es útil cuando quieres dar una retroalimentación instantánea sobre cuál podría ser el valor seleccionado.

    Read-Only

    ElReadOnly atributo permite a los usuarios configurar elIgbRating 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

    ElIgbRating componente emite dos eventos separados -HoveryChange.

    Hover Event

    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.

    Change Event

    ElChange evento se activa cuando cambia el valor seleccionado.

    Styling

    ElIgbRating 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