Angular 입력 그룹 구성 요소 개요

사용자는IgxInputGroupComponent 입력, 선택, 텍스트 영역 등과 같은 입력 요소를 향상시킬 수 있습니다. 이는 텍스트, 아이콘, 버튼, 맞춤 검증, 플로팅 라벨 등과 같은 맞춤 콘텐츠를 접두사, 접미사, 힌트 등으로 양쪽에 추가함으로써 달성할 수 있습니다.

Angular 입력 그룹 예제

Ignite UI for Angular 시작하기

Ignite UI for Angular Input Group 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.

ng add igniteui-angular

Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.

다음 단계는 다음 단계를 가져오는 것입니다.IgxInputGroupModule 당신의 app.module.ts 파일.

참고로IgxInputGroupComponent Angular에 따라 다르다 양식 모듈 작동하는 템플릿 기반 폼을 가지기 위해:

// 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 {}

또는16.0.0 독립 실행형 의존성으로 가져오IgxInputGroupComponent 거나, 토큰을IGX_INPUT_GROUP_DIRECTIVES 사용해 컴포넌트와 그 지원 컴포넌트, 명령어를 가져올 수도 있습니다.

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

이제 Ignite UI for Angular 입력 그룹 모듈이나 디렉티브를 가져왔으니, 컴포넌트igx-input-group 사용을 시작할 수 있습니다.

메모

어떤 지침igxInput​igxLabel​igx-prefix​igx-suffix​igx-hint 이든 사용하려면 컨테이너에 싸<igx-input-group>야 합니다.

Angular 입력 그룹 사용

라벨 및 입력

다음에 대해 읽어볼 수 있습니다.igxLabel 그리고igxInput 지시문뿐만 아니라 그 검증, 데이터 바인딩, API 라벨 및 입력 문서.

접두사 접미사

또는igx-prefix​igxPrefix​igx-suffix 또는 지시문은igxSuffix HTML 요소, 문자열, 아이콘 또는 기타 컴포넌트에 포함되거나 첨부될 수 있습니다. 다음 샘플에서는 문자열 접두 사와 아이콘 접미 사가 있는 새로운 입력 필드를 만들 것입니다:

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

힌트

지시문은igx-hint 입력 아래에 보조 텍스트를 제공합니다. 속성의position 값에 따라 입력의 시작이나 끝에 있을 수 있습니다. 휴대폰 입력에 힌트를 추가해 보겠습니다:

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

힌트가 포함된 전화 필드는 다음과 같습니다.

입력 유형 및 입력 그룹 유형 토큰

입력 그룹 스타일은 컴포넌트type의 속성을 사용하여igxInputGroup 변경할 수 있습니다. 입력 그룹 컴포넌트는 다음과 같은 유형을 지원합니다:line (유형이 지정되지 않은 경우 기본값),border,box 그리고search theline,,border andbox types는 주제에 맞게Material Design 특별히 만들어졌습니다. 다른 테마와 함께 그 타입들을 설정해도 입력 그룹의 모습에는 아무런 영향이 없습니다. 특정 타입을 선언적으로 설정하는 예시:

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

​IGX_input-group_TYPE 주입 토큰을 사용하면 모든 입력 그룹 인스턴스에 대해 애플리케이션 수준에서 유형을 지정할 수 있습니다. 모든 관련 구성 요소의 스타일을 한 번에 쉽게 지정할 수 있는 방법을 제공합니다. 유형을 설정하려면 IGX_input-group_TYPE 주입 토큰을 사용하여 DI 공급자를 생성하세요.

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

메모

속성은type​ ​IGX_INPUT_GROUP_TYPE 보다 우선하므로, 타입 속성이 명시적으로 설정되면 구성 요소 수준에서 토큰 값을 덮어쓸 수 있습니다. 대부분의 폼 컨트롤은igniteui-angular 내부적으로 입력 그룹 컴포넌트를 사용하거나 사용자 지정 템플릿을 허용합니다. 글로벌 토큰 설정도 이 구성 요소들에 영향을 미칩니다.

Ignite UI for Angular 입력type="file" 스타일링도 제공하며 모든 입력 그룹 유형과 테마를 지원합니다. 템플릿에 이 내용을 추가하면 됩니다:

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

입력 그룹 테마

입력 그룹 구성 요소는 여러 주제를 지원합니다 -material,fluent,bootstrap,, 그리고indigo-design는theme 컴포넌트 초기화 중에 자동으로 설정되며, 현재 사용 중인 스타일시트에서 추론됩니다. 런타임 전환으로 여러 테마를 지원할 계획이라면, Input 속성으로theme 테마를 명시적으로 설정할 수 있습니다.

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

입력된 양식

Ignite UI for Angular Angular 14부터 기본적으로 제공되는 엄격하게 유형이 지정된 반응형 폼 내부에서 사용할 수 있습니다. 유형이 지정된 폼에 대해 자세히 알아보려면 Angular 공식 문서를 확인하세요.

확인

다음 샘플은 템플릿 기반 또는 반응형 양식을 사용할 때 입력 유효성 검사를 구성하는 방법을 보여줍니다.

템플릿 기반 양식

템플릿 기반 폼 검증은 요소에required 검증 속성(예:minlength​input 등)을 추가함으로써 이루어집니다.

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

속성은required 라벨 옆에 별표를 붙여 이 필드를 채워야 함을 나타냅니다. 또한, 추가적인 검증(예:input andemail)이 적용될 경우minlength, 개발자는 지시를 통해igx-hint 최종 사용자에게 추가 요구사항을 알릴 수 있습니다.

다음 예시는 양방향 데이터 바인딩을 사용하며, 컨트롤ngModel 상태를 로컬 변수로 내보내는 방식으로 검사하는 방법을 보여줍니다.

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

양식 컨트롤 중 유효하지 않은 것이 있으면 사용자는 양식을 제출할 수 없어야 합니다. 이는 양식의 상태에 따라 제출 버튼을 활성화/비활성화하여 달성할 수 있습니다.

다음 예시는 를ngForm 로컬 변수로 내보내면서 폼의 상태를 검사하는 방법을 보여줍니다.

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

위 구성의 결과는 아래 샘플에서 확인할 수 있습니다. 이메일과 비밀번호 필드에 입력을 시작하면 입력된 값이 유효하지 않다면 표시igx-hint 되는 것을 알 수 있습니다. 샘플은 또한 와igx-icon 디렉티브를 사용하여igx-suffix 비밀번호의 가시성을 토글하는 방법을 보여줍니다.

반응형 양식

반응형 양식 유효성 검사는 구성 요소 클래스의 양식 제어 모델에 유효성 검사기 기능을 직접 추가하여 수행됩니다. 구성 요소 클래스에서 컨트롤을 만든 후에는 템플릿의 양식 컨트롤 요소와 연결되어야 합니다.

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>

템플릿 기반 폼 샘플과 유사하게, andemail와 같은minlength 추가 검증이 있을 때,igx-hint 검증 실패 시 최종 사용자에게 알림을 제공하는 지시를 사용할 수 있습니다.

다음 예시는 메서드를 통해get 제어에 접근하고 상태를 검사하는 방법을 보여줍니다. 또한 제출 버튼을 활성화하거나 비활성화하는 방법을 보여줍니다.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>

위 구성의 결과는 아래 샘플에서 확인할 수 있습니다. 템플릿 기반 폼 샘플과 유사하게, 이 문서는 와igx-icon 디렉티브를 사용하여igx-suffix 비밀번호의 가시성을 토글하는 방법도 보여줍니다.

사용자 정의 유효성 검사기

일부 입력 필드에는 사용자 정의 유효성 검사가 필요할 수 있으며 이는 사용자 정의 유효성 검사기를 통해 달성할 수 있습니다. 값이 유효하지 않으면 유효성 검사기는 특정 오류 메시지를 표시하는 데 사용할 수 있는 오류 집합을 생성합니다.

다음은 입력한 이메일 주소에 사전 정의된 값이 포함되어 있는지 확인하고 값이 발생하는 위치에 따라 다른 오류를 생성하는 간단한 사용자 정의 반응형 양식 유효성 검사기의 예입니다.

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

필드 간 검증

어떤 경우에는 한 통제의 검증이 다른 통제의 값에 달려 있을 수 있습니다. 단일 맞춤형 검증기에서 두 통제를 평가하려면 공통 조상 통제, 즉FormGroup 검증기는 theFormGroup 메서드를get 호출하여 자식 제어를 불러와, 값을 비교하고, 검증이 실패하면 오류 집합이 생성FormGroup 됩니다.

이렇게 하면 폼의 상태만 무효로 설정됩니다. 컨트롤 상태를 설정하려면 메서드를setErrors 사용해 생성된 오류를 수동으로 추가할 수 있습니다. 그 후 검증이 성공하면, 제공된 값에 대해 컨트롤의 검증을 재실행하는 메서드를 사용하여setValue 오류를 제거할 수 있습니다.

아래 예에서는 비밀번호에 이메일 주소가 포함되어서는 안 되고 반복 비밀번호가 비밀번호와 일치해야 하는 교차 필드 유효성 검사를 보여줍니다.

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

커스텀 검증기를FormGroup 추가하려면 폼을 만들 때 두 번째 인자로 전달해야 합니다.

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

아래 샘플은 내장 검증기를 이전 예제의 커스텀emailValidator 및 크로스 필드passwordValidator와 결합하여 어떻게 사용할 수 있는지 보여줍니다.

스타일링

Input Group Theme Property Map

주요 속성을 수정하면 관련된 모든 종속 속성이 자동으로 업데이트됩니다:

재료 유창한 부트스트랩 남빛

기본 속성	종속 속성	설명
$box 배경	$box-배경-호버	입력 박스의 배경 호버
	$box-배경-초점	입력 박스의 초점 배경
	$box-장애-배경	장애인 국가 배경
	$placeholder색	자리 표시자 텍스트 색상
	$hover-플레이스홀더-컬러	플레이스홀더 텍스트를 위한 호버 색상
	$idle-텍스트-컬러	기본 텍스트 색상
	$filled-텍스트-컬러	입력이 채워질 때 텍스트 색상
	$filled-텍스트-호버-컬러	마우스를 올리면 채워진 상태의 입력 텍스트 색상
	$focused-텍스트-컬러	입력이 집중되었을 때 텍스트 색상
	$idle-2차 색상	유휴 시 보조 텍스트 색상
	$input-접두사-색상	입력 박스 내 접두사의 텍스트 색상
	$input-접두사-색상--채워짐	채워진 접두어의 텍스트 색상
	$input-접두사-색상--초점	집중 접두사의 텍스트 색상
	$input-접미사-색상	입력 박스 내 접미사 텍스트 색상
	$input-접미사-색--채워짐	채워진 접미사의 텍스트 색상
	$input-접미사-색--집중	집중 접미사의 텍스트 색상
	$disabled-플레이스홀더-컬러	입력이 비활성화되었을 때 자리 표시 색상
	$disabled-텍스트-컬러	입력이 비활성화되었을 때 텍스트 색상
$idle-하단-줄-색상	$hover-하단-라인-색상	입력 아래 줄에 호버 색상을 표시하세요
	$focused-bottom-line-color(-bottom-line-color)	최종 라인에 초점을 맞춘 색상
	$focused-2차 색상	초점 상태에서의 라벨 색상
	$border색	타입 테두리 그룹의 테두리 색상
	$focused-테두리 색상	타입 테두리 그룹에 대한 집중 입력 테두리 색상
$border색	$hover-테두리 색상	입력 테두리의 호버 색상
	$focused-테두리 색상	입력이 초점을 맞출 때 테두리 색상
	$focused-2차 색상	초점 상태에서의 라벨 색상
$input접두사-배경	$input-접두사-색상	입력 박스 내 접두사의 텍스트 색상
	$input-접두사-배경--채워진	채워진 상태에서 입력 접두사의 배경색
	$input-접두사-배경--포커스	집중 상태에서 입력 접두사의 배경색
$input-접미사-배경	$input-접미사-색상	입력 박스 내 접미사 텍스트 색상
	$input-접미사-배경--채워져	채워진 상태에서 입력 접미사의 배경색
	$input-접미사-배경--포커스팅	초점 상태에서 입력 접미사의 배경색
$search 배경	$placeholder색	검색 입력 내 자리 표시자 텍스트 색상
	$hover-플레이스홀더-컬러	플레이스홀더 텍스트를 위한 호버 색상
	$idle-텍스트-컬러	검색 입력을 위한 텍스트 색상
	$idle-2차 색상	유휴 시 보조 텍스트 색상
	$filled-텍스트-컬러	검색 입력이 채워질 때 텍스트 색상
	$filled-텍스트-호버-컬러	검색 입력이 채워졌을 때 텍스트 색상을 마우스로 이동시켰습니다
	$focused-텍스트-컬러	검색 입력이 집중되었을 때 텍스트 색상
	$input-접두사-색상	검색 안의 접두사 색상
	$input-접미사-색상	검색 내부 접미사 색상
	$input-접두사-색상--채워짐	입력이 채워질 때 접두사 색상
	$input-접미사-색--채워짐	입력이 채워질 때 접미사 색상
	$input-접두사-색상--초점	입력이 집중될 때 접두사 색상
	$input-접미사-색--집중	입력이 집중될 때 접미사 색상
	$search-장애-배경	검색 입력이 비활성화된 배경
	$disabled-플레이스홀더-컬러	비활성화 시 자리 표시 색상
	$disabled-텍스트-컬러	비활성화 시 텍스트 색상

기본 속성	종속 속성	설명
$border색	$hover-테두리 색상	입력 테두리의 호버 색상
	$focused-테두리 색상	입력이 초점을 맞출 때 테두리 색상
	$focused-2차 색상	초점 상태에서의 라벨 색상
$input접두사-배경	$input-접미사-배경	유휴 상태에서 입력 접미사의 배경색
	$input-접두사-색상	입력 박스 내 접두사의 텍스트 색상
	$input-접두사-색상--채워짐	채워진 접두어의 텍스트 색상
$input-접미사-배경	$input접두사-배경	유휴 상태에서 입력 접두사의 배경색
	$input-접미사-색상	입력 박스 내 접미사 텍스트 색상
	$input-접미사-색--채워짐	채워진 접미사의 텍스트 색상
$search 배경	$placeholder색	검색 입력 내 자리 표시자 텍스트 색상
	$hover-플레이스홀더-컬러	플레이스홀더 텍스트를 위한 호버 색상
	$idle-2차 색상	유휴 시 보조 텍스트 색상
	$idle-텍스트-컬러	검색 입력을 위한 텍스트 색상
	$filled-텍스트-컬러	검색 입력이 채워질 때 텍스트 색상
	$filled-텍스트-호버-컬러	검색 입력이 채워졌을 때 텍스트 색상을 마우스로 이동시켰습니다
	$focused-텍스트-컬러	검색 입력이 집중되었을 때 텍스트 색상
	$input-접두사-색상	검색 안의 접두사 색상
	$input-접미사-색상	검색 내부 접미사 색상
	$input-접두사-색상--채워짐	입력이 채워질 때 접두사 색상
	$input-접미사-색--채워짐	입력이 채워질 때 접미사 색상
	$input-접두사-색상--초점	입력이 집중될 때 접두사 색상
	$input-접미사-색--집중	입력이 집중될 때 접미사 색상
	$search-장애-배경	검색 입력이 비활성화된 배경
	$disabled-플레이스홀더-컬러	비활성화 시 자리 표시 색상
	$disabled-텍스트-컬러	비활성화 시 텍스트 색상

기본 속성	종속 속성	설명
$border색	$focused-테두리 색상	입력이 초점을 맞출 때 테두리 색상
	$focused-2차 색상	초점 상태에서의 라벨 색상
$input접두사-배경	$input-접미사-배경	유휴 상태에서 입력 접미사의 배경색
	$input-접두사-색상	입력 박스 내 접두사의 텍스트 색상
	$input-접두사-색상--채워짐	채워진 접두어의 텍스트 색상
$input-접미사-배경	$input접두사-배경	유휴 상태에서 입력 접두사의 배경색
	$input-접미사-색상	입력 박스 내 접미사 텍스트 색상
	$input-접미사-색--채워짐	채워진 접미사의 텍스트 색상
$search 배경	$placeholder색	검색 입력 내 자리 표시자 텍스트 색상
	$hover-플레이스홀더-컬러	플레이스홀더 텍스트를 위한 호버 색상
	$idle-2차 색상	유휴 시 보조 텍스트 색상
	$idle-텍스트-컬러	검색 입력을 위한 텍스트 색상
	$filled-텍스트-컬러	검색 입력이 채워질 때 텍스트 색상
	$filled-텍스트-호버-컬러	검색 입력이 채워졌을 때 텍스트 색상을 마우스로 이동시켰습니다
	$focused-텍스트-컬러	검색 입력이 집중되었을 때 텍스트 색상
	$input-접두사-색상	검색 안의 접두사 색상
	$input-접미사-색상	검색 내부 접미사 색상
	$input-접두사-색상--채워짐	입력이 채워질 때 접두사 색상
	$input-접미사-색--채워짐	입력이 채워질 때 접미사 색상
	$input-접두사-색상--초점	입력이 집중될 때 접두사 색상
	$input-접미사-색--집중	입력이 집중될 때 접미사 색상
	$search-장애-배경	검색 입력이 비활성화된 배경
	$disabled-플레이스홀더-컬러	비활성화 시 자리 표시 색상
	$disabled-텍스트-컬러	비활성화 시 텍스트 색상

기본 속성	종속 속성	설명
$idle-하단-줄-색상	$hover-하단-라인-색상	입력 아래 줄에 호버 색상을 표시하세요
	$focused-bottom-line-color(-bottom-line-color)	최종 라인에 초점을 맞춘 색상
$border색	$hover-테두리 색상	입력 테두리의 호버 색상
	$focused-테두리 색상	입력이 초점을 맞출 때 테두리 색상
$input접두사-배경	$input-접두사-색상	입력 박스 내 접두사의 텍스트 색상
	$input-접두사-배경--채워진	채워진 상태에서 입력 접두사의 배경색
	$input-접두사-배경--포커스	집중 상태에서 입력 접두사의 배경색
$input-접미사-배경	$input-접미사-색상	입력 박스 내 접미사 텍스트 색상
	$input-접미사-배경--채워져	채워진 상태에서 입력 접미사의 배경색
	$input-접미사-배경--포커스팅	초점 상태에서 입력 접미사의 배경색
$search 배경	$placeholder색	검색 입력 내 자리 표시자 텍스트 색상
	$hover-플레이스홀더-컬러	플레이스홀더 텍스트를 위한 호버 색상
	$box-배경-호버	검색 입력을 위한 배경 호버
	$idle-텍스트-컬러	검색 입력을 위한 텍스트 색상
	$filled-텍스트-컬러	검색 입력이 채워질 때 텍스트 색상
	$filled-텍스트-호버-컬러	검색 입력이 채워졌을 때 텍스트 색상을 마우스로 이동시켰습니다
	$focused-텍스트-컬러	검색 입력이 집중되었을 때 텍스트 색상
	$input-접두사-색상	검색 안의 접두사 색상
	$input-접미사-색상	검색 내부 접미사 색상
	$search-장애-배경	검색 입력이 비활성화된 배경
	$disabled-플레이스홀더-컬러	비활성화 시 자리 표시 색상
	$disabled-텍스트-컬러	비활성화 시 텍스트 색상

입력 그룹 스타일링을 시작하기 위해 가장 먼저 해야 할 일은 스타일 파일에 파일을index 포함하는 것입니다:

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

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

입력 그룹의 외관을 커스터마이즈하려면 확장input-group-theme 하여 새로운 테마를 만들 수 있습니다. 이 방식은 변경하고 싶은 파라미터만 오버라이드할 수 있고, 나머지는 기본 테마가 자동으로 처리할 수 있게 해줍니다.

테두리 또는 배경의 색상과 같은 몇 가지 핵심 매개 변수만 지정해도 일관된 상태 기반 스타일(호버, 포커스 등)이 적용된 완전히 스타일이 지정된 입력 그룹을 얻을 수 있습니다.

다음은 간단한 예입니다.

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

마지막 단계는 새로 생성된 테마를 포함하는 것입니다.

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

아래 샘플에서는 맞춤형 CSS 변수를 사용하는 입력 그룹을 사용하면 디자인 시스템에서 사용되는Carbon 디자인과 시각적으로 유사한 디자인을 만들 수 있음을 알 수 있습니다.

메모

이 샘플에서는 Indigo Light 스키마를 사용합니다.

메모

페이지에 여러 입력 그룹 유형(예:box​border​line, 또는search)이 포함되어 있다면, 테마 변수를 특정 입력 그룹 유형에 맞게 스코핑하는 것이 좋습니다.
예를 들어:
박스 스타일 입력을 스타일링할 때 사용.igx-input-group--box 하세요. 검색 입력을 타겟팅할 때 사용됩니다.igx-input-group--search. 이렇게 하면 서로 다른 입력 유형 간 스타일 충돌을 방지할 수 있습니다. 예를 들어, 어두운$box-background 색을 전역적으로 설정하면 경계선이나 선 입력의 경계가 보이지 않게 되어(보통 흰색으로 보일 수 있습니다).

Styling with Tailwind

입력 그룹은 저희의 맞춤형 Tailwind 유틸리티 클래스를 사용해 스타일링할 수 있습니다. 먼저 Tailwind를 꼭 설정 하세요.

전역 스타일시트의 순풍 가져오기와 함께 다음과 같이 원하는 테마 유틸리티를 적용할 수 있습니다.

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

유틸리티 파일에는 테마 변형 두 가지light가dark 모두 포함되어 있습니다.

• 라이트 테마에는 클래스를 사용light-* 하세요.
• 어두운 테마에는 클래스를 사용dark-* 하세요.
• 접두사 뒤에 컴포넌트 이름을 덧붙이세요,light-input-group​dark-input-group 예: .

이 클래스들이 적용되면 동적 테마 계산이 가능합니다. 그 다음에는 생성된 CSS 변수를 무arbitrary properties 시할 수 있습니다. 콜론 다음에는 유효한 CSS 색상 형식(HEX, CSS 변수, RGB 등)을 입력하세요.

전체 속성 목록은 input-group-theme에서 확인할 수 있습니다. 문법은 다음과 같습니다:

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

메모

느낌표(!)는 유틸리티 클래스가 우선순위가 되도록 보장하기 위해 필요합니다. Tailwind는 레이어에 스타일을 적용하는데, 이 스타일을 중요하게 표시하지 않으면 컴포넌트의 기본 테마에 의해 덮어쓰여집니다.

마지막에 입력값은 다음과 같이 보여야 합니다:

API 참조

• IgxInput 지시어
• IgxHint 지시어
• IgxInputGroup 유형
• IgxInputGroupComponent
• IgxInputGroupComponent 스타일

테마 종속성

• IgxButton 테마
• IgxIcon 테마

추가 리소스

관련 주제:

• 라벨 및 입력
• 반응형 양식 통합

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for Angular 포럼
• ​GitHub Ignite UI for Angular