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 プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。

テーマ

Colors

CSSカスタムプロパティ

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

CSS Shadow Parts

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

レガシーなトグル構文からの移行

Ionic 7.0では、よりシンプルなトグル構文が導入されました。この新しい構文は、トグルの設定に必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。

開発者は従来の構文を使い続けることができますが、できるだけ早く移行することをお勧めします。

最新の構文の使い方

最新の構文を使用するには、ion-labelを削除して、ion-toggleの内部にラベルを直接渡します。ラベルの配置は ion-toggle の labelPlacement プロパティを使用して設定することができる。ラベルとコントロールの行の詰め方は、ion-toggle の justify プロパティを使用して制御することができます。

JavaScript
Angular
React
Vue

<!-- Basic -->

<!-- Before -->
<ion-item>
  <ion-label>Notifications</ion-label>
  <ion-toggle></ion-toggle>
</ion-item>

<!-- After -->
<ion-item>
  <ion-toggle>Notifications</ion-toggle>
</ion-item>

<!-- Fixed Labels -->

<!-- Before -->
<ion-item>
  <ion-label position="fixed">Notifications</ion-label>
  <ion-toggle></ion-toggle>
</ion-item>

<!-- After -->
<ion-item>
  <ion-toggle label-placement="fixed">Notifications</ion-toggle>
</ion-item>

<!-- Toggle at the start of line, Label at the end of line -->

<!-- Before -->
<ion-item>
  <ion-label slot="end">Notifications</ion-label>
  <ion-toggle></ion-toggle>
</ion-item>

<!-- After -->
<ion-item>
  <ion-toggle label-placement="end">Notifications</ion-toggle>
</ion-item>

<!-- Basic -->

<!-- Before -->
<ion-item>
  <ion-label>Notifications</ion-label>
  <ion-toggle></ion-toggle>
</ion-item>

<!-- After -->
<ion-item>
  <ion-toggle>Notifications</ion-toggle>
</ion-item>

<!-- Fixed Labels -->

<!-- Before -->
<ion-item>
  <ion-label position="fixed">Notifications</ion-label>
  <ion-toggle></ion-toggle>
</ion-item>

<!-- After -->
<ion-item>
  <ion-toggle label-placement="fixed">Notifications</ion-toggle>
</ion-item>

<!-- Toggle at the start of line, Label at the end of line -->

<!-- Before -->
<ion-item>
  <ion-label slot="end">Notifications</ion-label>
  <ion-toggle></ion-toggle>
</ion-item>

<!-- After -->
<ion-item>
  <ion-toggle label-placement="end">Notifications</ion-toggle>
</ion-item>

{/* Basic */}

{/* Before */}
<IonItem>
  <IonLabel>Notifications</IonLabel>
  <IonToggle></IonToggle>
</IonItem>

{/* After */}
<IonItem>
  <IonToggle>Notifications</IonToggle>
</IonItem>

{/* Fixed Labels */}

{/* Before */}
<IonItem>
  <IonLabel position="fixed">Notifications</IonLabel>
  <IonToggle></IonToggle>
</IonItem>

{/* After */}
<IonItem>
  <IonToggle labelPlacement="fixed">Notifications</IonToggle>
</IonItem>

{/* Toggle at the start of line, Label at the end of line */}

{/* Before */}
<IonItem>
  <IonLabel slot="end">Notifications</IonLabel>
  <IonToggle></IonToggle>
</IonItem>

{/* After */}
<IonItem>
  <IonToggle labelPlacement="end">Notifications</IonToggle>
</IonItem>

<!-- Basic -->

<!-- Before -->
<ion-item>
  <ion-label>Notifications</ion-label>
  <ion-toggle></ion-toggle>
</ion-item>

<!-- After -->
<ion-item>
  <ion-toggle>Notifications</ion-toggle>
</ion-item>

<!-- Fixed Labels -->

<!-- Before -->
<ion-item>
  <ion-label position="fixed">Notifications</ion-label>
  <ion-toggle></ion-toggle>
</ion-item>

<!-- After -->
<ion-item>
  <ion-toggle label-placement="fixed">Notifications</ion-toggle>
</ion-item>

<!-- Toggle at the start of line, Label at the end of line -->

<!-- Before -->
<ion-item>
  <ion-label slot="end">Notifications</ion-label>
  <ion-toggle></ion-toggle>
</ion-item>

<!-- After -->
<ion-item>
  <ion-toggle label-placement="end">Notifications</ion-toggle>
</ion-item>

note

Ionic の過去のバージョンでは、ion-toggle が正しく機能するためには ion-item が必要でした。Ionic 7.0 からは、ion-toggle は ion-item の中で、そのアイテムが ion-list に配置される場合にのみ使用されます。また、ion-toggleが正しく機能するためには、ion-itemはもはや必須ではありません。

レガシー構文の使用

Ionicは、アプリが最新のトグル構文を使用しているかどうかを検出するためにヒューリスティックを使用しています。場合によっては、レガシー構文を使い続けることが望ましいこともあります。開発者は、ion-toggleのlegacyプロパティをtrueに設定することで、そのトグルのインスタンスがレガシー構文を使用するように強制できます。

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	How to control the alignment of the toggle and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the toggle `display` to `block`.
Attribute	`alignment`
Type	`"center" ｜ "start" ｜ undefined`
Default	`undefined`

checked

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

color

Description	アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は theming を参照してください。
Attribute	`color`
Type	`"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ 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')`

justify

Description	How to pack the label and toggle within a line. `"start"`: The label and toggle will appear on the left in LTR and on the right in RTL. `"end"`: The label and toggle will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and toggle will appear on opposite ends of the line with space between the two elements. Setting this property will change the toggle `display` to `block`.
Attribute	`justify`
Type	`"end" ｜ "space-between" ｜ "start" ｜ undefined`
Default	`undefined`

labelPlacement

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

mode

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

name

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

value

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

イベント

Name	Description	Bubbles
`ionBlur`	トグルのフォーカスが外れたときに発行されます。	`true`
`ionChange`	Emitted when the user switches the toggle on or off. This event will not emit when programmatically setting the `checked` property.	`true`
`ionFocus`	トグルにフォーカスが当たったときに発行されます。	`true`

メソッド

No public methods available for this component.

CSS Shadow Parts

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

CSSカスタムプロパティ

Name	Description
`--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`	チェックしたときのトグルトラックの背景

Name	Description
`--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

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

基本的な使い方​

On / Off Labels​

Toggles in a List​

Label Placement​

Alignment​

Justification​

テーマ​

Colors​

CSSカスタムプロパティ​

CSS Shadow Parts​

レガシーなトグル構文からの移行​

最新の構文の使い方​

レガシー構文の使用​

Interfaces​

ToggleChangeEventDetail​

ToggleCustomEvent​

プロパティ​

alignment​

checked​

color​

disabled​

enableOnOffLabels​

justify​

labelPlacement​

mode​

name​

value​

イベント​

メソッド​

CSS Shadow Parts​

CSSカスタムプロパティ​

Slots​

Contents

基本的な使い方

On / Off Labels

Toggles in a List

Label Placement

Alignment

Justification

テーマ

Colors

CSSカスタムプロパティ

CSS Shadow Parts

レガシーなトグル構文からの移行

最新の構文の使い方

レガシー構文の使用

Interfaces

ToggleChangeEventDetail

ToggleCustomEvent

プロパティ

alignment

checked

color

disabled

enableOnOffLabels

justify

labelPlacement

mode

name

value

イベント

メソッド

CSS Shadow Parts

CSSカスタムプロパティ

Slots