クラス IgxSwitchComponent

Ignite UI for Angular Switch - ヘルプ

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

<igx-switch [checked]="true">
  簡易な switch
</igx-switch>

階層

  • IgxSwitchComponent

実装

  • ControlValueAccessor
  • EditorProvider

プロパティ

ariaLabel

ariaLabel: string | null = null

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

<igx-switch aria-label="Label1"></igx-switch>
let ariaLabel =  this.switch.ariaLabel;
次のメンバー:

IgxSwitchComponent

ariaLabelledBy

ariaLabelledBy: string = this.labelId

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

<igx-switch aria-labelledby = "Label1"></igx-switch>
let ariaLabelledBy = this.switch.ariaLabelledBy;
次のメンバー:

IgxSwitchComponent

change

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

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

次のメンバー:

IgxSwitchComponent

checked

checked: boolean = false

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

 <igx-switch [checked] = "true"></igx-switch>
let isChecked =  this.switch.checked;
次のメンバー:

IgxSwitchComponent

cssClass

cssClass: string = "igx-switch"

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

let switchClass = this.switch.cssClass;
次のメンバー:

IgxSwitchComponent

disableRipple

disableRipple: boolean = false

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

<igx-switch [disableRipple]="true"></igx-switch>
let isRippleDisabled = this.switch.disableRipple;
次のメンバー:

IgxSwitchComponent

disabled

disabled: boolean = false

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

<igx-switch [disabled] = "true"><igx-switch>
let isDisabled =  this.switch.disabled;
次のメンバー:

IgxSwitchComponent

focused

focused: boolean = false

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

this.switch.focused = true;
let isFocused =  this.switch.focused;
次のメンバー:

IgxSwitchComponent

id

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

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

<igx-switch id="my-first-switch"></igx-switch>
let switchId =  this.switch.id;
次のメンバー:

IgxSwitchComponent

labelId

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

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

<igx-switch labelId="Label1"></igx-switch>
let labelId =  this.switch.labelId;
次のメンバー:

IgxSwitchComponent

labelPosition

labelPosition: SwitchLabelPosition | string = "after"

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

<igx-switch labelPosition="before"></igx-switch>
let labelPosition =  this.switch.labelPosition;
次のメンバー:

IgxSwitchComponent

name

name: string

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

<igx-switch name = "Switch1"></igx-switch>
let name =  this.switch.name;
次のメンバー:

IgxSwitchComponent

nativeCheckbox

nativeCheckbox: ElementRef

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

let checkboxElement =  this.switch.nativeCheckbox;
次のメンバー:

IgxSwitchComponent

nativeLabel

nativeLabel: any

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

let labelElement =  this.switch.nativeLabel;
次のメンバー:

IgxSwitchComponent

placeholderLabel

placeholderLabel: any

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

let labelPlaceholder =  this.switch.placeholderLabel;
次のメンバー:

IgxSwitchComponent

required

required: boolean = false

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

<igx-switch [required]="true"></igx-switch>
let isRequired = this.switch.required;
次のメンバー:

IgxSwitchComponent

tabindex

tabindex: number = null

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

<igx-switch [tabindex]="1"></igx-switch>
let tabIndex =  this.switch.tabindex;
次のメンバー:

IgxSwitchComponent

value

value: any

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

<igx-switch [value] = "switchValue"></igx-switch>
let value =  this.switch.value;
次のメンバー:

IgxSwitchComponent

メソッド

toggle

  • toggle(): void
  • スイッチのチェックされた状態を切り替えます。

    this.switch.toggle();
    次のメンバー:

    IgxSwitchComponent

    返却 void