Blazor Mask Input Overview

    A entrada de máscara Ignite UI for Blazor é um campo de entrada que permite ao desenvolvedor controlar a entrada do usuário e formatar o valor visível, com base em regras configuráveis. Ele fornece diferentes opções de entrada e facilidade de uso e configuração.

    Blazor Mask Input Example

    Usage

    Antes de usá-losIgbMaskInput, você precisa registrá-los da seguinte forma:

    // in Program.cs file

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

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

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

    Para uma introdução completa ao Ignite UI for Blazor, leia o tópico Comecando.

    Mask Rules

    A tabela abaixo mostra as regras de máscara integradas suportadas:

    Personagem de máscara Descrição
    0 Caractere numérico [0-9]. A entrada é obrigatória.
    9 Caractere numérico [0-9]. A entrada é opcional.
    # Caractere de dígito [0-9], sinal de mais (+) ou menos (-). A entrada é obrigatória.
    eu Caractere de letra. Entrada obrigatória.
    ? Caractere de letra. A entrada é opcional.
    UM Caractere alfanumérico (letra ou dígito). Entrada obrigatória.
    um Caractere alfanumérico (letra ou dígito). A entrada é opcional.
    & Qualquer caractere do teclado. Entrada é obrigatória.
    C Qualquer caractere do teclado. A entrada é opcional.
    \ Escapa de uma máscara e a transforma em um literal.

    Essas flags também participam da validação do componente – ou seja, a entrada se torna inválida se algumas, mas não todas, as posições exigidas forem preenchidas (nenhuma posição preenchida/valor vazio ainda é responsabilidade).required Isso se aplica tanto a entradas independentes quanto quando incluídas em um formulário.

    Applying Mask

    Aplicar a máscara é bem simples. Tudo o que você precisa fazer é fornecer um padrão pré-determinado para aMask propriedade da entrada.

    No exemplo abaixo, aplicaremos uma máscara para um número de telefone com um código de ramal.

    <IgbMaskInput @ref="MaskInputRef" Mask="(####) 00-00-00 Ext. 9999">
    <IgbIcon IconName="phone" Collection="material" slot="prefix"></IgbIcon>
    <span slot="helper-text">Phone number</span>
</IgbMaskInput>

    Depois disso, você deverá ver o seguinte no seu navegador:

    Prompt Character

    Os desenvolvedores podem personalizar o símbolo de prompt usado para as partes não preenchidas da máscara. Para isso, basta dar qualquer caráter àPrompt propriedade:

    <IgbMaskInput @ref="MaskInputRef" Mask="(####) 00-00-00 Ext. 9999" Prompt="-"></IgbMaskInput>

    Por padrão, oprompt personagem é sublinhado.

    Placeholder

    Desenvolvedores também podem aproveitar aPlaceholder propriedade, que serve ao propósito do atributo de entrada nativa. Se nenhum valor for fornecido para o marcador de lugar, o valor da máscara é usado dessa forma.

    <IgbMaskInput @ref="MaskInputRef" Mask="00/00/0000" Placeholder="dd/MM/yyyy"></IgbMaskInput>

    Value Modes

    EleIgbMaskInput expõe umaValueMode propriedade que permite escolher entreraw ewithFormatting opções para configurar qual valor de entrada (formatado ou bruto) deve ser vinculado no seu formulário quando uma máscara específica é aplicada. Por padrão,ValueMode está definido pararaw. Experimente você mesmo no exemplo abaixo:

    Styling

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

    Nome Descrição
    container O wrapper principal que contém todos os principais elementos de entrada.
    input O elemento de entrada nativo.
    label O elemento de rótulo nativo.
    prefix O wrapper de prefixo.
    suffix O wrapper de sufixo.
    helper-text O wrapper de texto auxiliar. 
    igc-mask-input::part(input) {
  background-color: var(--ig-primary-100);
  border-color: var(--ig-secondary-500);
  box-shadow: none;
}

igc-mask-input::part(input)::placeholder {
  color: var(--ig-primary-100-contrast);
}

    Assumptions and limitations

    • A entrada mascarada não expõe um atributo de tipo, pois é sempre uma entrada do tipo text.
    • O comportamento desfazer/refazer não é suportado no momento.

    API References

    Additional Resources