Angular Toggle 지시문 개요
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/directives';
// 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/directives';
// 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/directives'
// 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 사용합니다. The,andopenclosetoggle 메서드는 콘텐츠 표시 방식을 제어하는 선택적 오버레이 설정을 허용합니다. 생략할 경우, 이전 샘플에서 본 것처럼 기본 오버레이 설정이 사용됩니다.
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
andopen 메서드를 사용하지close 않기 위해, 핸들러가 있는onClick 지시문을 사용해 우리가 참조하는 토글의 상태를 자동으로 변경할 수 있습니다.
이 기능을 활용하려면 fromIgxToggleActionDirective theIgxToggleModule를 사용하고 에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