ion-toggle
トグルは、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.
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>
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 | If true , the toggle is selected. |
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 | undefined |
Default | undefined |
disabled
Description | If true , the user cannot interact with the toggle. |
Attribute | disabled |
Type | boolean |
Default | false |
enableOnOffLabels
Description | Enables the on/off accessibility switch labels within the toggle. |
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 | Where to place the label relative to the input. "start" : The label will appear to the left of the toggle in LTR and to the right in RTL. "end" : The label will appear to the right of the toggle in LTR and to the left in RTL. "fixed" : The label has the same behavior as "start" except it also has a fixed width. Long text will be truncated with ellipses ("..."). "stacked" : The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the alignment property. |
Attribute | label-placement |
Type | "end" | "fixed" | "stacked" | "start" |
Default | 'start' |
mode
Description | The mode determines which platform styles to use. |
Attribute | mode |
Type | "ios" | "md" |
Default | undefined |
name
Description | The name of the control, which is submitted with the form data. |
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' |
イベント
Name | Description | Bubbles |
---|---|---|
ionBlur | Emitted when the toggle loses focus. | 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 | Emitted when the toggle has focus. | true |
メソッド
No public methods available for this component.
CSS Shadow Parts
Name | Description |
---|---|
handle | The toggle handle, or knob, used to change the checked state. |
label | The label text describing the toggle. |
track | The background track of the toggle. |
CSSカスタムプロパティ
- iOS
- MD
Name | Description |
---|---|
--border-radius | Border radius of the toggle track |
--handle-background | Background of the toggle handle |
--handle-background-checked | Background of the toggle handle when checked |
--handle-border-radius | Border radius of the toggle handle |
--handle-box-shadow | Box shadow of the toggle handle |
--handle-height | Height of the toggle handle |
--handle-max-height | Maximum height of the toggle handle |
--handle-spacing | Horizontal spacing around the toggle handle |
--handle-transition | Transition of the toggle handle |
--handle-width | Width of the toggle handle |
--track-background | Background of the toggle track |
--track-background-checked | Background of the toggle track when checked |
Name | Description |
---|---|
--border-radius | Border radius of the toggle track |
--handle-background | Background of the toggle handle |
--handle-background-checked | Background of the toggle handle when checked |
--handle-border-radius | Border radius of the toggle handle |
--handle-box-shadow | Box shadow of the toggle handle |
--handle-height | Height of the toggle handle |
--handle-max-height | Maximum height of the toggle handle |
--handle-spacing | Horizontal spacing around the toggle handle |
--handle-transition | Transition of the toggle handle |
--handle-width | Width of the toggle handle |
--track-background | Background of the toggle track |
--track-background-checked | Background of the toggle track when checked |
Slots
Name | Description |
---|---|
`` | The label text to associate with the toggle. Use the "labelPlacement" property to control where the label is placed relative to the toggle. |