クラス IgxCheckboxComponent

特定の条件でバイナリの選択を可能にします。

@igxmodule

IgxCheckboxModule

@igxtheme

igx-checkbox-theme

@igxkeywords

checkbox, label

@igxgroup

Data entry and display

@備考:

Ignite UI Checkbox は、バイナリの選択を可能にする選択コントロールです。ネイティブ ブラウザーのチェックボックスと同様に動作します。

@例:
<igx-checkbox checked="true">
  simple checkbox
</igx-checkbox>

階層

  • IgxCheckboxComponent

実装

  • ControlValueAccessor
  • EditorProvider

プロパティ

ariaLabel

ariaLabel: string | null = null

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

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

ariaLabelledBy

ariaLabelledBy: string = this.labelId

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

@例:
<igx-checkbox aria-labelledby = "Checkbox1"></igx-checkbox>
let ariaLabelledBy =  this.checkbox.ariaLabelledBy;

Readonly change

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

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

checked

checked: boolean = false

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

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

cssClass

cssClass: string = "igx-checkbox"

チェックボックス コンポーネントのクラスを返します。

@例:
let class =  this.checkbox.cssClass;

disableRipple

disableRipple: boolean = false

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

@例:
<igx-checkbox [disableRipple] = "true"></igx-checkbox>
let isRippleDisabled = this.checkbox.desableRipple;

disableTransitions

disableTransitions: boolean = false

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

@例:
<igx-checkbox [disableTransitions]="true"></igx-checkbox>
let disableTransitions = this.checkbox.disableTransitions;

disabled

disabled: boolean = false

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

@例:
<igx-checkbox [disabled] = "true"></igx-checkbox>
let isDisabled = this.checkbox.disabled;

focused

focused: boolean = false

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

@例:
this.checkbox.focused =  true;
let isFocused =  this.checkbox.focused;

id

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

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

@例:
<igx-checkbox id="my-first-checkbox"></igx-checkbox>
let checkboxId =  this.checkbox.id;

indeterminate

indeterminate: boolean = false

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

@例:
<igx-checkbox [indeterminate] = "true"></igx-checkbox>
let isIndeterminate = this.checkbox.indeterminate;

labelId

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

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

@例:
<igx-checkbox labelId = "Label1"></igx-checkbox>
let labelId =  this.checkbox.labelId;

labelPosition

labelPosition: LabelPosition | string = LabelPosition.AFTER

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

@例:
<igx-checkbox labelPosition = "before"></igx-checkbox>
let labelPosition =  this.checkbox.labelPosition;

name

name: string

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

@例:
<igx-checkbox name = "Checkbox1"></igx-checkbox>
let name =  this.checkbox.name;

nativeCheckbox

nativeCheckbox: ElementRef

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

@例:
let checkboxElement =  this.checkbox.checkboxElement;

nativeLabel

nativeLabel: any

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

@example let labelElement = this.checkbox.nativeLabel; ```

placeholderLabel

placeholderLabel: any

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

@example let labelPlaceholder = this.checkbox.placeholderLabel; ```

readonly

readonly: boolean = false

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

@例:
<igx-checkbox [readonly]="true"></igx-checkbox>
let readonly = this.checkbox.readonly;

required

required: boolean = false

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

@例:
<igx-checkbox [required] = "true"></igx-checkbox>
let isRequired =  this.checkbox.required;

tabindex

tabindex: number = null

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

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

value

value: any

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

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

メソッド

toggle

  • toggle(): void