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 usar o IgbMaskInput, você precisa registrá-lo 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 ao IgbMaskInput 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" />

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

    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 obrigatórias forem preenchidas (nenhuma posição preenchida/valor vazio ainda é uma responsabilidade de required). Isso se aplica tanto a entradas autônomas quanto quando incluídas em um formulário.

    Applying Mask

    Aplicar a máscara é bastante simples. Tudo o que você precisa fazer é fornecer um padrão predeterminado para a Mask 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 partes não preenchidas da máscara. Para fazer isso, basta fornecer qualquer caractere à Prompt propriedade:

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

    Por padrão, o caractere prompt é sublinhado.

    Placeholder

    Os desenvolvedores também podem aproveitar a Placeholder propriedade, que serve ao propósito do atributo de espaço reservado de entrada nativo. Se nenhum valor for fornecido para o espaço reservado, o valor da máscara será usado como tal.

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

    Value Modes

    O IgbMaskInput expõe uma ValueMode propriedade que permite escolher entre raw e withFormatting opções para configurar qual valor de entrada (formatado ou bruto) vincular em seu formulário quando uma máscara específica é aplicada. Por padrão, ValueMode é definido como bruto. Experimente você mesmo no exemplo abaixo:

    Styling

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