Angular Toggle 지시문 개요

    Ignite UI for Angular 하면 사용자가 사용자 상호작용을 통해 DOM에서 컨테이너를 토글할 수 있습니다.

    Angular 토글 예제

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.

    Ignite UI for Angular 토글 시작하기

    Ignite UI for Angular Toggle 지시문을 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.

    ng add igniteui-angular
cmd

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

    다음 단계는 IgxToggleModule 당신의 app.module.ts 파일.

    // app.module.ts

...
import { IgxToggleModule } from 'igniteui-angular';
// import { IgxToggleModule } from '@infragistics/igniteui-angular'; for licensed package

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

    또는 16.0.0부터 IgxToggleDirective 독립형 종속성으로 가져올 수 있습니다.

    // home.component.ts

import { IgxToggleDirective, IgxButtonDirective } from 'igniteui-angular';
// import { IgxToggleDirective, IgxButtonDirective } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <button class="toggle-button" igxButton="contained" (click)="toggleContent()">Toggle</button>
    <div class="toggle-content" igxToggle>
        <section class="toggle-section">
            <img src="assets/images/toggle/nature.jpg" alt="Nature" />
        </section>
    </div>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IgxToggleDirective, IgxButtonDirective]
})
export class HomeComponent {}
typescript

    이제 Ignite UI for Angular Toggle 모듈이나 지시문을 가져왔으므로 igxToggle 지시문을 사용할 수 있습니다.

    Angular Toggle 지시문 사용

    디스플레이 토글

    토글 콘텐츠를 표시하고 숨기려면 열기 및 닫기 메서드를 사용하세요.

    import { IgxToggleDirective } from 'igniteui-angular'
// import { IgxToggleDirective } from '@infragistics/igniteui-angular'; for licensed package
...

export class Class {
    @ViewChild(IgxToggleDirective) toggle: IgxToggleDirective;

    toggleContent() {
        if (this.toggle.collapsed) {
            this.toggle.open();
        } else {
            this.toggle.close();
        }
    }
}
typescript

    그런 다음 구성 요소의 템플릿에서 토글할 요소에 지시문을 적용할 수 있습니다.

    <!--template.component.html-->
<button class="toggle-button" igxButton="contained" (click)="toggleContent()">Toggle</button>
<div class="toggle-content" igxToggle>
    <section class="toggle-section">
        <img src="assets/images/toggle/nature.jpg"/>
    </section>
</div>
html

    예

    위치 변경

    다음 샘플에서는 콘텐츠가 버튼 아래에 표시되도록 다른 위치 지정 전략을 사용하겠습니다.

    ​igxToggle 지시문은 IgxOverlayService 공급자를 사용합니다. open, close 및 toggle 메소드는 콘텐츠 표시 방법을 제어하는 선택적 오버레이 설정을 허용합니다. 생략하면 이전 샘플에 표시된 대로 기본 오버레이 설정이 사용됩니다.

    기본적으로 closeOnOutsideClick 속성은 true로 설정됩니다. 이 기능을 비활성화하려면 속성을 false로 설정해야 합니다. 또한, closeOnEscape 속성의 기본값은 false 이므로 이를 활용하려면 true로 설정해야 합니다.

    // template.component.ts

...
    @ViewChild(IgxToggleDirective) public igxToggle: IgxToggleDirective;
    @ViewChild('button') public igxButton: ElementRef;

    public _positionSettings = {
        horizontalStartPoint: HorizontalAlignment.Left,
        verticalStartPoint: VerticalAlignment.Bottom
    };

    public _overlaySettings = {
        target: this.igxButton.nativeElement,
        closeOnOutsideClick: false,
        closeOnEscape: true,
        positionStrategy: new ConnectedPositioningStrategy(this._positionSettings)
    };

    public toggle() {
        this.igxToggle.toggle(this._overlaySettings);
    }
typescript

    이제 토글의 모습은 다음과 같습니다.

    EXAMPLE
    TS
    HTML
    Edit in:

    자동 토글 작업

    ​open 및 close 메소드를 사용하지 않으려면 onClick 핸들러가 있는 지시어를 사용하고 참조하는 토글의 상태를 자동으로 변경할 수 있습니다.

    이 기능을 활용하려면 IgxToggleModule의 IgxToggleActionDirective 사용하고 이에 IgxToggleDirective 할당해야 합니다.

    ​IgxToggleActionDirective는 트리거(토글)처럼 사용하려는 요소에 선언되어야 합니다.

    <!--template.component.html-->
<button class="toggle-button"  igxButton="contained" [igxToggleAction]="toggleRef">Toggle</button>
<div class="toggle-content" igxToggle #toggleRef="toggle">
    <section class="toggle-section">
        <h6>Automatic toggle actions</h6>
    </section>
</div>
html

    이러한 변경 후에는 토글이 정확히 동일한 방식으로 작동해야 합니다.

    EXAMPLE
    TS
    HTML
    Edit in:

    기본적으로 IgxToggleActionDirective​ ​closeOnOutsideClick 속성에서 해당 호스트 요소를 제외합니다. 따라서 호스트 요소를 클릭해도 이벤트가 발생하지 않습니다. 또한 이 지시어는 호스트 요소를 오버레이 설정 target으로 설정합니다.

    자동 토글 서비스 제공자

    ​igxToggle 지시어의 상태를 유지하고 igxNavigationService 공급자를 통해 명령을 내리는 편리한 방법이 있습니다. 서비스에 토글을 등록하는 데 사용되는 igxToggle 요소에 대한 식별자를 설정하기만 하면 됩니다. 상태를 자동으로 제어하려면 이 식별자를 igxToggleActionDirective에 전달해야 합니다.

    <!--template.component.html-->
<button igxToggleAction="toggleId" class="toggle-button" igxButton="contained">Toggle</button>
<div igxToggle id="toggleId" class="toggle-content">
    <section class="toggle-section">
        <h6>Toggled by the service provider</h6>
    </section>
</div>
html

    모든 것이 잘 진행되었다면 다음과 같을 것입니다.

    EXAMPLE
    TS
    HTML
    Edit in:

    토글 컨테이너 오프셋

    제공된 양만큼 해당 축을 따라 토글 컨테이너의 위치를 조작할 수 있습니다. 또한 이 setOffset 메서드는 현재 오프셋 값에 추가할지 또는 특정 값으로 설정할지를 결정하는 선택적 offsetMode 매개 변수를 지원합니다.

    // deltaX and deltaY determine by how much the container will be offset compared to its' previous position
// Using OffsetMode.Add to add the values (default behavior)
public offsetToggleAdd() {
    const deltaX = 30;
    const deltaY = 30;
    this.toggle.setOffset(deltaX, deltaY, OffsetMode.Add);
}
typescript
    // deltaX and deltaY determine the exact position to set the container to, relative to its target element.
// Using OffsetMode.Set to set the offset to specific values
public offsetToggleSet() {
    const deltaX = 30;
    const deltaY = 30;
    this.toggle.setOffset(deltaX, deltaY, OffsetMode.Set);
}
typescript

    EXAMPLE
    TS
    HTML
    Edit in:

    App Builder | CTA 배너

    API 참조

    사용된 관련 API가 포함된 추가 구성 요소 및/또는 지시어:

    테마 종속성

    추가 리소스

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