メインコンテンツまでスキップ
バージョン: v8

ion-checkbox

shadow

Properties

alignment

Description十字軸上のチェックボックスとラベルの配置を制御する方法。"start":ラベルとコントロールはLTRでは横軸の左側に、RTLでは右側に表示されます。"center":ラベルとコントロールはLTRでもRTLでも横軸の中央に表示されます。このプロパティを設定すると、チェックボックス displayblock に変更されます。
Attributealignment
Type"center" | "start" | undefined
Defaultundefined

checked

Descriptiontrueの場合、チェックボックスが選択される。
Attributechecked
Typeboolean
Defaultfalse

color

Descriptionアプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", と "dark" です.色に関する詳しい情報は theming を参照してください。
Attributecolor
Type"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined
Defaultundefined

disabled

Descriptiontrueの場合、ユーザはチェックボックスと対話することができません。
Attributedisabled
Typeboolean
Defaultfalse

errorText

Descriptionチェックボックスのラベルの下に配置され、エラーが検出されたときに表示されるテキスト。
Attributeerror-text
Typestring | undefined
Defaultundefined

helperText

Descriptionチェックボックスのラベルの下に配置され、エラーが検出されなかった場合に表示されるテキスト。
Attributehelper-text
Typestring | undefined
Defaultundefined

indeterminate

Descriptiontrueの場合、チェックボックスは視覚的に不定形と表示されます。
Attributeindeterminate
Typeboolean
Defaultfalse

justify

Descriptionラベルとチェックボックスを1行にまとめる方法。"start":ラベルとチェックボックスはLTRでは左に、RTLでは右に表示されます。"end":ラベルとチェックボックスはLTRでは右に、RTLでは左に表示されます。"space-between":ラベルとチェックボックスは行の反対側に表示され、2つの要素の間にはスペースが入ります。このプロパティを設定すると、チェックボックスの displayblock に変更されます。
Attributejustify
Type"end" | "space-between" | "start" | undefined
Defaultundefined

labelPlacement

Descriptionチェックボックスに対するラベルの位置。"start":ラベルはLTRではチェックボックスの左に、RTLでは右に表示されます。"end":ラベルはLTRではチェックボックスの右、RTLでは左に表示されます。"fixed":ラベルの幅が固定される以外は "start" と同じ動作をします。長いテキストは省略記号("...")で切り捨てられます。"stacked":ラベルは向きに関係なくチェックボックスの上に表示されます。ラベルの整列は alignment プロパティで制御できます。
Attributelabel-placement
Type"end" | "fixed" | "stacked" | "start"
Default'start'

mode

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。
Attributemode
Type"ios" | "md"
Defaultundefined

name

Descriptionフォームデータとともに送信されるコントロールの名前。
Attributename
Typestring
Defaultthis.inputId

required

Descriptiontrue の場合、スクリーンリーダーは必須項目として読み上げます。このプロパティはアクセシビリティ目的でのみ機能し、値が無効でもフォーム送信は妨げません。
Attributerequired
Typeboolean
Defaultfalse

value

Descriptionチェックボックスの値は、チェックされているかどうかを意味するものではなく、checkedプロパティを使用します。 チェックボックスの値は <input type="checkbox"> の値に似ており、チェックボックスがネイティブの <form> に参加する場合にのみ使用されます。
Attributevalue
Typeany
Default'on'

Events

NameDescription
ionBlurチェックボックスのフォーカスが外れたときに発行されます。
ionChangeクリックなどのユーザーアクションの結果、checkedプロパティが変更されたときに発行される。 プログラムで checked プロパティを設定した場合は、このイベントは発生しません。
ionFocusチェックボックスにフォーカスが当たったときに発行されます。

CSS Shadow Parts

NameDescription
containerチェックボックスマークのコンテナです。
error-textチェックボックスが無効かつ操作されたときに、ラベルの下に表示される補助テキスト。
helper-textチェックボックスが有効なときに、ラベルの下に表示される補助テキスト。
labelチェックボックスを表すラベルテキスト。
markチェックされた状態を示すために使用されるチェックマークです。
supporting-textチェックボックスのラベルの下に表示される補助テキスト。

CSS Custom Properties

NameDescription
--border-colorチェックボックスアイコンのボーダーカラー
--border-colorチェックボックスアイコンのボーダーカラー
--border-color-checkedチェックボックスのアイコンがチェックされたときのボーダーカラー
--border-color-checkedチェックボックスのアイコンがチェックされたときのボーダーカラー
--border-radiusチェックボックスアイコンの境界半径
--border-radiusチェックボックスアイコンの境界半径
--border-styleチェックボックスアイコンのボーダースタイル
--border-styleチェックボックスアイコンのボーダースタイル
--border-widthチェックボックスアイコンのボーダー幅
--border-widthチェックボックスアイコンのボーダー幅
--checkbox-backgroundチェックボックスアイコンの背景
--checkbox-backgroundチェックボックスアイコンの背景
--checkbox-background-checkedチェックしたときのチェックボックスアイコンの背景
--checkbox-background-checkedチェックしたときのチェックボックスアイコンの背景
--checkmark-colorチェックボックスのチェックマークがチェックされたときの色
--checkmark-colorチェックボックスのチェックマークがチェックされたときの色
--checkmark-widthチェックボックス・チェックマークのストローク幅
--checkmark-widthチェックボックス・チェックマークのストローク幅
--sizeチェックボックスのアイコンの大きさ
--sizeチェックボックスのアイコンの大きさ
--transitionチェックボックスアイコンの遷移
--transitionチェックボックスアイコンの遷移

Slots

NameDescription
``チェックボックスと関連付けるラベルテキスト。"labelPlacement"プロパティを使用して、チェックボックスに対するラベルの配置を制御します。
View Source