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

With prefix and suffix slots we can add different content before and after the main content of the Input. In the following sample we will create a new Input field with a text prefix and an icon suffix:

Helper Text

The helper-text slot provides a hint placed below the Input. Let's add some helper text to our phone Input:

Input Sizing

We can allow the user to change the size of the IgcInputComponent using the --ig-size CSS variable. То do this, we will add some radio buttons to display all size values. This way whenever one gets selected, we will change the size of the Input:

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

required - Used to mark the input as required
disabled - Used to disable the input
readonly - Used to mark the input as readonly

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

Styling

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

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);
}