Visão geral da classificação Blazor

    O componente Classificação Ignite UI for Blazor permite que os usuários visualizem e forneçam comentários.

    Antes de usar o IgbRating, você precisa registrá-lo da seguinte forma:

    // in Program.cs file

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

    Você também precisará vincular um arquivo CSS adicional para aplicar o estilo ao IgbRating componente. O seguinte precisa ser colocado no arquivo wwwroot/index.html em um projeto de Assembly da Web do Blazor ou no arquivo Pages/_Host.cshtml em um projeto do Blazor Server:

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

    A maneira mais simples de começar a usar o IgbRating é a seguinte:

    <IgbRating></IgbRating>

    Isso criará um componente de classificação de cinco estrelas que pode ser usado para inserir e ler dados.

    Using Custom Symbols

    O IgbRating componente permite que você use símbolos personalizados no lugar dos símbolos de estrela padrão. Se você quiser usar um símbolo diferente, como SVG, ícone ou outro símbolo unicode, coloque IgbRatingSymbol os componentes entre os colchetes de abertura e fechamento do IgbRating:

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

    O número de símbolos de classificação entre os colchetes de abertura e fechamento do componente de classificação determina o valor máximo.

    Seleção única

    O componente Ignite UI for Blazor Rating tem um único modo de seleção que permite aos usuários fornecer diferentes ícones/elementos para os diferentes valores de classificação. Nesse caso, apenas um dos ícones/elementos pode ser selecionado e refletir o feedback dado pelo usuário.

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

    Lembre-se de que o atributo não funciona com o step modo de seleção única.

    Empty & Selected

    O componente Ignite UI for Blazor Rating permite que os usuários usem diferentes ícones/elementos para o estado vazio e selecionado de um único valor de classificação. É obrigatório fornecer 2 ícones para cada slot (vazio e cheio) ao declarar um símbolo, mesmo que sejam iguais. Por exemplo:

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

    Configuration

    Solteiro

    Ativa o Single modo visual para a classificação. Útil ao usar símbolos que comunicam valores exclusivos, como rostos de emoji de feedback.

    Valor

    O Value atributo define o valor atual do componente.

    Etiqueta

    O Label atributo permite definir o valor do rótulo do componente de classificação.

    Formato do valor

    Uma cadeia de caracteres de formato que define aria-valuetext. Todas as instâncias dele serão substituídas pelo valor atual do controle. Importante para leitores de tela e útil para localização.

    Valor máximo

    O Max atributo define o valor máximo permitido do componente de classificação.

    Passo

    O Step atributo define a fração permitida de etapas entre dois símbolos. Útil ao dividir os símbolos de classificação ao meio.

    Visualização do foco

    O HoverPreview atributo faz com que o componente mostre o possível resultado da seleção do usuário ao passar o mouse. É útil quando você deseja fornecer feedback instantâneo sobre qual pode ser o valor selecionado.

    Somente leitura

    O ReadOnly atributo permite que os usuários definam o IgbRating modo somente leitura. Esse atributo é útil quando você deseja usar o componente apenas para fins informativos.

    Desabilitado

    O Disabled atributo desativa o componente, impossibilitando a seleção de um valor usando o mouse ou o teclado.

    Methods

    Intensificar

    O StepUp método incrementa o valor do componente por n etapas. Determinado pelo step fator.

    Diminuir

    O StepDown método diminui o valor do componente por n etapas. Determinado pelo step fator.

    Eventos

    O IgbRating componente emite dois eventos separados -Hover and Change.

    Evento de foco

    O Hover evento é acionado ao passar o mouse sobre um símbolo. Ele fornece o valor do símbolo sob o cursor do mouse. Útil para criar rótulos de valor personalizados e leituras.

    Evento de mudança

    O Change evento é acionado quando o valor selecionado é alterado.

    Styling

    O IgbRating componente expõe partes CSS para quase todos os seus elementos internos. A tabela a seguir lista todas as partes CSS expostas:

    Nome Descrição
    base O wrapper principal que contém todos os elementos de classificação.
    label A parte do rótulo.
    value-label A parte do rótulo de valor.
    symbols Um wrapper para todos os símbolos de classificação.
    symbol A parte do símbolo padrão encapsulado.
    full A parte dos símbolos completos encapsulados.
    empty A parte dos símbolos vazios encapsulados. 
    igc-rating::part(full) {
  color: var(--ig-primary-500)
}

igc-rating::part(empty) {
  color: var(--ig-secondary-200);
}

    API Reference

    Additional Resources