Angular Toggle (トグル) ディレクティブの概要

Ignite UI for Angular Toggle ディレクティブを使用すると、ユーザー操作を通じて DOM 内のコンテナーを切り替え可能にできます。

Angular Toggle の例

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxButtonModule,
	IgxToggleModule
 } from "igniteui-angular";
import { ToggleSample1Component } from "./toggle-sample-1/toggle-sample-1.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	ToggleSample1Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxButtonModule,
	IgxToggleModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component, ViewChild } from '@angular/core';
import { IgxToggleDirective } from 'igniteui-angular';

@Component({
  selector: 'app-toggle-sample-1',
  styleUrls: ['./toggle-sample-1.component.scss', '../toggle-samples.scss'],
  templateUrl: './toggle-sample-1.component.html'
})
export class ToggleSample1Component {

  @ViewChild(IgxToggleDirective, { static: true })
  public toggle: IgxToggleDirective;

  public toggleContent() {
    if (this.toggle.collapsed) {
      this.toggle.open();
    } else {
      this.toggle.close();
    }
  }
}
tsコピー

<div class="sample-column">
    <button class="toggle-button" igxButton="raised" (click)="toggleContent()">Toggle</button>
    <div class="toggle-content" igxToggle>
        <section class="toggle-section">
            <img src="https://www.infragistics.com/angular-demos-lob/assets/images/toggle/nature.jpg"/>
        </section>
    </div>
</div>
htmlコピー

.toggle-section{
    background-color: white;
}
scssコピー

Edit in: CodesandboxStackBlitz

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

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

Ignite UI for Angular Toggle を使用した作業の開始

Ignite UI for Angular Toggle ディレクティブを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

ng add igniteui-angular
cmd

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 {}
typescript

あるいは、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 {}
typescript

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();
        }
    }
}
typescript

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

<!--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>
html

コード例

位置の変更

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

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

デフォルトで、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);
    }
typescript

トグルは以下のようになります。

EXAMPLE

MODULES

TS

HTML

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxButtonModule,
	IgxToggleModule
 } from "igniteui-angular";
import { ToggleComponent } from "./toggle/toggle.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	ToggleComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxButtonModule,
	IgxToggleModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component, ElementRef, ViewChild } from '@angular/core';

import {
    ConnectedPositioningStrategy,
    HorizontalAlignment,
    IgxToggleDirective,
    VerticalAlignment,
    OverlaySettings
} from 'igniteui-angular';

@Component({
  selector: 'app-toggle',
  styleUrls: ['./toggle-samples.scss'],
  templateUrl: './toggle.component.html'
})
export class ToggleComponent {
    @ViewChild(IgxToggleDirective, { static: true }) public igxToggle: IgxToggleDirective;
    @ViewChild('button', { static: true }) public igxButton: ElementRef;

    public _positionSettings = {
        horizontalStartPoint: HorizontalAlignment.Left,
        verticalStartPoint: VerticalAlignment.Bottom
    };

    public _overlaySettings: OverlaySettings = {
        closeOnOutsideClick: false,
        modal: false,
        closeOnEscape: true,
        positionStrategy: new ConnectedPositioningStrategy(this._positionSettings)
    };

    public toggle() {
        this._overlaySettings.target = this.igxButton.nativeElement;
        this.igxToggle.toggle(this._overlaySettings);
    }
}
tsコピー

<div class="sample-column">
    <button class="toggle-button" #button igxButton="raised" (click)="toggle()">Toggle</button>
    <div class="toggle-content" igxToggle>
        <section class="toggle-section">
            <img src="https://www.infragistics.com/angular-demos-lob/assets/images/toggle/nature.jpg"/>
        </section>
    </div>
</div>
htmlコピー

Edit in: CodesandboxStackBlitz

トグル自動操作

open および close メソッドの使用を回避するために、onClick ハンドラーを含む、参照するトグルの状態を自動的に変更できるディレクティブがあります。

この機能を利用するには、IgxToggleModule の IgxToggleActionDirective を使用して IgxToggleDirective を割り当てる必要があります。

トリガー (トグル) として使用する要素で 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>
html

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

EXAMPLE

MODULES

TS

HTML

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxButtonModule,
	IgxToggleModule
 } from "igniteui-angular";
import { ToggleSample2Component } from "./toggle-sample-2/toggle-sample-2.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	ToggleSample2Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxButtonModule,
	IgxToggleModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component } from '@angular/core';

@Component({
    selector: 'app-toggle-sample-2',
    styleUrls: ['../toggle-samples.scss'],
    templateUrl: './toggle-sample-2.component.html'
})
export class ToggleSample2Component { }
tsコピー

<div class="sample-column">
    <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>
</div>
htmlコピー

Edit in: CodesandboxStackBlitz

デフォルトで、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>
html

すべて適切に設定できると、結果は以下のようになります。

EXAMPLE

MODULES

TS

HTML

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxButtonModule,
	IgxToggleModule
 } from "igniteui-angular";
import { ToggleSample3Component } from "./toggle-sample-3/toggle-sample-3.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	ToggleSample3Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxButtonModule,
	IgxToggleModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component } from '@angular/core';

@Component({
  selector: 'app-toggle-sample-3',
  styleUrls: ['../toggle-samples.scss'],
  templateUrl: './toggle-sample-3.component.html'
})
export class ToggleSample3Component { }
tsコピー

<div class="sample-column">
    <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>
</div>
htmlコピー

Edit in: CodesandboxStackBlitz

トグル コンテナーのオフセット

対応する軸に沿ったトグル コンテナーの位置を指定した量だけ操作できます。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);
}
typescript

// 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);
}
typescript

EXAMPLE

MODULES

TS

HTML

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxButtonModule,
	IgxToggleModule
 } from "igniteui-angular";
import { ToggleSample4Component } from "./toggle-sample-4/toggle-sample-4.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	ToggleSample4Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxButtonModule,
	IgxToggleModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component, ViewChild } from '@angular/core';
import { IgxToggleDirective } from 'igniteui-angular';

@Component({
  selector: 'app-toggle-sample-4',
  styleUrls: ['../toggle-samples.scss'],
  templateUrl: './toggle-sample-4.component.html'
})
export class ToggleSample4Component {
    @ViewChild(IgxToggleDirective, { static: true }) public toggle: IgxToggleDirective;

    public offsetToggle() {
        const deltaX = 30;
        const deltaY = 30;
        this.toggle.setOffset(deltaX, deltaY);
    }
}
tsコピー

<div class="sample-column">
    <button class="toggle-button" igxButton="raised" [igxToggleAction]="toggleRef" (click)="offsetToggle()">Toggle</button>
    <div class="toggle-content" igxToggle #toggleRef="toggle">
        <section class="toggle-section">
            <h6>Offsetting the toggle container</h6>
        </section>
    </div>
</div>
htmlコピー

Edit in: CodesandboxStackBlitz

API リファレンス

• IgxToggleDirective
• IgxToggleActionDirective

その他のコンポーネントおよびディレクティブ (またはそのいずれか) で使用した API:

• IgxOverlayOutletDirective
• IgxOverlayService
• igxNavigationService

テーマの依存関係

• IgxOverlay テーマ

その他のリソース

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

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)