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 {}
Now that you have the Ignite UI for Angular Toggle module or directive imported, you can start using the igxToggle directive.
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
다음 샘플에서는 콘텐츠가 버튼 아래에 표시되도록 다른 위치 지정 전략을 사용하겠습니다.
The igxToggle directive uses the IgxOverlayService provider. The open, close and toggle methods accept optional overlay settings that control how the content is displayed. If omitted, the default overlay settings are used as seen in the previous sample.
Note
By default, the closeOnOutsideClick property is set to true. In order to disable this functionality, the property has to be set to false. Additionally, the closeOnEscape property defaults to false, so in order to make use of it, we have to set it to 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
In order to avoid using the open and close methods, we can use a directive, which has an onClick handler, and changes the state of the toggle we are referring to automatically.
If we would like to take advantage of this functionality, we will have to use the IgxToggleActionDirective from the IgxToggleModule and assign the IgxToggleDirective to it.
Note
The IgxToggleActionDirective should be declared on the element we are planing to use like a trigger (toggle).
<!--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
By default IgxToggleActionDirective excludes its host element from the closeOnOutsideClick property. Therefore, clicking on the host element will not fire any event. Additionally, this directive will set its host element as the overlay settings target.
Automatic Toggle Service Provider
There is a convenient way to keep the state of the igxToggle directive and command it via the igxNavigationService provider. We just need to set an identifier for our igxToggle element, which will be used to register the toggle with the service. If we would like to control its state automatically, we have to pass this identifier to the 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
We can manipulate the position of the toggle container along the corresponding axis by a provided amount. The setOffset method also supports an optional offsetMode parameter that determines whether to add to the current offset values or set them to a specific value.
// 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