クラス IgxSwitchComponent

Switch コンポーネントは、バイナリ選択の選択コンポーネントです。

@igxmodule

IgxSwitchModule

@igxtheme

igx-switch-theme, igx-tooltip-theme

@igxkeywords

switch, states, tooltip

@igxgroup

データ入力と表示

@備考:

Ignite UI Switch はオン/オフまたは true/false 状態の間に切り替えます。

@例:
<igx-switch [checked]="true">
  Simple switch
</igx-switch>

階層

  • IgxSwitchComponent

実装

  • ControlValueAccessor
  • EditorProvider

プロパティ

ariaLabel

ariaLabel: string | null = null

aria-label 属性の値を取得または設定します。

@例:
<igx-switch aria-label="Label1"></igx-switch>

ariaLabelledBy

ariaLabelledBy: string = this.labelId

aria-labelledby 属性を設定または取得します。 設定されない場合、aria-labelledBy の値は labelId 属性の値と等しくなります。

@例:
<igx-switch aria-labelledby = "Label1"></igx-switch>

Readonly change

change: EventEmitter<IChangeSwitchEventArgs> = new EventEmitter<IChangeSwitchEventArgs>()

Switch 状態が変更された後に発生するイベント。 イベント引数として IgxSwitchComponent および checked プロパティへの参照を提供します。

checked

checked: boolean = false

Switch がオンまたはオフかどうかを取得または設定します。 デフォルトは 'false' です。

@例:
 <igx-switch [checked]="true"></igx-switch>

cssClass

cssClass: string = "igx-switch"

Switch コンポーネントのクラスを返します。

@例:
let switchClass = this.switch.cssClass;

disableRipple

disableRipple: boolean = false

リップル エフェクトを有効または無効にします。 設定されない場合、disableRipple の値は false です。

@例:
<igx-switch [disableRipple]="true"></igx-switch>

disabled

disabled: boolean = false

disabled 属性を設定または取得します。 デフォルトは 'false' です。

@例:
<igx-switch [disabled]="true"><igx-switch>

focused

focused: boolean = false

Switch コンポーネントがフォーカスされるかどうかを取得または設定します。 デフォルト値は false です。

@例:
this.switch.focused = true;

id

id: string = `igx-switch-${nextId++}`

Switch コンポーネントの id を設定または取得します。 設定されない場合、最初の switch コンポーネントの id"igx-switch-0" になります。

@例:
<igx-switch id="my-first-switch"></igx-switch>

labelId

labelId: string = `${this.id}-label`

Switch コンポーネントで label 要素の id を設定または取得します。 設定されない場合、最初の switch コンポーネントのラベルの値は "igx-switch-0-label" になります。

@例:
<igx-switch labelId="Label1"></igx-switch>

labelPosition

labelPosition: SwitchLabelPosition | string = "after"

Switch コンポーネントで label の位置を設定または取得します。 設定されない場合、labelPosition の値は "after" です。

@例:
<igx-switch labelPosition="before"></igx-switch>

name

name: string

Switch コンポーネントの name 属性を設定または取得します。

@例:
<igx-switch name="Switch1"></igx-switch>

nativeCheckbox

nativeCheckbox: ElementRef

ネイティブ チェックボックス要素への参照を返します。

@例:
let checkboxElement =  this.switch.nativeCheckbox;

nativeLabel

nativeLabel: any

ネイティブ ラベル要素への参照を返します。

@例:
let labelElement =  this.switch.nativeLabel;

placeholderLabel

placeholderLabel: any

ラベル プレースホルダー要素への参照を返します。

@例:
let labelPlaceholder = this.switch.placeholderLabel;

required

required: boolean = false

switch が必須かどうかを設定または取得します。 設定されない場合、required の値は false です。

@例:
<igx-switch [required]="true"></igx-switch>

tabindex

tabindex: number = null

tabindex 属性の値を取得または設定します。

@例:
<igx-switch [tabindex]="1"></igx-switch>

value

value: any

Switch コンポーネントの value 属性を設定または取得します。

@例:
<igx-switch [value]="switchValue"></igx-switch>

メソッド

toggle

  • toggle(): void