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:

    テーマの依存関係

    その他のリソース

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