Web Components Mask Input Overview

    O Ignite UI for Web Components Mask Input é 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.

    Web Components Mask Input Example

    Usage

    Primeiro, você precisa instalar o Ignite UI for Web Components executando o seguinte comando:

    npm install igniteui-webcomponents

    Antes de usar o IgcMaskInputComponent, você precisa registrá-lo da seguinte maneira:

    import { defineComponents, IgcMaskInputComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcMaskInputComponent);

    Para uma introdução completa ao Ignite UI for Web Components, 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 é bem direto. Tudo o que você precisa fazer é fornecer um padrão predeterminado para a propriedade mask da entrada.

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

    <igc-mask-input id="mask-input" mask="(####) 00-00-00 Ext. 9999">
    <igc-icon name="phone" slot="prefix"></igc-icon>
    <span slot="helper-text">Phone number</span>
</igc-mask-input>

    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 à propriedade prompt:

    <igc-mask-input id="mask-input" mask="(####) 00-00-00 Ext. 9999" prompt="-"></igc-mask-input>

    Por padrão, o caractere prompt é sublinhado.

    Placeholder

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

    <igc-mask-input id="mask-input" mask="00/00/0000" placeholder="dd/MM/yyyy"></igc-mask-input>

    Value Modes

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

    Styling

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