Angular 체크박스 컴포넌트 개요

    Angular Checkbox는 표준 HTML 입력 유형 체크박스의 확장으로, 애니메이션 및 Material Design 스타일과 같은 것들로 강화된 유사한 기능을 제공합니다. 사용자가 주로 양식 및 설문 조사에서 하나 또는 여러 개의 미리 정의된 옵션을 선택할 수 있도록 합니다.

    Ignite UI for Angular는 사용자가 특정 조건에 대해 이진 선택을 할 수 있는 선택 컨트롤입니다. 네이티브 브라우저 체크박스와 비슷하게 동작합니다. 제공하는 기능 중 일부는 스타일 옵션, 테마, 체크됨, 체크되지 않음, 불확정 상태 등입니다.

    Angular Checkbox Example

    아래의 Angular Checkbox 예제에서 체크박스가 실제로 어떻게 동작하는지 확인하세요.

    Getting Started with Ignite UI for Angular Checkbox

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

    ng add igniteui-angular

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

    다음 단계는 다음 단계를 가져오는 것입니다.IgxCheckboxModule 안에 app.module.ts 파일:

    // app.module.ts

import { IgxCheckboxModule } from 'igniteui-angular/checkbox';
// import { IgxCheckboxModule } from '@infragistics/igniteui-angular'; for licensed package

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

    또는16.0.0 독립 실행형 의존성으로 가져올IgxCheckboxComponent 수도 있습니다.

    // home.component.ts

import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';
// import { IgxCheckboxComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-checkbox [checked]="true">
        Simple checkbox
    </igx-checkbox>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IgxCheckboxComponent]
})
export class HomeComponent {}

    이제 Ignite UI for Angular 체크박스 모듈이나 컴포넌트를 가져왔으니, 컴포넌트를igx-checkbox 사용할 수 있습니다.

    Using the Angular Checkbox Component

    데모에서 확인란을 만들려면 구성요소 템플릿 내에 다음 코드를 추가하세요.

    <igx-checkbox [checked]="true">
    Simple checkbox
</igx-checkbox>

    Checkbox properties

    위의 코드를 개선하기 위해 체크박스 속성을 일부 데이터에 바인딩해 봅시다. 예를 들어, 작업 객체들이 각각 두 가지 속성을 가진다고 가정해봅시다: description과 done. 체크박스 컴포넌checked 트 속성은 기본 작업 객체 완료 속성에 바인딩할 수 있습니다. 비유적으로, 속성을 설명에 묶value을 수 있습니다. 선택적으로, 이벤트를change 바인딩하고 제공된 이벤트 핸들러 메서드에 커스텀 로직을 추가할 수도 있습니다.

    // tasks.component.ts
@Component({...})
export class HomeComponent {
    public tasks = [
        { done: true, description: 'Research' },
        { done: true, description: 'Implement' },
        { done: false, description: 'Test' }
    ];

    public statusChanged() {
        // event handler logic
    }
}

    각 작업에 대한 확인란을 추가한 다음 해당 속성 바인딩을 설정하여 구성 요소 템플릿을 향상합니다.

    <!--tasks.component.html-->
<igx-checkbox *ngFor="let task of tasks" [checked]="task.done">
    {{ task.description }}
</igx-checkbox>

    몇 가지 스타일을 추가하세요.

    //task.component.scss
:host {
    display: flex;
    flex-flow: column nowrap;
    padding: 16px;
}
igx-checkbox {
    margin-top: 16px;
}

    최종 결과는 다음과 같습니다.

    Label Positioning

    체크박스의labelPosition 속성을 사용하여 라벨을 위치시킬 수 있습니다:

    <igx-checkbox labelPosition="before"></igx-checkbox>

    만약 가labelPosition 설정되어 있지 않으면, 라벨은 체크박스 뒤에 위치하게 됩니다.

    Indeterminate Checkbox in Angular

    체크된 상태와 체크되지 않은 상태 외에도, 체크박스는 indeterminate(indeterminate)라는 세 번째 상태가 있습니다. 이 상태에서는 체크박스가 체크되지도, 해제되지도 않습니다. 이 기능은 체크박스의indeterminate 속성을 사용하여 설정합니다:

    <igx-checkbox [indeterminate]="true"></igx-checkbox>

    우리는 해야 할 작업 목록과 모든 작업이 완료되었을 때만 체크되는 Angular의 마스터 체크박스가 있는 앱을 만들 수 있습니다. 이전 샘플을 업데이트해 보겠습니다. 템플릿부터 시작하겠습니다.

    <!-- app.component.html -->
<igx-checkbox
    [readonly]="true"
    [(ngModel)]="masterCheckbox.checked"
    [(indeterminate)]="masterCheckbox.indeterminate"
    (click)="toggleAll()"
>
All done
</igx-checkbox>
<igx-checkbox class="tasks" *ngFor="let task of tasks" [(ngModel)]="task.done">
    {{ task.description }}
</igx-checkbox>

    다음으로 하위 작업을 들여쓰기하여 하위 작업이 동일한 그룹에 속해 있다는 것을 더욱 시각적으로 보여줍니다.

    // app.component.scss
:host {
    display: flex;
    flex-flow: column nowrap;
    padding: 16px;
}
igx-checkbox {
    margin-top: 16px;
}
igx-checkbox.tasks {
    padding-left: 10px;
}

    마지막으로 애플리케이션의 논리를 생성합니다.

    // app.component.ts
public tasks = [
    { done: true, description: 'Research' },
    { done: true, description: 'Implement' },
    { done: false, description: 'Test' }
];
public get masterCheckbox() {
    return this.tasks.reduce(
        (acc, curr, idx, arr) => {
            acc.checked = acc.checked && curr.done;
            acc.done = curr.done ? acc.done + 1 : acc.done;
            acc.indeterminate = acc.done === arr.length ? false : !!acc.done;
            return acc;
        },
        {
            checked: true,
            done: 0,
            indeterminate: false
        }
    );
}
public toggleAll() {
    if (this.masterCheckbox.checked) {
        for (const task of this.tasks) {
            task.done = false;
        }
    } else {
        for (const task of this.tasks) {
            task.done = true;
        }
    }
}

    모든 작업이 완료되면 애플리케이션은 다음과 같아야 합니다.

    스타일링

    Checkbox Theme Property Map

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

    기본 속성 종속 속성 설명
    $empty색
    		$empty색 호버 호버링 시 체크되지 않은 테두리 색상.
    $focus-윤곽 색상 (인디고 변형만) 인디고 변형의 초점 윤곽선 색상.
    $fill색
    		$fill색 호버 체크된 테두리와 채우기 색상이 떠 있습니다.
    $tick색 체크 표시 색깔.
    $focus-테두리 색상 초점 테두리 색상.
    $disabled-불정색 비활성화된 테두리와 채우기 색상은 불정 상태입니다.
    $focus-아웃라인-컬러 (부트스트랩 변형만) 부트스트랩 변형의 초점 윤곽선 색상.
    $focus-윤곽-색상 집중 (인디고 변형만) 인디고 변형에서 집중 상태를 위한 초점 윤곽 색상.
    $error색
    		$error색 호버 호버 상태에서 테두리와 채우기 색상이 유효하지 않은 상태입니다.
    $focus-아웃라인-색상-오류 오류 상태에서 초점 윤곽선이 색상을 외칩니다.
    $label색 $label색 호버 라벨 텍스트 색상이 마우스를 올리면 됩니다.

    메모: 실제 결과는 테마 변형에 따라 다를 수 있습니다.

    체크박스 스타일링을 시작하려면, 모든 테마 함수와 컴포넌트 믹스인이 있는 파일을 가져와index야 합니다:

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

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

    그 다음, 체크박스 요소를 스타일링할 수 있는 매개변수를 확장checkbox-theme 하는 새로운 테마를 만듭니다. 그리고$empty-color를 지정$fill-color 함으로써 테마는 적절한 상태 색상과 대비 전경을 자동으로 계산합니다. 필요에 따라 다른 매개변수를 맞춤 값으로 덮어쓸 수 있습니다.

    // in styles.scss
$custom-checkbox-theme: checkbox-theme(
    $empty-color: #ecaa53,
    $fill-color: #ecaa53,
    $border-radius: 5px
);

    마지막으로 애플리케이션에 사용자 지정 테마를 포함 합니다.

    @include css-vars($custom-checkbox-theme);

    아래 샘플에서는 맞춤형 CSS 변수를 사용하는 체크박스 구성 요소를 사용하면 디자인 시스템에서 사용되는SAP UI5 체크박스와 시각적으로 유사한 디자인을 만들 수 있음을 알 수 있습니다.

    Styling with Tailwind

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

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

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

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

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

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

    전체 부동산 목록은 체크박스 테마에서 확인할 수 있습니다. 문법은 다음과 같습니다:

    <igx-checkbox
class="!light-checkbox
![--empty-color:#7B9E89]
![--fill-color:#7B9E89]"
[checked]="true">
    Styled checkbox
</igx-checkbox>
    Note

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

    끝에 체크박스는 다음과 같이 보여야 합니다:

    API References

    Theming Dependencies

    Additional Resources

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