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

    The IgcMaskInputComponent component exposes CSS parts for almost all of its inner elements. The following table lists all of the exposed CSS parts:

    Name Descrição
    container The main wrapper that holds all main input elements.
    input The native input element.
    label The native label element.
    prefix The prefix wrapper.
    suffix The suffix wrapper.
    helper-text The helper text wrapper. 
    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