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

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

    npm install igniteui-react

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

    import { IgrMaskInput } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

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

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

    <IgrMaskInput mask="(####) 00-00-00 Ext. 9999">
    <span slot="prefix">
        <IgrIcon ref={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 as partes não preenchidas da máscara. Para isso, basta dar qualquer caráter àprompt propriedade:

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

    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.

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

    Value Modes

    EleIgrMaskInput 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

    OIgrMaskInput 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