Class IgxSwitchComponent

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

Igx Module

IgxSwitchModule

Igx Theme

igx-switch-theme, igx-tooltip-theme

Igx Keywords

switch, states, tooltip

Igx Group

データ入力 & 表示

備考

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

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

階層

Hierarchy (view full)

実装

  • ControlValueAccessor
  • EditorProvider
  • AfterViewInit

コンストラクター

プロパティ

ariaLabel: string = null

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

<igx-checkbox aria-label="Checkbox1"></igx-checkbox>
let ariaLabel = this.checkbox.ariaLabel;
ariaLabelledBy: string = ...

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

<igx-checkbox aria-labelledby="Checkbox1"></igx-checkbox>
let ariaLabelledBy = this.checkbox.ariaLabelledBy;
change: EventEmitter<IChangeCheckboxEventArgs> = ...

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

cssClass: string = 'igx-switch'

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

let switchClass = this.switch.cssClass;
disableRipple: boolean = false

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

<igx-checkbox [disableRipple]="true"></igx-checkbox>
let isRippleDisabled = this.checkbox.desableRipple;
disableTransitions: boolean = false

Checkbox は すべての css トランジションを無効に設定するかどうかを取得または設定します。 デフォルト値は false です。

<igx-checkbox [disableTransitions]="true"></igx-checkbox>
let disableTransitions = this.checkbox.disableTransitions;
disabled: boolean = false

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

<igx-switch disabled><igx-switch>
focused: boolean = false

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

this.switch.focused = true;
id: string = ...

チェックボックス コンポーネントの id を取得または設定します。 最初のチェックボックス コンポーネントの id"igx-checkbox-0" になります。

<igx-checkbox id="my-first-checkbox"></igx-checkbox>
let checkboxId =  this.checkbox.id;
indeterminate: boolean = false

チェックボックスの不確定ビジュアル ステートを取得または設定します。 デフォルト値は false;

<igx-checkbox [indeterminate]="true"></igx-checkbox>
let isIndeterminate = this.checkbox.indeterminate;
invalid: boolean = false

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

<igx-switch invalid></igx-switch>
let isInvalid = this.switch.invalid;
labelId: string = ...

label 要素の id を取得または設定します。設定されない場合、最初のチェックボックス コンポーネントの label の id は "igx-checkbox-0-label" になります。

<igx-checkbox labelId="Label1"></igx-checkbox>
let labelId =  this.component.labelId;
labelPosition: string = LabelPosition.AFTER

label の位置を取得または設定します 設定されていない場合、labelPosition"after" です。

<igx-checkbox labelPosition="before"></igx-checkbox>
let labelPosition =  this.checkbox.labelPosition;
name: string

name 属性を設定または取得します。

<igx-checkbox name="Checkbox1"></igx-checkbox>
let name =  this.checkbox.name;
nativeInput: ElementRef<any>

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

let checkboxElement =  this.component.checkboxElement;
nativeLabel: ElementRef<any>

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


@example
let labelElement = this.component.nativeLabel;
ngControl: NgControl
placeholderLabel: ElementRef<any>

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


@example
let labelPlaceholder = this.component.placeholderLabel;
readonly: boolean = false

チェックボックスが ReadOnly かどうかを取得または設定します。 デフォルト値は false です。

<igx-checkbox [readonly]="true"></igx-checkbox>
let readonly = this.checkbox.readonly;
tabindex: number = null

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

<igx-checkbox [tabindex]="1"></igx-checkbox>
let tabIndex =  this.checkbox.tabindex;
value: any

value 属性を設定または取得します。

<igx-checkbox [value]="'CheckboxValue'"></igx-checkbox>
let value =  this.checkbox.value;

アクセサー

  • get checked(): boolean
  • チェックボックスがチェックされたかどうかを取得または設定します。 デフォルト値は false です。

    <igx-checkbox [checked]="true"></igx-checkbox>
    
    let isChecked =  this.checkbox.checked;
    

    返却 boolean

  • set checked(value): void
  • switch がオンまたはオフかどうかを取得または設定します。 デフォルト値は 'false' です。

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

    パラメーター

    • value: boolean

    返却 void