Components List

Angular Switch (スイッチ) コンポーネントの概要

Ignite UI for Angular Switch コンポーネントは iOS の switch コンポーネントと同様に動作するバイナリ選択コンポーネントです。

Angular Switch の例

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 { IgxSwitchModule } from "igniteui-angular";
import { SwitchSample1Component } from "./switch-sample-1/switch-sample-1.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	SwitchSample1Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxSwitchModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
ts

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

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

<igx-switch [checked]="true">
    Simple switch
</igx-switch>
html

:host {
    display: block;
    padding: 16px;
}
scss

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

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

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

ng add igniteui-angular
cmd

Ignite UI for Angular については、「はじめに」トピックをご覧ください。

次に、app.module.ts ファイルに IgxSwitchModule をインポートします。

// app.module.ts

...
import { IgxSwitchModule } from 'igniteui-angular';
// import { IgxSwitchModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxSwitchModule],
    ...
})
export class AppModule {}
typescript

あるいは、16.0.0 以降、IgxSwitchComponent をスタンドアロンの依存関係としてインポートできます。

// home.component.ts

import { IgxSwitchComponent } from 'igniteui-angular';
// import { IgxSwitchComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({
  selector: 'app-home',
  template: ` <igx-switch [checked]="true"> Simple switch </igx-switch> `,
  styleUrls: ['home.component.scss'],
  standalone: true,
  imports: [IgxSwitchComponent],
})
export class HomeComponent {}
typescript

Ignite UI for Angular Switch モジュールまたはコンポーネントをインポートしたので、igx-switch コンポーネントの使用を開始できます。

Angular Switch の使用

中核となるスイッチコンポーネントはオン/オフ状態の切り替えが可能です。デフォルトのスタイル設定はマテリアルデザインガイドラインの選択コントロールの仕様に基づきます。

デモのようにシンプルなスイッチを作成するには、コンポーネントのテンプレートに以下のコードを追加します。

<igx-switch [checked]="true"> Simple switch </igx-switch>
html

Switch プロパティ

上記のコードを拡張するには、スイッチプロパティをデータにバインドします。name および state の 2 つのプロパティを持つ設定オブジェクトの配列があるとしましょう。スイッチコンポーネントの checked プロパティを基礎となるオブジェクトの state プロパティにバインドします。同じように、value プロパティを name にバインドします。

// toggle.component.ts
...
public settings = [
    { name: 'WiFi', state: false},
    { name: 'Bluetooth', state: true},
    { name: 'Device visibility', state: false}
];
typescript

コンポーネントテンプレートに各設定のためのスイッチを追加し、相対するプロパティにバインドします。

<!--toggle.component.html-->

<igx-switch *ngFor="let setting of settings" [checked]="setting.state">
  {{ setting.name }}
</igx-switch>
html

スタイルを追加します。

:host {
  display: flex;
  flex-flow: column nowrap;
  padding: 16px;
}

igx-switch {
  margin-top: 24px;
}
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 { IgxSwitchModule } from "igniteui-angular";
import { SwitchSample2Component } from "./switch-sample-2/switch-sample-2.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	SwitchSample2Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxSwitchModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
ts

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

@Component({
  selector: 'app-switch-sample-2',
  styleUrls: ['./switch-sample-2.component.scss'],
  templateUrl: './switch-sample-2.component.html'
})
export class SwitchSample2Component {
  public settings = [
    { name: 'WiFi', state: false},
    { name: 'Bluetooth', state: true},
    { name: 'Device visibility', state: false}
  ];
}
ts

<igx-switch *ngFor="let setting of settings" [checked]="setting.state">
  {{ setting.name }}
</igx-switch>

html

:host {
    display: flex;
    flex-flow: column nowrap;
    padding: 16px;
}

igx-switch {
    margin-top: 24px;
}
scss

ラベル位置

スイッチの labelPosition プロパティを使用してラベルを配置できます。

<igx-switch labelPosition="before"></igx-switch>
html

labelPosition が設定されていない場合、ラベルはスイッチの後に配置されます。

スタイル設定

スイッチのスタイル設定を始めるには、すべてのテーマ関数とコンポーネントミックスインが存在する index ファイルをインポートする必要があります。

@use "igniteui-angular/theming" as *;

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
scss

次に、switch-theme を拡張する新しいテーマを作成し、そのパラメーターを使用してスイッチの項目をスタイル設定します。

$custom-switch-theme: switch-theme(
  $thumb-on-color: #ecaa53,
  $track-on-color: #f0cb9c,
);
scss

最後にコンポーネントのテーマをアプリケーションに含めます。

@include css-vars($custom-switch-theme);
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 { IgxSwitchModule } from "igniteui-angular";
import { SwitchStylingComponent } from "./switch-styling/switch-styling.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	SwitchStylingComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxSwitchModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
ts

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

@Component({
  selector: 'app-switch-styling',
  styleUrls: ['./switch-styling.component.scss'],
  templateUrl: './switch-styling.component.html'
})
export class SwitchStylingComponent {
  public settings = [
    { name: 'WiFi', state: false},
    { name: 'Bluetooth', state: true},
    { name: 'Device visibility', state: false}
  ];
}
ts

<igx-switch *ngFor="let setting of settings" [checked]="setting.state">
  {{ setting.name }}
</igx-switch>

html

@use '../../variables' as *;

//Sample related styling
igx-switch {
    margin-top: 24px;
}

$custom-switch-theme: switch-theme(
    $thumb-on-color: #ECAA53,
    $track-on-color: #F0CB9C
);

:host {
    display: flex;
    flex-flow: column nowrap;
    padding: 16px;

	@include css-vars($custom-switch-theme);
}

scss

API リファレンス

テーマの依存関係

IgxRipple テーマ

その他のリソース

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