Descripción general de la entrada de Web Components

    La entrada Ignite UI for Web Components es un componente en el que el usuario puede introducir datos.

    Web Components Input Example

    To get started we need to import the IgcInputComponent in our typescript file and register the component by calling the defineComponents() function as follows:

    import { defineComponents, IgcInputComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcInputComponent);

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

    After we import the IgcInputComponent component we are ready to start using it, so let's add our first Input.

    <igc-input type="email" label="Subscribe" placeholder="john.doe@mail.com"></igc-input>

    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 usandoIgcInputComponent 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

    The full list of attributes can be found in IgcInputComponent API.

    Styling

    ElIgcInputComponent 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