Toggle

Ignite UI for Angular の Toggle ディレクティブは、ユーザーが簡単に開閉できるボックスにコンテンツをラップします。

Angular Toggle の例

このサンプルが気に入りましたか? 完全な Angular ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

使用方法

はじめに

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:

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。