Descripción general de la entrada React

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

    React Input Example

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

    npm install igniteui-react

    Luego tendrás que importar elIgrInput CSS necesario y registrar su módulo, así:

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

    <IgrInput type="email" label="Subscribe"></IgrInput>

    Prefix & Suffix

    Conprefix ranuras ysuffix podemos añadir contenido diferente antes y después del contenido principal de la entrada. En el siguiente ejemplo crearemos un nuevo campo de entrada con un prefijo de texto y un sufijo de icono:

    Helper Text

    Lahelper-text ranura proporciona una pista situada debajo de la Entrada. Vamos a añadir algo de texto de ayuda a nuestra entrada del móvil:

    Input Sizing

    Podemos permitir que el usuario cambie el tamaño de usandoIgrInput la--ig-size variable CSS. Si lo hacemos, añadiremos algunos botones de opción para mostrar todos los valores de tamaño. De este modo, cada vez que se selecciona uno, cambiaremos el tamaño de la entrada:

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

    • required- Usado para marcar la entrada según se requiera
    • disabled- Usado para desactivar la entrada
    • readonly- Usado para marcar la entrada como solo lectura

    Styling

    ElIgrInput 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-input::part(input) {
  background-color: var(--ig-primary-100);
  border-color: var(--ig-secondary-500);
  box-shadow: none;
}

igc-input::part(label) {
  color: var(--ig-gray-700);
}

igc-input::part(prefix),
igc-input::part(suffix) {
  color: var(--ig-primary-600-contrast);
  background-color: var(--ig-primary-600);
  border-color: var(--ig-secondary-600);
}

    API References

    Additional Resources