Descripción general de la entrada Web Components
La Ignite UI for Web Components es un componente donde el usuario puede ingresar datos.
Web Components Input Example
Para comenzar, necesitamos importar IgcInputComponent
en nuestro archivo mecanografiado y registrar el componente llamando a la función defineComponents() de la siguiente manera:
import { defineComponents, IgcInputComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
defineComponents(IgcInputComponent);
Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Introducción.
Después de importar el IgcInputComponent
componente, estamos listos para comenzar a usarlo, así que agreguemos nuestra primera entrada.
<igc-input type="email" label="Subscribe" placeholder="john.doe@mail.com"></igc-input>
Prefix & Suffix
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:
Helper Text
La ranura helper-text
proporciona una pista colocada debajo de la Entrada. Agreguemos un texto de ayuda a la entrada de nuestro teléfono:
Input Sizing
Podemos permitir que el usuario cambie el tamaño de IgcInputComponent
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:
En el ejemplo anterior hemos demostrado el uso de los siguientes atributos:
required
: se utiliza para marcar la entrada como requeridadisabled
: se utiliza para deshabilitar la entrada.readonly
: se utiliza para marcar la entrada como de solo lectura
La lista completa de atributos se puede encontrar en la API IgcInputComponent
.
Styling
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);
}