ion-toggle

shadow

Toggles are switches that change the state of a single option. They can be switched on or off by pressing or swiping them. Toggles can also be checked programmatically by setting the checked property.

Basic Usage

On / Off Labels

Toggles can enable on/off labels by setting the enableOnOffLabels property. This is important for accessibility as it makes it easier to differentiate between a checked and unchecked toggle.

Theming

Colors

CSS Custom Properties

CSS custom properties can be combined with standard CSS to target different parts of a toggle. We can modify the width and height of the toggle directly to change the size of the track, while using the --handle-width and --handle-height custom properties to customize the handle size.

CSS Shadow Parts

We can further customize toggle by targeting specific shadow parts that are exposed. Any CSS property on these parts can be styled and they can also be combined with CSS custom properties.

Interfaces

ToggleChangeEventDetail

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

ToggleCustomEvent

While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.

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

Properties

checked

Description	trueの場合、トグルが選択されます。
Attribute	checked
Type	boolean
Default	false

color

Description	The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.
Attribute	color
Type	"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined
Default	undefined

disabled

Description	trueの場合、ユーザーはトグルを操作することができません。
Attribute	disabled
Type	boolean
Default	false

enableOnOffLabels

Description	トグル内のオン／オフアクセシビリティスイッチラベルを有効にします。
Attribute	enable-on-off-labels
Type	boolean ｜ undefined
Default	config.get('toggleOnOffLabels')

mode

Description	modeは、どのプラットフォームのスタイルを使用するかを決定します。
Attribute	mode
Type	"ios" ｜ "md"
Default	undefined

name

Description	フォームデータとともに送信されるコントロールの名前。
Attribute	name
Type	string
Default	this.inputId

value

Description	The value of the toggle does not mean if it's checked or not, use the checked property for that. The value of a toggle is analogous to the value of a <input type="checkbox">, it's only used when the toggle participates in a native <form>.
Attribute	value
Type	null ｜ string ｜ undefined
Default	'on'

Events

Name	Description
ionBlur	トグルのフォーカスが外れたときに発行されます。
ionChange	valueプロパティが変更されたときに発行されます。
ionFocus	トグルにフォーカスが当たったときに発行されます。

Methods

No public methods available for this component.

CSS Shadow Parts

Name	Description
handle	チェックした状態を変更するために使用するトグルハンドル（つまみ）です。
track	トグルの背景トラックです。

CSS Custom Properties

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

Slots

No slots available for this component.