Toggle
Ignite UI for Angular の Toggle ディレクティブは、ユーザーが簡単に開閉できるボックスにコンテンツをラップします。
Angular Toggle の例
使用方法
はじめに
Toggle コンポーネントを初期化にするには、まず IgxToggleModule
を app.module.ts ファイルにインポートします。
// app.module.ts
...
import { IgxToggleModule } from 'igniteui-angular';
@NgModule({
...
imports: [..., IgxToggleModule]
...
})
export class AppModule {}
トグルの表示
トグルのコンテンツを表示および非表示にするには、open および close メソッドを使用します。
import { IgxToggleDirective } from 'igniteui-angular'
...
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="raised" (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
に設定する必要があります。さらに、closeOnEsc
プロパティのデフォルトの設定は 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="raised" [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="raised">Toggle</button>
<div igxToggle id="toggleId" class="toggle-content">
<section class="toggle-section">
<h6>Toggled by the service provider</h6>
</section>
</div>
すべて適切に設定できると、結果は以下のようになります。
トグル コンテナーのオフセット
対応する軸に沿ったトグル コンテナーの位置を指定した量だけ操作できます。
// deltaX and deltaY determine by how much the container will be offset compared to its' previous position
public offsetToggle() {
const deltaX = 30;
const deltaY = 30;
this.toggle.setOffset(deltaX, deltaY);
}
API リファレンス
その他のコンポーネントおよびディレクティブ (またはそのいずれか) で使用した API:
テーマの依存関係
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。