Angular Toggle (トグル) ディレクティブの概要
Ignite UI for Angular Toggle ディレクティブを使用すると、ユーザー操作を通じて DOM 内のコンテナーを切り替え可能にできます。
Angular Toggle の例
Ignite UI for Angular Toggle を使用した作業の開始
Ignite UI for Angular Toggle ディレクティブを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。
ng add igniteui-angular
Ignite UI for Angular については、「はじめに」トピックをご覧ください。
次に、app.module.ts ファイルに IgxToggleModule をインポートします。
// 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 Toggle モジュールまたはディレクティブをインポートしたので、igxToggle ディレクティブの使用を開始できます。
Angular Toggle ディレクティブの使用
トグルの表示
トグルのコンテンツを表示および非表示にするには、open および close メソッドを使用します。
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>
コード例
位置の変更
次のサンプルでは、さまざまな配置方法を使用してコンテンツをボタンの下に表示します。
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);
}
トグルは以下のようになります。
トグル自動操作
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 として設定します。
自動トグル サービス プロバイダー
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>
すべて適切に設定できると、結果は以下のようになります。
トグル コンテナーのオフセット
対応する軸に沿ったトグル コンテナーの位置を指定した量だけ操作できます。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 リファレンス
その他のコンポーネントおよびディレクティブ (またはそのいずれか) で使用した API:
テーマの依存関係
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。
GitHub