React Mask Input Overview

    A entrada de máscara Ignite UI for React é 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.

    React Mask Input Example

    Usage

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

    Primeiro, você precisa instalar o pacote npm Ignite UI for React correspondente executando o seguinte comando:

    npm install igniteui-react

    Você precisará importar o IgrMaskInput CSS necessário e registrar seu módulo, assim:

    import { IgrMaskInput, IgrMaskInputModule } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrMaskInputModule.register();

    <IgrMaskInput mask="00000">
    <span slot="prefix">
        <IgrIcon ref={this.iconLocationRef} name="location" collection="material"></IgrIcon>
    </span>
    <span slot="helper-text">ZIP Code</span>
</IgrMaskInput>

    Para obter uma introdução completa ao Ignite UI for React, 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.

    <IgrMaskInput mask="(####) 00-00-00 Ext. 9999">
    <span slot="prefix">
        <IgrIcon ref={this.iconPhoneRef} name="phone" collection="material"></IgrIcon>
    </span>
    <span slot="helper-text">Phone number</span>
</IgrMaskInput>

    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:

    <IgrMaskInput mask="(####) 00-00-00 Ext. 9999" prompt="-"></IgrMaskInput>

    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.

    <IgrMaskInput mask="00/00/0000" placeholder="dd/MM/yyyy"></IgrMaskInput>

    Value Modes

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