Descripción general del componente Grupo de entrada Angular

PermiteIgxInputGroupComponent al usuario mejorar elementos de entrada como input, select, textarea, etc. Esto se puede lograr añadiendo contenido personalizado como texto, iconos, botones, validación personalizada, etiqueta flotante, etc., a ambos lados, como prefijo, sufijo o pista.

Ejemplo de grupo de entrada Angular

Introducción a Ignite UI for Angular grupo de entrada

Para empezar a utilizar el componente Grupo de entrada Ignite UI for Angular, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:

ng add igniteui-angular

Para obtener una introducción completa al Ignite UI for Angular, lea el tema de introducción.

El siguiente paso es importarlosIgxInputGroupModule en tu archivo app.module.ts.

Ten en cuenta queIgxInputGroupComponent también depende del Angular FormsModule para tener un Formulario Basado en Plantillas funcional:

// app.module.ts

import { FormsModule } from '@angular/forms';
import { IgxInputGroupModule } from 'igniteui-angular/input-group';
// import { IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package


@NgModule({
    ...
    imports: [..., IgxInputGroupModule, FormsModule],
    ...
})
export class AppModule {}

Alternativamente,16.0.0 puedes importarlosIgxInputGroupComponent como una dependencia independiente, o usar elIGX_INPUT_GROUP_DIRECTIVES token para importar el componente y todos sus componentes y directivas de soporte.

// home.component.ts

import { FormsModule } from '@angular/forms';
import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/input-group';
import { IgxIconComponent } from 'igniteui-angular/icon';
// import { IGX_INPUT_GROUP_DIRECTIVES, IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-input-group>
        <igx-prefix>+359</igx-prefix>
        <label igxLabel for="phone">Phone</label>
        <input igxInput [(ngModel)]="value" name="phone" type="tel" maxlength="9" />
        <igx-icon igxSuffix>phone</igx-icon>
    </igx-input-group>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_INPUT_GROUP_DIRECTIVES, IgxIconComponent, FormsModule]
    /* or imports: [IgxInputGroupComponent, IgxPrefixDirective, IgxLabelDirective, IgxInputDirective, IgxIconComponent, IgxSuffixDirective, FormsModule] */
})
export class HomeComponent {
    public value = '123456789';
}

Ahora que tienes importado el módulo o directivas del Grupo de Entrada Ignite UI for Angular, puedes empezar a usar eligx-input-group componente.

Nota

Para usar cualquiera de las directivasigxInput,igxLabel​igx-prefix​igx-suffix oigx-hint bien, tienes que envolverlas en un<igx-input-group> recipiente.

Uso del grupo de entrada Angular

Etiqueta y entrada

Puedes leer sobre lasigxLabel directivas andigxInput, así como su validación, vinculación de datos y API, en la documentación de Etiquetas y Entradas.

Prefijo sufijo

Lasigx-prefix directivas origxPrefix andigx-suffix​igxSuffix o pueden contener o adjuntarse a elementos HTML, cadenas, iconos u incluso otros componentes. En el siguiente ejemplo crearemos un nuevo campo de entrada con un prefijo de cadena y un sufijo de icono:

<igx-input-group>
    <igx-prefix>+359</igx-prefix>
    <label igxLabel for="phone">Phone</label>
    <input igxInput name="phone" type="tel" maxlength="9" />
    <igx-icon igxSuffix>phone</igx-icon>
</igx-input-group>

Consejos

Laigx-hint directiva proporciona un texto auxiliar colocado debajo de la entrada. Puede estar al principio o al final de la entrada, dependiendo del valor de laposition propiedad. Vamos a añadir una pista a nuestra entrada telefónica:

<igx-input-group>
    <igx-prefix>+359</igx-prefix>
    <label igxLabel for="phone">Phone</label>
    <input igxInput name="phone" type="tel" />
    <igx-suffix>
        <igx-icon>phone</igx-icon>
    </igx-suffix>
    <igx-hint position="start">Ex.: +359 888 123 456</igx-hint>
</igx-input-group>

Así es como se ve el campo del teléfono con sugerencia:

Tipos de entrada y token de tipo de grupo de entrada

Los estilos de grupo de entrada pueden modificarse usando latype propiedad deligxInputGroup componente. El componente de grupo de entrada soporta los siguientes tipos:line (por defecto si no se especifica el tipo),border ybox​search Losline​border tipos ybox están hechos específicamente para losMaterial Design temas. Poner esos tipos con otros temas no afectará en cómo se ve el grupo de entrada. Un ejemplo de establecer un tipo específico de forma declarativa:

<igx-input-group type="border">

El uso del token de inyección IGX_input-group_TYPE permite especificar un tipo en un nivel de aplicación para todas las instancias del grupo de entrada. Proporciona una manera fácil de diseñar todos los componentes relacionados a la vez. Para configurar el tipo, use el token de inyección IGX_input-group_TYPE para crear un proveedor DI.

providers: [{provide: IGX_input-group_TYPE, useValue: 'box' }]

Nota

Latype propiedad tiene precedencia sobre un IGX_INPUT_GROUP_TYPE, por lo que un valor de token puede ser anulado a nivel de componente si la propiedad de tipo está establecida explícitamente. La mayoría de losigniteui-angular controles de formulario utilizan internamente el componente de grupo de entrada, o permiten una plantilla personalizada. Establecer un token global también afectará a estos componentes.

Ignite UI for Angular también proporciona estilismo para la entrada detype="file" y soporta todos los tipos y temas de grupos de entrada, solo añade esto a tu plantilla:

<igx-input-group>
    <input igxInput type="file" multiple />
</igx-input-group>

Tema del grupo de entrada

El componente de grupo de entrada soporta varios temas -material,fluent,bootstrap, yindigo-design; Setheme establece automáticamente durante la inicialización de componentes y se infiere a partir de la hoja de estilo que se usa actualmente. Si planeas soportar varios temas en tu aplicación con cambio en tiempo de ejecución, puedes establecer explícitamente el tema usando latheme propiedad Entrada.

<igx-input-group theme="fluent">...</igx-input-group>

Formularios escritos

El componente Ignite UI for Angular grupo de entrada se puede utilizar dentro de formularios reactivos estrictamente tipados, que son los predeterminados a partir del Angular 14. Para obtener más información sobre los formularios mecanografiados, puede consultar Angular documentación oficial.

Validación

Los siguientes ejemplos demuestran cómo configurar la validación de entrada cuando se utilizan formularios reactivos o basados en plantillas.

Formularios basados en plantillas

La validación de formularios basada en plantillas se logra añadiendo atributos de validación, es decir,required etcminlength., alinput elemento.

<form>
    <igx-input-group>
        <label igxLabel for="username">Username</label>
        <input igxInput name="username" type="text" required />
    </igx-input-group>

    <igx-input-group>
        <label igxLabel for="email">Email</label>
        <input igxInput name="email" type="email" required email />
    </igx-input-group>

    <igx-input-group>
        <label igxLabel for="password">Password</label>
        <input igxInput name="password" type="password" required minlength="8" />
    </igx-input-group>

    <button igxButton="contained" igxRipple type="submit">Submit</button>
</form>

Elrequired atributo añade un asterisco junto a la etiqueta, indicando que este campo debe rellenarse. Además, cuandoinput se le aplica validación adicional, comoemail andminlength, esto podría permitir al desarrollador notificar al usuario final requisitos adicionales mediante laigx-hint directiva.

El siguiente ejemplo utiliza enlace de datos bidireccional y demuestra cómo inspeccionar el estado del control exportándolongModel a una variable local.

<form #login="ngForm">
    ...
    <igx-input-group>
        <label igxLabel for="email">Email</label>
        <input igxInput name="email" type="email" [(ngModel)]="user.email" #email="ngModel" required email />
        <igx-hint *ngIf="email.errors?.email">Please enter a valid email</igx-hint>
    </igx-input-group>

    <igx-input-group>
        <label igxLabel for="password">Password</label>
        <input igxInput name="password" type="password"
            [(ngModel)]="user.password" #password="ngModel" required minlength="8" />
        <igx-hint *ngIf="password.errors?.minlength">Password should be at least 8 characters</igx-hint>
    </igx-input-group>

    <button igxButton="contained" igxRipple type="submit">Submit</button>
</form>

El usuario no debería poder enviar el formulario si alguno de los controles del mismo no es válido. Esto podría lograrse habilitando/deshabilitando el botón de envío según el estado del formulario.

El siguiente ejemplo demuestra cómo inspeccionar el estado del formulario exportándolongForm a una variable local.

<form #registrationForm="ngForm">
    <igx-input-group>
        <label igxLabel for="email">Email</label>
        <input igxInput name="email" type="email" [(ngModel)]="user.email" #email="ngModel" required email />
        <igx-hint *ngIf="email.errors?.email">Please enter a valid email</igx-hint>
    </igx-input-group>
    ...

    <button igxButton="contained" igxRipple type="submit" [disabled]="!registrationForm.valid">Submit</button>
</form>

El resultado de las configuraciones anteriores puede verse en la muestra siguiente. Empieza a escribir en los campos de Correo electrónico y Contraseña y verás que seigx-hint muestra si los valores introducidos no son válidos. El ejemplo también demuestra cómo activar la visibilidad de la contraseña usando laigx-icon​igx-suffix directiva y.

Formas reactivas

La validación de formulario reactiva se logra agregando funciones de validación directamente al modelo de control de formulario en la clase de componente. Después de crear el control en la clase de componente, se debe asociar con un elemento de control de formulario en la plantilla.

public registrationForm: FormGroup<User>;

constructor(fb: FormBuilder) {
    this.registrationForm = fb.group({
        username: ['', { nonNullable: true, validators: [Validators.required] }],
        email: ['', { nonNullable: true, validators: [Validators.required, Validators.email] }],
        password: ['', { nonNullable: true, validators: [Validators.required, Validators.minLength(8)] }]
    });
}

<form [formGroup]="registrationForm">
    <igx-input-group>
        <label igxLabel for="username">Username</label>
        <input igxInput name="username" type="text" formControlName="username" />
    </igx-input-group>

    <igx-input-group>
        <label igxLabel for="email">Email</label>
        <input igxInput name="email" type="email" formControlName="email" />
    </igx-input-group>

    <igx-input-group>
        <label igxLabel for="password">Password</label>
        <input igxInput name="password" type="password" formControlName="password" />
    </igx-input-group>

    <button igxButton="contained" igxRipple type="submit">Submit</button>
</form>

Similar al ejemplo de formulario basado en plantillas, al tener validación adicional comoemail andminlength, se podría usar unaigx-hint directiva para notificar al usuario final si la validación ha fallado.

El siguiente ejemplo demuestra cómo acceder al control mediante unget método e inspeccionar su estado. También demuestra cómo activar/desactivar el botón de enviar inspeccionando el estado de laFormGroup.

public get email() {
    return this.registrationForm.get('email');
}

public get password() {
    return this.registrationForm.get('password');
}

<form [formGroup]="registrationForm">
    ...
    <igx-input-group>
        <label igxLabel for="email">Email</label>
        <input igxInput name="email" type="email" formControlName="email" />
        <igx-hint *ngIf="email.errors?.email">Please enter a valid email</igx-hint>
    </igx-input-group>

    <igx-input-group>
        <label igxLabel for="password">Password</label>
        <input igxInput name="password" type="password" formControlName="password" />
        <igx-hint *ngIf="password.errors?.minlength">Password should be at least 8 characters</igx-hint>
    </igx-input-group>

    <button igxButton="contained" igxRipple type="submit" [disabled]="!registrationForm.valid">Submit</button>
</form>

El resultado de las configuraciones anteriores puede verse en la muestra siguiente. Similar al ejemplo de formulario basado en plantillas, también demuestra cómo activar la visibilidad de la contraseña usando laigx-icon​igx-suffix directiva y.

Validadores personalizados

Algunos campos de entrada pueden requerir una validación personalizada y esto se puede lograr mediante validadores personalizados. Cuando el valor no es válido, el validador generará un conjunto de errores que podrían usarse para mostrar un mensaje de error específico.

A continuación se muestra un ejemplo de un validador de formulario reactivo personalizado simple que valida si la dirección de correo electrónico ingresada contiene un valor predefinido y genera diferentes errores según dónde ocurre el valor.

public registrationForm: FormGroup<User>;

constructor(fb: FormBuilder) {
    this.registrationForm = fb.group({
        email: ['', {
            nonNullable: true,
            validators: [
                Validators.required,
                Validators.email,
                this.emailValidator('infragistics')
            ]
        }],
        ...
    });
}

private emailValidator(val: string): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
        const value = control.value?.toLowerCase();
        const localPartRegex = new RegExp(`(?<=(${val})).*[@]`);
        const domainRegex = new RegExp(`(?<=[@])(?=.*(${val}))`);
        const returnObj: ValidatorErrors = {};

        if (value && localPartRegex.test(value)) {
            returnObj.localPart = true;
        }
        if (value && domainRegex.test(value)) {
            returnObj.domain = true;
        }

        return returnObj;
    }
}

Validación entre campos

En algunos casos, la validación de un control puede depender del valor de otro. Para evaluar ambos controles en un único validador personalizado, la validación debe realizarse en un control ancestral común, es decir, elFormGroup. El validador recupera los controles hijos llamando alFormGroup método de elget, compara los valores y si la validación falla, se genera un conjunto de errores para elFormGroup.

Esto solo hará que el estado del formulario sea inválido. Para establecer el estado del control, podríamos usar elsetErrors método y añadir manualmente los errores generados. Luego, cuando la validación tiene éxito, los errores pueden eliminarse usando elsetValue método que reejecutará la validación del control para el valor proporcionado.

El siguiente ejemplo demuestra una validación entre campos donde la Contraseña no debe contener la dirección de correo electrónico y la Contraseña repetida debe coincidir con la Contraseña.

private passwordValidator(): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
        const email = control.get('email');
        const password = control.get('password');
        const repeatPassword = control.get('repeatPassword');
        const returnObj: ValidatorErrors = {};

        if (email.value
            && password.value
            && password.value.toLowerCase().includes(email.value)) {
            password.setErrors({ ...password.errors, containsEmail: true });
            returnObj.containsEmail = true;
        }

        if (password
            && repeatPassword
            && password.value !== repeatPassword.value) {
            repeatPassword.setErrors({ ...repeatPassword.errors, mismatch: true });
            returnObj.mismatch = true;
        }

        if (!returnObj.containsEmail && password.errors?.containsEmail) {
            password.setValue(password.value);
        }

        if (!returnObj.mismatch && repeatPassword.errors?.mismatch) {
            repeatPassword.setValue(repeatPassword.value);
        }

        return returnObj;
    }
}

Para añadir el validador personalizado a élFormGroup, debe pasarse como un segundo argumento al crear el formulario.

public registrationForm: FormGroup<User>;

constructor(fb: FormBuilder) {
    this.registrationForm = fb.group({
        email: ['', {
            nonNullable: true,
            validators: [
                Validators.required,
                Validators.email,
                this.emailValidator('infragistics')
            ]
        }],
        ...
    },
    {
        validators: [this.passwordValidator()]
    });
}

El siguiente ejemplo demuestra cómo los validadores integrados podían usarse en combinación con el personalizadoemailValidator y el campopasswordValidator cruzado de los ejemplos anteriores.

Estilismo

Input Group Theme Property Map

Cuando modificas una propiedad primaria, todas las propiedades dependientes relacionadas se actualizan automáticamente:

Material Fluido Bootstrap Añil

Propiedad principal	Propiedad dependiente	Descripción
$box antecedentes	$box-fondo-flotador	Pasa el cursor sobre el fondo de la caja de entrada
	$box-enfoque de fondo	Fondo de enfoque para la caja de entrada
	$box-trasfondo para personas con discapacidad	Antecedentes del estado con discapacidad
	$placeholder color	Color de texto provisional
	$hover-color de marcador	Pasa el cursor al color del texto provisional
	$idle-text-color	Color de texto predeterminado
	$filled-text-color	Color de texto cuando se llena la entrada
	$filled-texto-hover-color	El color del texto de entrada en el estado relleno al pasar el cursor
	$focused-color-texto	Color del texto cuando la entrada está enfocada
	$idle-color secundario	Color secundario del texto cuando está inactivo
	$input-prefijo-color	Color de texto para el prefijo dentro del cuadro de entrada
	$input-prefijo-color--rellenado	Color de texto para el prefijo rellenado
	$input-prefijo-color--enfocado	Color de texto para el prefijo enfocado
	$input-sufijo-color	Color de texto para el sufijo dentro del cuadro de entrada
	$input-sufijo-color--rellenado	Color de texto para el sufijo rellenado
	$input-sufijo-color--enfocado	Color de texto para el sufijo enfocado
	$disabled-placeholder-color	Color marcador cuando se desactiva la entrada
	$disabled-text-color	Color del texto cuando se desactiva la entrada
$idle-Bottom-line-color	$hover-bottom-line-color	Pasa el cursor color para la línea inferior bajo la entrada
	$focused-color en el fondo	Color enfocado para el resultado final
	$focused-color secundario	El color de la etiqueta en el estado enfocado
	$border color	El color del borde para los grupos de entrada del borde de tipo
	$focused-color del borde	El color de borde de entrada enfocado para grupos de entrada de borde de tipo
$border color	$hover-color de borde	Coloca el color del cursor en el borde de entrada
	$focused-color del borde	Color del borde cuando la entrada está enfocada
	$focused-color secundario	El color de la etiqueta en el estado enfocado
$input-prefijo-fondo	$input-prefijo-color	Color de texto para el prefijo dentro del cuadro de entrada
	$input-prefijo-fondo--rellenado	El color de fondo de un prefijo de entrada en el estado rellenado
	$input-prefijo-fondo--enfocado	El color de fondo de un prefijo de entrada en el estado focalizado
$input-sufijo-fondo	$input-sufijo-color	Color de texto para el sufijo dentro del cuadro de entrada
	$input-sufijo-fondo--filled	El color de fondo de un sufijo de entrada en el estado rellenado
	$input-sufijo-fondo--enfocado	El color de fondo de un sufijo de entrada en el estado de enfoque
$search antecedentes	$placeholder color	Color de texto marcador de posición dentro de la entrada de búsqueda
	$hover-color de marcador	Pasa el cursor al color del texto provisional
	$idle-text-color	Color de texto para la entrada de búsqueda
	$idle-color secundario	Color secundario del texto cuando está inactivo
	$filled-text-color	Color de texto cuando se llena la entrada de búsqueda
	$filled-texto-hover-color	Coloca el cursor en el color del texto cuando la entrada de búsqueda está llena
	$focused-color-texto	Color de texto cuando la entrada de búsqueda está enfocada
	$input-prefijo-color	Prefijo color dentro de la búsqueda
	$input-sufijo-color	Color sufijo dentro de la búsqueda
	$input-prefijo-color--rellenado	Prefijo color cuando se llena la entrada
	$input-sufijo-color--rellenado	Sufijo color cuando se llena la entrada
	$input-prefijo-color--enfocado	Prefijo color cuando la entrada está enfocada
	$input-sufijo-color--enfocado	Sufijo color cuando la entrada está enfocada
	$search-trasfondo para personas con discapacidad	Antecedentes cuando se desactiva la entrada de búsqueda
	$disabled-placeholder-color	Color provisional cuando está desactivado
	$disabled-text-color	Color del texto cuando está desactivado

Propiedad principal	Propiedad dependiente	Descripción
$border color	$hover-color de borde	Coloca el color del cursor en el borde de entrada
	$focused-color del borde	Color del borde cuando la entrada está enfocada
	$focused-color secundario	El color de la etiqueta en el estado enfocado
$input-prefijo-fondo	$input-sufijo-fondo	El color de fondo de un sufijo de entrada en estado inactivo
	$input-prefijo-color	Color de texto para el prefijo dentro del cuadro de entrada
	$input-prefijo-color--rellenado	Color de texto para el prefijo rellenado
$input-sufijo-fondo	$input-prefijo-fondo	El color de fondo de un prefijo de entrada en estado inactivo
	$input-sufijo-color	Color de texto para el sufijo dentro del cuadro de entrada
	$input-sufijo-color--rellenado	Color de texto para el sufijo rellenado
$search antecedentes	$placeholder color	Color de texto marcador de posición dentro de la entrada de búsqueda
	$hover-color de marcador	Pasa el cursor al color del texto provisional
	$idle-color secundario	Color secundario del texto cuando está inactivo
	$idle-text-color	Color de texto para la entrada de búsqueda
	$filled-text-color	Color de texto cuando se llena la entrada de búsqueda
	$filled-texto-hover-color	Coloca el cursor en el color del texto cuando la entrada de búsqueda está llena
	$focused-color-texto	Color de texto cuando la entrada de búsqueda está enfocada
	$input-prefijo-color	Prefijo color dentro de la búsqueda
	$input-sufijo-color	Color sufijo dentro de la búsqueda
	$input-prefijo-color--rellenado	Prefijo color cuando se llena la entrada
	$input-sufijo-color--rellenado	Sufijo color cuando se llena la entrada
	$input-prefijo-color--enfocado	Prefijo color cuando la entrada está enfocada
	$input-sufijo-color--enfocado	Sufijo color cuando la entrada está enfocada
	$search-trasfondo para personas con discapacidad	Antecedentes cuando se desactiva la entrada de búsqueda
	$disabled-placeholder-color	Color provisional cuando está desactivado
	$disabled-text-color	Color del texto cuando está desactivado

Propiedad principal	Propiedad dependiente	Descripción
$border color	$focused-color del borde	Color del borde cuando la entrada está enfocada
	$focused-color secundario	El color de la etiqueta en el estado enfocado
$input-prefijo-fondo	$input-sufijo-fondo	El color de fondo de un sufijo de entrada en estado inactivo
	$input-prefijo-color	Color de texto para el prefijo dentro del cuadro de entrada
	$input-prefijo-color--rellenado	Color de texto para el prefijo rellenado
$input-sufijo-fondo	$input-prefijo-fondo	El color de fondo de un prefijo de entrada en estado inactivo
	$input-sufijo-color	Color de texto para el sufijo dentro del cuadro de entrada
	$input-sufijo-color--rellenado	Color de texto para el sufijo rellenado
$search antecedentes	$placeholder color	Color de texto marcador de posición dentro de la entrada de búsqueda
	$hover-color de marcador	Pasa el cursor al color del texto provisional
	$idle-color secundario	Color secundario del texto cuando está inactivo
	$idle-text-color	Color de texto para la entrada de búsqueda
	$filled-text-color	Color de texto cuando se llena la entrada de búsqueda
	$filled-texto-hover-color	Coloca el cursor en el color del texto cuando la entrada de búsqueda está llena
	$focused-color-texto	Color de texto cuando la entrada de búsqueda está enfocada
	$input-prefijo-color	Prefijo color dentro de la búsqueda
	$input-sufijo-color	Color sufijo dentro de la búsqueda
	$input-prefijo-color--rellenado	Prefijo color cuando se llena la entrada
	$input-sufijo-color--rellenado	Sufijo color cuando se llena la entrada
	$input-prefijo-color--enfocado	Prefijo color cuando la entrada está enfocada
	$input-sufijo-color--enfocado	Sufijo color cuando la entrada está enfocada
	$search-trasfondo para personas con discapacidad	Antecedentes cuando se desactiva la entrada de búsqueda
	$disabled-placeholder-color	Color provisional cuando está desactivado
	$disabled-text-color	Color del texto cuando está desactivado

Propiedad principal	Propiedad dependiente	Descripción
$idle-Bottom-line-color	$hover-bottom-line-color	Pasa el cursor color para la línea inferior bajo la entrada
	$focused-color en el fondo	Color enfocado para el resultado final
$border color	$hover-color de borde	Coloca el color del cursor en el borde de entrada
	$focused-color del borde	Color del borde cuando la entrada está enfocada
$input-prefijo-fondo	$input-prefijo-color	Color de texto para el prefijo dentro del cuadro de entrada
	$input-prefijo-fondo--rellenado	El color de fondo de un prefijo de entrada en el estado rellenado
	$input-prefijo-fondo--enfocado	El color de fondo de un prefijo de entrada en el estado focalizado
$input-sufijo-fondo	$input-sufijo-color	Color de texto para el sufijo dentro del cuadro de entrada
	$input-sufijo-fondo--filled	El color de fondo de un sufijo de entrada en el estado rellenado
	$input-sufijo-fondo--enfocado	El color de fondo de un sufijo de entrada en el estado de enfoque
$search antecedentes	$placeholder color	Color de texto marcador de posición dentro de la entrada de búsqueda
	$hover-color de marcador	Pasa el cursor al color del texto provisional
	$box-fondo-flotador	Pase el cursor al fondo para la entrada de búsqueda
	$idle-text-color	Color de texto para la entrada de búsqueda
	$filled-text-color	Color de texto cuando se llena la entrada de búsqueda
	$filled-texto-hover-color	Coloca el cursor en el color del texto cuando la entrada de búsqueda está llena
	$focused-color-texto	Color de texto cuando la entrada de búsqueda está enfocada
	$input-prefijo-color	Prefijo color dentro de la búsqueda
	$input-sufijo-color	Color sufijo dentro de la búsqueda
	$search-trasfondo para personas con discapacidad	Antecedentes cuando se desactiva la entrada de búsqueda
	$disabled-placeholder-color	Color provisional cuando está desactivado
	$disabled-text-color	Color del texto cuando está desactivado

Lo primero que tenemos que hacer para empezar con el estilo del grupo de entrada es incluir elindex archivo en nuestro archivo de estilo:

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

Para personalizar la apariencia de los grupos de entrada, puedes crear un nuevo tema ampliando elinput-group-theme. Este enfoque permite anular solo los parámetros que quieres cambiar, mientras que el resto se gestiona automáticamente por el tema base.

Incluso especificando solo unos pocos parámetros principales, como los colores para el borde o el fondo, obtendrá un grupo de entrada con estilo completo con estilos basados en estados coherentes (desplazamiento, foco, etc.) aplicados automáticamente.

He aquí un ejemplo sencillo:

$custom-input-group: input-group-theme(
    $box-background: #57a5cd,
    $border-color: #57a5cd,
);

El último paso es incluir el tema recién creado:

@include css-vars($custom-input-group);

En el ejemplo siguiente, puedes ver cómo usar el grupo de entrada con variables CSS personalizadas te permite crear un diseño que visualmente se asemeja al que se usa en elCarbon sistema de diseño.

Nota

En el ejemplo se usa el esquema Indigo Light.

Nota

Si tu página incluye varios tipos de grupos de entrada — comobox,border​line osearch, — lo mejor es asignar las variables de tema al tipo específico de grupo de entrada.
Por ejemplo:
Úsalo.igx-input-group--box al estilizar entradas tipo caja. Úsalo.igx-input-group--search al dirigirse a entradas de búsqueda. Esto ayuda a evitar conflictos de estilo entre diferentes tipos de entrada. Por ejemplo, poner un oscuro$box-background global podría hacer que los bordes de las entradas de borde o línea se vuelvan invisibles (normalmente apareciendo blancos).

Styling with Tailwind

Puedes diseñar el grupo de entrada usando nuestras clases utilitarias personalizadas de Tailwind. Asegúrate de configurar primero a Tailwind.

Junto con la importación de viento de cola en su hoja de estilo global, puede aplicar las utilidades de tema deseadas de la siguiente manera:

@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

El archivo de utilidad incluye variantes tantolight comodark de tema.

• Usalight-* clases para el tema ligero.
• Usadark-* clases para el tema oscuro.
• Añadir el nombre del componente después del prefijo, por ejemplo, ,light-input-group,dark-input-group.

Una vez aplicadas, estas clases permiten cálculos dinámicos de temas. Desde ahí, puedes anular las variables CSS generadas usandoarbitrary properties. Después de los dos puntos, proporciona cualquier formato de color CSS válido (HEX, variable CSS, RGB, etc.).

Puedes encontrar la lista completa de propiedades en el tema de grupo de entrada. La sintaxis es la siguiente:

<article class="sample-column">
    <igx-input-group class="!light-input-group ![--box-background:#A3C7B2] ![--focused-secondary-color:#3A5444]" type="box">
        <igx-prefix>+359</igx-prefix>
        <label igxLabel for="phone">Phone</label>
        <input type="tel" igxInput name="phone" />
        <igx-suffix>
            <igx-icon>phone</igx-icon>
        </igx-suffix>
        <igx-hint position="start">Ex.: +359 888 123 456</igx-hint>
    </igx-input-group>

    <igx-input-group class="!light-input-group ![--border-color:#7B9E89]" type="border">
        ...
    </igx-input-group>

    <igx-input-group class="!light-input-group ![--search-background:#A3C7B2] ![--focused-secondary-color:#3A5444]" type="search">
        ...
    </igx-input-group>
</article>

Nota

El signo de exclamación(!) es necesario para asegurar que la clase de utilidad tenga prioridad. Tailwind aplica estilos en capas y, sin marcar estos estilos como importantes, serán anulados por el tema predeterminado del componente.

Al final, tus entradas deberían verse así:

Referencias de API

• DirectivaIgxInput
• Directiva IgxHint
• Tipos de grupos de entrada Igx
• Componente IgxInputGroup
• Estilos de componentes IgxInputGroup

Dependencias temáticas

• Tema IgxButton
• Tema IgxIcon

Recursos adicionales

Temas relacionados:

• Etiqueta y entrada
• Integración de formularios reactivos

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

• Ignite UI for Angular Foros
• Ignite UI for Angular GitHub