Toggle

igxToggle ディレクティブを使用すると、トグル コンテナーを開く、操作、アニメーションに適用、および閉じることができます。すべてのトグル コンポーネントは igxToggle または igxToggleAction を内部に実装します。igxToggleAction ディレクティブがその他のコンポーネントを制御する間にドロップダウンなどのトグルに基づくコンポーネントおよびビューを実装できます。

Toggle デモ

使用方法

Toggle は、簡単に開いたり、閉じたりできるボックスにコンテンツをラップします。

Ignite UI for Angular Toggle を初期化する前に、IgxToggleModuleapp.module.ts ファイルにインポートします。また、igxButton ディレクティブを使用するため、IgxButtonModuleapp.module.ts にインポートする必要があります。

// app.module.ts

...
import { IgxToggleModule, IgxButtonModule } from 'igniteui-angular'

@NgModule({
    ...
    imports: [..., IgxToggleModule, IgxButtonModule]
    ...
})
export class AppModule {}

コンポーネントのテンプレートで、トグル可能になる要素にディレクティブを適用します。

<!--template.component.html-->
<button class="toggle-button"  igxButton="raised" (click)="toggleContent()">Toggle</button>
<div class="toggle-content" igxToggle>
    <section class="toggle-section">
        <ul>
            <li>Bananas</li>
            <li>Apples</li>
            <li>Strawberries</li>
            <li>Raspberry</li>
            <li>Cherry</li>
        </ul>
    </section>
</div>

このコンテンツを表示/非表示にするには、open または close メソッドを呼び出します。

import { IgxToggleDirective } from 'igniteui-angular'

@Component({
    ...
})
export class Class {
    @ViewChild(IgxToggleDirective) toggle: IgxToggleDirective;

    toggle() {
        if (this.toggle.collapsed) {
            this.toggle.open();
        } else {
            this.toggle.close();
        }
    }
}

以下は結果です:

次のサンプルでは、さまざまな配置方法を使用してコンテンツをボタンの下に表示します。

// app.module.ts

...
import { IgxToggleModule, IgxButtonModule } from 'igniteui-angular'

@NgModule({
    ...
    imports: [..., IgxToggleModule, IgxButtonModule]
    ...
})
export class AppModule {}
<!--template.component.html-->
<div class="sample-wrapper">
  <article class="sample-column">
    <button class="toggle-button" #button igxButton="raised" (click)="toggle()">Toggle</button>
    <div class="toggle-content" igxToggle>
      <section class="toggle-section">
          <h2>Box</h2>
      </section>
    </div>
  </article>
</div>

igxToggle は、IgxOverlayService を使用し、コンテンツの表示方法を制御するために open および toggle メソッドが任意のオーバーレイ設定を受け取ります。省略した場合は、上のサンプルのようにデフォルトのオーバーレイ設定が使用されます。

// template.component.ts

...
    @ViewChild(IgxToggleDirective) public igxToggle: IgxToggleDirective;
    @ViewChild("button") public igxButton: ElementRef;
    public _positionSettings = {
        horizontalStartPoint: HorizontalAlignment.Left,
        verticalStartPoint: VerticalAlignment.Bottom
    };
    public _overlaySettings = {
        closeOnOutsideClick: true,
        modal: false,
        positionStrategy: new ConnectedPositioningStrategy(this._positionSettings),
        scrollStrategy: new CloseScrollStrategy()
    };
    public toggle() {
        this._overlaySettings.positionStrategy.settings.target = this.igxButton.nativeElement;
        this.igxToggle.toggle(this._overlaySettings);
    }

トグル自動操作

このメソッドの呼び出しを回避するための onClick ハンドラーを含む、参照トグルの状態を変更できるディレクティブがあります。この機能を使用するには、同じ IgxToggleModule にある IgxToggleActionDirective を使用します。

// app.module.ts

...
import { IgxToggleModule, IgxButtonModule } from 'igniteui-angular'

@NgModule({
    ...
    imports: [..., IgxToggleModule, IgxButtonModule]
    ...
})
export class AppModule {}

次にテンプレートで IgxToggleDirective を割り当てて IgxToggleActionDirective を宣言します。トリガー (トグル) として使用する要素で 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">
        <img src="link to random image"/>
    </section>
</div>

この変更後、トグルが以下のように動作します。

サービス プロバイダーを使用するトグル自動操作

状態を保持し、igxToggle をコマンドするには、igxNavigationService プロパイダーを使用します。アプリケーションで状態を追跡する場合に便利です。igxToggle ディレクティブの識別子を設定すると、サービスの登録が処理されます。この状態を自動的に制御するには、この識別子をヘルパー igxToggleActionDirective に渡します。

// app.module.ts

...
import { IgxToggleModule, IgxButtonModule } from 'igniteui-angular'

@NgModule({
    ...
    imports: [..., IgxToggleModule, IgxButtonModule]
    ...
})
export class AppModule {}
<!--template.component.html-->
<button igxToggleAction="toggleId" [closeOnOutsideClick]="true" class="toggle-button"  igxButton="raised">Toggle</button>
<div igxToggle id="toggleId" class="toggle-content">
    <section class="toggle-section">
    <h3>Click 
        <br/> Out of the Box</h3>
    </section>
</div>

結果は以下のようになります。

IgxOverlayOutlet ディレクティブ

IgxOverlayOutlet は、コンポーネント テンプレートで要素を igxOverlay アウトレット コンテナとしてマークする方法を提供します。ディレクティブ インスタンスは overlay-outlet としてエクスポートされるため、テンプレート内で割り当てることができます。

<div igxOverlayOutlet #outlet="overlay-outlet"></div>

これによって、Outlet テンプレート変数をトグル操作の設定として提供できます。

<button [igxToggleAction]="reference" [igxToggleOutlet]="outlet">Toggle</button>
<custom-component #reference></custom-component>

API まとめ

追加のリソース

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