Blazor Mask Input Overview

    La Ignite UI for Blazor Entrada de máscara es un campo de entrada que permite al desarrollador controlar la entrada del usuario y dar formato al valor visible, en función de reglas configurables. Proporciona diferentes opciones de entrada y facilidad de uso y configuración.

    Blazor Mask Input Example

    Usage

    Antes de usarlosIgbMaskInput, debes registrarlo de la siguiente manera:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbMaskInputModule));

    También tendrás que vincular un archivo CSS adicional para aplicar el estilo alIgbMaskInput componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de ensamblador web Blazor o en el archivo Pages/_Host.cshtml de un proyecto Blazor Server:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    Para una introducción completa al Ignite UI for Blazor, lee el tema Empezar.

    Mask Rules

    La siguiente tabla muestra las reglas de máscara integradas admitidas:

    Personaje de máscara Descripción
    0 Carácter de dígito [0-9]. Se requiere entrada.
    9 Carácter de dígito [0-9]. La entrada es opcional.
    # Carácter de dígito [0-9], signo más (+) o menos (-). Se requiere entrada.
    l Carácter de letra. Se requiere entrada.
    ? Carácter de letra. La entrada es opcional.
    A Carácter alfanumérico (letra o dígito). Se requiere entrada.
    a Carácter alfanumérico (letra o dígito). La entrada es opcional.
    & Cualquier carácter del teclado. Se requiere entrada.
    C Cualquier carácter del teclado. La entrada es opcional.
    \ Escapa de una bandera de máscara y la convierte en literal.

    Estas banderas también participan en la validación de componentes, es decir, la entrada se vuelve inválida si se llenan algunas, pero no todas, las posiciones requeridas (ningún valor lleno o vacío sigue siendo responsabilidad derequired ella). Esto se aplica tanto a entradas independientes como cuando se incluyen en un formulario.

    Applying Mask

    Aplicar la mascarilla es bastante sencillo. Solo tienes que proporcionar un patrón predeterminado para laMask propiedad de la entrada.

    En el siguiente ejemplo, aplicaremos una máscara para un número de teléfono con un código de extensión.

    <IgbMaskInput @ref="MaskInputRef" Mask="(####) 00-00-00 Ext. 9999">
    <IgbIcon IconName="phone" Collection="material" slot="prefix"></IgbIcon>
    <span slot="helper-text">Phone number</span>
</IgbMaskInput>

    Después de eso deberías ver lo siguiente en tu navegador:

    Prompt Character

    Los desarrolladores pueden personalizar el símbolo de indicación usado para las partes sin rellenar de la máscara. Para ello, simplemente aporta cualquier carácter a laPrompt propiedad:

    <IgbMaskInput @ref="MaskInputRef" Mask="(####) 00-00-00 Ext. 9999" Prompt="-"></IgbMaskInput>

    Por defecto, elprompt carácter es guion de guion.​

    Placeholder

    Los promotores también pueden aprovechar laPlaceholder propiedad, que cumple la función del atributo temporal de entrada nativa. Si no se proporciona valor para el marcador de posición, el valor de la máscara se utiliza como tal.

    <IgbMaskInput @ref="MaskInputRef" Mask="00/00/0000" Placeholder="dd/MM/yyyy"></IgbMaskInput>

    Value Modes

    RevelaIgbMaskInput unaValueMode propiedad que te permite elegir entreraw opcioneswithFormatting y opciones para configurar qué valor de entrada (formateado o en bruto) vincular en tu formulario cuando se aplica una máscara específica. Por defecto,ValueMode está configurado comoraw. Pruébalo tú mismo en el ejemplo de abajo:

    Styling

    ElIgbMaskInput componente expone las piezas CSS de casi todos sus elementos internos. La siguiente tabla enumera todas las partes CSS expuestas:

    Nombre Descripción
    container El contenedor principal que contiene todos los elementos de entrada principales.
    input El elemento de entrada nativo.
    label El elemento de etiqueta nativo.
    prefix El contenedor de prefijo.
    suffix El contenedor del sufijo.
    helper-text El contenedor 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

    • La entrada enmascarada no expone un atributo de tipo ya que siempre es una entrada de tipo texto.
    • Actualmente no se admite el comportamiento de deshacer/rehacer.

    API References

    Additional Resources