shadow
トグルは、1つのオプションの状態を変更するスイッチです。押したり、スワイプしたりすることで、オン・オフを切り替えることができます。トグルは、checkedプロパティを設定することで、プログラムによってチェックすることも可能です。
トグルは、enableOnOffLabelsプロパティを設定することで、オン/オフラベルを有効にすることができます。これはアクセシビリティ上重要なことで、チェックされたトグルとチェックされていないトグルの区別がつきやすくなります。
アイテムとリストコンポーネントを使用すると、リストビューでトグルを使用することも可能です。
開発者は labelPlacement プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
開発者はalignmentプロパティを使用して、ラベルとコントロールがクロス軸上でどのように配置されるかを制御できます。このプロパティは、flexboxのalign-itemsプロパティを反映しています。
スタックされたトグルは、alignmentプロパティを使用して配置できます。ラベルとコントロールを水平方向に中央揃えする必要がある場合に便利です。
開発者は justify プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。
Helper & Error Text
ヘルパーテキストとエラーテキストは、helperTextとerrorTextプロパティを使用してトグル内で使用できます。エラーテキストは、ion-invalidとion-touchedクラスがion-toggleに追加されていない限り表示されません。これにより、ユーザーがデータを入力する前にエラーが表示されることはありません。
Angularでは、これはフォームバリデーションによって自動的に行われます。JavaScript、React、Vueでは、独自のバリデーションに基づいてクラスを手動で追加する必要があります。
CSSカスタムプロパティは、標準CSSと組み合わせてトグルの異なる部分をターゲットにすることができます。トグルの width と height を直接変更してトラックのサイズを変更し、--handle-width と --handle-height カスタムプロパティを使用して、ハンドルサイズをカスタマイズすることができます。
トグルをさらにカスタマイズするには、公開されている特定のシャドウ部分をターゲットにすることができます。これらの部分には、どのようなCSSプロパティでもスタイルを設定でき、CSSカスタムプロパティと組み合わせることも可能です。
interface ToggleChangeEventDetail<T = any> {
value: T;
checked: boolean;
}
必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、CustomEvent インターフェースの代わりにこのインターフェースを使用することが可能です。
interface ToggleCustomEvent<T = any> extends CustomEvent {
detail: ToggleChangeEventDetail<T>;
target: HTMLIonToggleElement;
}
| 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 |
| Description | If true, the toggle is selected. |
| Attribute | checked |
| Type | boolean |
| Default | false |
| 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 |
| Description | If true, the user cannot interact with the toggle. |
| Attribute | disabled |
| Type | boolean |
| Default | false |
| Description | Enables the on/off accessibility switch labels within the toggle. |
| Attribute | enable-on-off-labels |
| Type | boolean ｜ undefined |
| Default | config.get('toggleOnOffLabels') |
errorText
| Description | Text that is placed under the toggle label and displayed when an error is detected. |
| Attribute | error-text |
| Type | string ｜ undefined |
| Default | undefined |
helperText
| Description | Text that is placed under the toggle label and displayed when no error is detected. |
| Attribute | helper-text |
| Type | string ｜ undefined |
| Default | undefined |
| 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 |
| 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' |
| Description | The mode determines which platform styles to use.
This is a virtual property that is set once during initialization and will not update if you change its value after the initial render. |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
| Description | The name of the control, which is submitted with the form data. |
| Attribute | name |
| Type | string |
| Default | this.inputId |
| Description | If true, screen readers will announce it as a required field. This property works only for accessibility purposes, it will not prevent the form from submitting if the value is invalid. |
| Attribute | required |
| Type | boolean |
| Default | false |
| 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.
| Name | Description |
|---|
error-text | Supporting text displayed beneath the toggle label when the toggle is invalid and touched. |
handle | The toggle handle, or knob, used to change the checked state. |
helper-text | Supporting text displayed beneath the toggle label when the toggle is valid. |
label | The label text describing the toggle. |
supporting-text | Supporting text displayed beneath the toggle label. |
track | The background track of the toggle. |
| 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 |
| 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. |