Descripción general del componente Grupo de entrada Angular

The IgxInputGroupComponent allows the user to enhance input elements like input, select, textarea, etc. This can be achieved by adding custom content like text, icons, buttons, custom validation, floating label, etc., on either side of them, as a prefix, suffix, or hint.

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.

Note that the IgxInputGroupComponent also depends on the Angular FormsModule in order to have a working Template Driven Form:

// 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';
}

Now that you have the Ignite UI for Angular Input Group module or directives imported, you can start using the igx-input-group component.

Nota

To use any of the directives igxInput, igxLabel, igx-prefix, igx-suffix or igx-hint, you have to wrap them in an <igx-input-group> container.

Uso del grupo de entrada Angular

Etiqueta y entrada

You can read about the igxLabel and igxInput directives as well as their validation, data binding and API in the Label & Input documentation.

Prefijo sufijo

The igx-prefix or igxPrefix and igx-suffix or igxSuffix directives can contain or be attached to HTML elements, strings, icons or even other components. In the following sample we will create a new input field with a string prefix and an icon suffix:

<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

The igx-hint directive provides a helper text placed below the input. It can be at the beginning or at the end of the input depending on the value of the position property. Let's add a hint to our phone input:

<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

The input group styles can be altered by using the type property of the igxInputGroup component. The input group component supports the following types: line (default if type is not specified), border, box, and search. The line, border, and box types are made specifically for the Material Design themes. Setting those types with other themes will not have any effect on how the input group looks. An example of setting a specific type declaratively:

<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

The type property has precedence over a IGX_INPUT_GROUP_TYPE, thus a token value can be overridden on a component level if the type property is set explicitly. Most of the igniteui-angular form controls use input-group component internally, or allow for a custom template. Setting a global token will affect these components as well.

Ignite UI for Angular also provides styling for the input of type="file" and it supports all the input group types and themes, just add this to your template:

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

Tema del grupo de entrada

The input group component supports several themes - material, fluent, bootstrap, and indigo-design; The theme is automatically set during component initialization and is inferred from the currently used stylesheet. If you plan to support several themes in your application with runtime switching, you can explicitly set the theme using the theme Input property.

<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

Template-driven form validation is achieved by adding validation attributes, i.e., required, minlength, etc., to the input element.

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

The required attribute adds an asterisk next to the label, indicating that this field must be filled in. Furthermore, when the input has additional validation applied to it, such as email and minlength, this could allow the developer to notify the end user for additional requirements via the igx-hint directive.

The following example uses two-way data binding and demonstrates how to inspect the control's state by exporting the ngModel to a local variable.

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

The following example demonstrates how to inspect the form's state by exporting the ngForm to a local variable.

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

The result from the above configurations could be seen in the below sample. Start typing into the Email and Password fields and you will notice that the igx-hint is shown if the entered values are invalid. The sample also demonstrates how to toggle the password's visibility by using the igx-icon and the igx-suffix directive.

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 to the template-driven form sample, when having additional validation like email and minlength, an igx-hint directive could be used to notify the end user if the validation has failed.

The following example demonstrates how to access the control through a get method and inspect its state. It also demonstrates how to enable/disable the submit button by inspecting the state of the FormGroup.

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>

The result from the above configurations could be seen in the below sample. Similar to the template-driven form sample, it also demonstrates how to toggle the password's visibility by using the igx-icon and the igx-suffix directive.

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

In some scenarios, the validation of one control may depend on the value of another one. To evaluate both controls in a single custom validator the validation should be performed in a common ancestor control, i.e., the FormGroup. The validator retrieves the child controls by calling the FormGroup's get method, compares the values and if the validation fails, a set of errors is generated for the FormGroup.

This will set only the form's state to invalid. To set the control's state, we could use the setErrors method and add the generated errors manually. Then, when the validation is successful, the errors could be removed by using the setValue method that will rerun the control's validation for the provided value.

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

To add the custom validator to the FormGroup it should be passed as a second argument when creating the form.

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

The below sample demonstrates how the built-in validators could be used in combination with the custom emailValidator and cross-field passwordValidator from the previous examples.

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

The first thing we need to do, in order to get started with the input group styling, is to include the index file in our style file:

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

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

To customize the appearance of input groups, you can create a new theme by extending the input-group-theme. This approach allows you to override only the parameters you want to change, while the rest are automatically handled by the base theme.

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

In the sample below, you can see how using the input group with customized CSS variables allows you to create a design that visually resembles the one used in the Carbon design system.

Nota

En el ejemplo se usa el esquema Indigo Light.

Nota

If your page includes multiple types of input groups — such as box, border, line, or search — it's best to scope your theme variables to the specific input group type.
For example:
Use .igx-input-group--box when styling box-style inputs. Use .igx-input-group--search when targeting search inputs. This helps prevent style conflicts between different input types. For instance, setting a dark $box-background globally could cause the borders of border or line inputs to become invisible (usually appearing white).

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