Descripción general de la entrada React

    La Ignite UI for React Input es un componente donde el usuario puede ingresar datos.

    Ejemplo de entrada React

    EXAMPLE
    TSX
    CSS

    ¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.

    Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:

    npm install igniteui-react
    cmd

    Luego necesitarás importar IgrInput, su CSS necesario y registrar su módulo, así:

    import { IgrInputModule, IgrInput } from 'igniteui-react';
    import 'igniteui-webcomponents/themes/light/bootstrap.css';
    IgrInputModule.register();
    tsx
    <IgrInput type="email" label="Subscribe"></IgrInput>
    tsx

    Prefijo sufijo

    Con espacios prefix y suffix podemos agregar diferentes contenidos antes y después del contenido principal del Input. En el siguiente ejemplo crearemos un nuevo campo de entrada con un prefijo de texto y un sufijo de icono:

    EXAMPLE
    TSX
    CSS

    Ignite UI for React | CTA Banner

    Texto auxiliar

    La ranura helper-text proporciona una pista colocada debajo de la Entrada. Agreguemos un texto de ayuda a la entrada de nuestro teléfono:

    EXAMPLE
    TSX
    CSS

    Tamaño de entrada

    Podemos permitir que el usuario cambie el tamaño de IgrInput usando la variable CSS--ig-size. Para hacer esto, agregaremos algunos botones de opción para mostrar todos los valores de tamaño. De esta manera, cada vez que se seleccione uno, cambiaremos el tamaño de la Entrada:

    EXAMPLE
    TSX
    index.css
    InputSizeStyling.css

    En el ejemplo anterior hemos demostrado el uso de los siguientes atributos:

    • required: se utiliza para marcar la entrada como requerida
    • disabled: se utiliza para deshabilitar la entrada.
    • readonly: se utiliza para marcar la entrada como de solo lectura

    Estilo

    El componente Entrada expone partes CSS para casi todos sus elementos internos. La siguiente tabla enumera todas las partes CSS expuestas por la entrada:

    Nombre Descripción
    envase El contenedor principal que contiene todos los elementos de entrada principales.
    aporte El elemento de entrada nativo.
    etiqueta El elemento de etiqueta nativo.
    prefijo El contenedor de prefijo.
    sufijo El contenedor del sufijo.
    texto de ayuda El contenedor de texto auxiliar.
    igc-input::part(input) {
        background-color: rgb(169, 214, 229);
        border-color: rgb(42, 111, 151);
    }
    
    igc-input::part(label) {
        color: rgb(1, 42, 74);
    }
    
    igc-input::part(prefix),
    igc-input::part(suffix) {
        color: white;
        border-color: rgb(42, 111, 151);
        background-color: rgb(70, 143, 175);
    }
    scss

    EXAMPLE
    TSX
    index.css
    InputStyling.css

    Referencias de API

    Recursos adicionales