Angular 토글 지시문 개요
Ignite UI for Angular 사용자 상호 작용을 통해 DOM의 컨테이너를 토글 가능하게 만들 수 있습니다.
Angular Toggle Example
Getting Started with Ignite UI for Angular Toggle
Ignite UI for Angular Toggle 지시문을 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.
ng add igniteui-angular
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 {}
또는 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 {}
이제 Ignite UI for Angular 가져왔으므로 igxToggle 지시문 사용을 시작할 수 있습니다.
Using the Angular Toggle Directive
Display 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();
}
}
}
그런 다음 구성 요소의 템플릿에서 토글할 요소에 지시문을 적용할 수 있습니다.
<!--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>
Examples
Change Position
다음 샘플에서는 콘텐츠가 버튼 아래에 표시되도록 다른 위치 지정 전략을 사용하겠습니다.
igxToggle 지시문은 IgxOverlayService 공급자를 사용합니다. open, close 및 toggle 메소드는 콘텐츠 표시 방법을 제어하는 선택적 오버레이 설정을 허용합니다. 생략하면 이전 샘플에 표시된 대로 기본 오버레이 설정이 사용됩니다.
Note
기본적으로 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);
}
이제 토글의 모습은 다음과 같습니다.
Automatic Toggle Actions
open 및 close 메소드를 사용하지 않으려면 onClick 핸들러가 있는 지시어를 사용하고 참조하는 토글의 상태를 자동으로 변경할 수 있습니다.
이 기능을 활용하려면 IgxToggleModule의 IgxToggleActionDirective 사용하고 이에 IgxToggleDirective 할당해야 합니다.
Note
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>
이러한 변경 후에는 토글이 정확히 동일한 방식으로 작동해야 합니다.
Note
기본적으로 IgxToggleActionDirective closeOnOutsideClick 속성에서 해당 호스트 요소를 제외합니다. 따라서 호스트 요소를 클릭해도 이벤트가 발생하지 않습니다. 또한 이 지시어는 호스트 요소를 오버레이 설정 target으로 설정합니다.
Automatic Toggle Service Provider
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>
모든 것이 잘 진행되었다면 다음과 같을 것입니다.
Offsetting the Toggle Container
제공된 양만큼 해당 축을 따라 토글 컨테이너의 위치를 조작할 수 있습니다. 또한 이 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);
}
// 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);
}
API References
사용된 관련 API가 포함된 추가 구성 요소 및/또는 지시어:
Theming Dependencies
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub