Ignite UI for Angular

すべて
  • パブリック
  • パブリック/保護
  • すべて

Class IgxCheckboxComponent

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

Igx Module

IgxCheckboxModule

Igx Theme

igx-checkbox-theme

Igx Keywords

checkbox, label

Igx Group

データ入力 & 表示

備考

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

例

<igx-checkbox [checked]="true">
  simple checkbox
</igx-checkbox>

階層

Hierarchy

  • CheckboxBaseDirective
    • IgxCheckboxComponent

実装

  • AfterViewInit
  • ControlValueAccessor
  • EditorProvider

コンストラクター

プロパティ

アクセサー

コンストラクター

constructor

プロパティ

ariaLabel

ariaLabel: string = null

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

例

<igx-checkbox aria-label="Checkbox1"></igx-checkbox>

let ariaLabel = this.checkbox.ariaLabel;

ariaLabelledBy

ariaLabelledBy: string = ...

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

例

<igx-checkbox aria-labelledby="Checkbox1"></igx-checkbox>

let ariaLabelledBy = this.checkbox.ariaLabelledBy;

Readonlychange

change: EventEmitter<IChangeCheckboxEventArgs> = ...

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

cssClass

cssClass: string = 'igx-checkbox'

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

例

let class = this.checkbox.cssClass;

disabled

disabled: boolean = false

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

例

<igx-checkbox disabled></igx-checkbox>

let isDisabled = this.checkbox.disabled;

disableRipple

disableRipple: boolean = false

リップル効果を有効または無効にします。 設定されていない場合、disableRipple の値は false になります。

例

<igx-checkbox [disableRipple]="true"></igx-checkbox>

let isRippleDisabled = this.checkbox.desableRipple;

disableTransitions

disableTransitions: boolean = false

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

例

<igx-checkbox [disableTransitions]="true"></igx-checkbox>

let disableTransitions = this.checkbox.disableTransitions;

focused

focused: boolean = false

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

例

this.checkbox.focused =  true;

let isFocused = this.checkbox.focused;

id

id: string = ...

チェックボックス コンポーネントの 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;

invalid

invalid: boolean = false

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

例

<igx-checkbox invalid></igx-checkbox>

let isInvalid = this.checkbox.invalid;

labelId

labelId: string = ...

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

例

<igx-checkbox labelId="Label1"></igx-checkbox>

let labelId =  this.component.labelId;

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;

nativeInput

nativeInput: ElementRef

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

例

let checkboxElement =  this.component.checkboxElement;

nativeLabel

nativeLabel: ElementRef

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


@example
let labelElement =  this.component.nativeLabel;

ngControl

ngControl: NgControl

placeholderLabel

placeholderLabel: ElementRef

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


@example
let labelPlaceholder =  this.component.placeholderLabel;

readonly

readonly: boolean = false

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

例

<igx-checkbox [readonly]="true"></igx-checkbox>

let readonly = this.checkbox.readonly;

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;

アクセサー

checked

nativeElement

required