Skip to main content
Version: v8

ion-toggle

shadow

トグルは、1つのオプションの状態を変更するスイッチです。押したり、スワイプしたりすることで、オン・オフを切り替えることができます。トグルは、checkedプロパティを設定することで、プログラムによってチェックすることも可能です。

基本的な使い方

On / Off Labels

トグルは、enableOnOffLabelsプロパティを設定することで、オン/オフラベルを有効にすることができます。これはアクセシビリティ上重要なことで、チェックされたトグルとチェックされていないトグルの区別がつきやすくなります。

Toggles in a List

アイテムリストコンポーネントを使用すると、リストビューでトグルを使用することも可能です。

Label Placement

開発者は labelPlacement プロパティを使用して、ラベルがどのように配置されるかを制御することができます。

Alignment

Developers can use the alignment property to control how the label and control are aligned on the cross axis. This property mirrors the flexbox align-items property.

note

Stacked toggles can be aligned using the alignment property. This can be useful when the label and control need to be centered horizontally.

Justification

開発者は justify プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。

Helper & Error Text

Helper and error text can be used inside of a toggle with the helperText and errorText property. The error text will not be displayed unless the ion-invalid and ion-touched classes are added to the ion-toggle. This ensures errors are not shown before the user has a chance to enter data.

In Angular, this is done automatically through form validation. In JavaScript, React and Vue, the class needs to be manually added based on your own validation.

Theming

Colors

CSSカスタムプロパティ

CSSカスタムプロパティは、標準CSSと組み合わせてトグルの異なる部分をターゲットにすることができます。トグルの widthheight を直接変更してトラックのサイズを変更し、--handle-width--handle-height カスタムプロパティを使用して、ハンドルサイズをカスタマイズすることができます。

CSS Shadow Parts

トグルをさらにカスタマイズするには、公開されている特定のシャドウ部分をターゲットにすることができます。これらの部分には、どのようなCSSプロパティでもスタイルを設定でき、CSSカスタムプロパティと組み合わせることも可能です。

Interfaces

ToggleChangeEventDetail

interface ToggleChangeEventDetail<T = any> {
value: T;
checked: boolean;
}

ToggleCustomEvent

必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、CustomEvent インターフェースの代わりにこのインターフェースを使用することが可能です。

interface ToggleCustomEvent<T = any> extends CustomEvent {
detail: ToggleChangeEventDetail<T>;
target: HTMLIonToggleElement;
}

プロパティ

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 | 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は、どのプラットフォームのスタイルを使用するかを決定します。

This is a virtual property that is set once during initialization and will not update if you change its value after the initial render.
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'

イベント

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

メソッド

No public methods available for this component.

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カスタムプロパティ

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

Slots

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