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

ion-toggle

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

enableOnOffLabels

Descriptionトグル内のオン/オフアクセシビリティスイッチラベルを有効にします。
Attributeenable-on-off-labels
Typeboolean | undefined
Defaultconfig.get('toggleOnOffLabels')

errorText

DescriptionText that is placed under the toggle label and displayed when an error is detected.
Attributeerror-text
Typestring | undefined
Defaultundefined

helperText

DescriptionText that is placed under the toggle label and displayed when no error is detected.
Attributehelper-text
Typestring | undefined
Defaultundefined

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トグルの値は、チェックされているかどうかを意味するものではありません。 トグルの値は <input type="checkbox"> の値に類似しており、トグルがネイティブの <form> に参加する場合にのみ使用されます。
Attributevalue
Typenull | string | undefined
Default'on'

Events

NameDescription
ionBlurトグルのフォーカスが外れたときに発行されます。
ionChangeユーザがトグルのオン/オフを切り替えたときに発行される。 プログラムで checked プロパティを設定した場合は、このイベントは発生しない。
ionFocusトグルにフォーカスが当たったときに発行されます。

CSS Shadow Parts

NameDescription
error-textSupporting text displayed beneath the toggle label when the toggle is invalid and touched.
handleチェックした状態を変更するために使用するトグルハンドル(つまみ)です。
helper-textSupporting text displayed beneath the toggle label when the toggle is valid.
labelトグルを説明するラベルテキスト。
supporting-textSupporting text displayed beneath the toggle label.
trackトグルの背景トラックです。

CSS Custom Properties

NameDescription
--border-radiusトグルトラックのボーダー半径
--border-radiusトグルトラックのボーダー半径
--handle-backgroundトグルハンドルの背景
--handle-backgroundトグルハンドルの背景
--handle-background-checkedチェックしたときのトグルハンドルの背景
--handle-background-checkedチェックしたときのトグルハンドルの背景
--handle-border-radiusトグルハンドルのボーダー半径
--handle-border-radiusトグルハンドルのボーダー半径
--handle-box-shadowトグルハンドルのボックスシャドウ
--handle-box-shadowトグルハンドルのボックスシャドウ
--handle-heightトグルハンドルの高さ
--handle-heightトグルハンドルの高さ
--handle-max-heightトグルハンドルの最大の高さ
--handle-max-heightトグルハンドルの最大の高さ
--handle-spacingトグルハンドル周辺の横方向の間隔
--handle-spacingトグルハンドル周辺の横方向の間隔
--handle-transitionトグルハンドルの変遷
--handle-transitionトグルハンドルの変遷
--handle-widthトグルハンドルの幅
--handle-widthトグルハンドルの幅
--track-backgroundトグルトラックの背景
--track-backgroundトグルトラックの背景
--track-background-checkedチェックしたときのトグルトラックの背景
--track-background-checkedチェックしたときのトグルトラックの背景

Slots

NameDescription
``トグルに関連付けるラベルテキストです。"labelPlacement"プロパティを使用して、トグルに対してラベルを配置する位置を制御します。
View Source