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.

    These flags also participate in the component validation - i.e., the input becomes invalid if some but not all required positions are filled (no positions filled/empty value is still a responsibility of required). This applies to both stand-alone inputs and when included in a form.

    Applying Mask

    Applying the mask is pretty straightforward. All you need to do is provide a predetermined pattern to the mask property of the input.

    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

    Developers can customize the prompt symbol used for unfilled parts of the mask. To do this, simply provide any character to the prompt property:

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

    By default, the prompt character is underscore.

    Placeholder

    Developers can also take advantage of the placeholder property, which serves the purpose of the native input placeholder attribute. If no value is provided for the placeholder, the value of the mask is used as such.

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

    Value Modes

    The IgrMaskInput exposes a valueMode property that lets you choose between raw and withFormatting options to configure which input value (formatted or raw) to bind in your form when a specific mask is applied. By default, valueMode is set to raw. Try it for yourself in the example below:

    Styling

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

    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