shadow
トグルは、1つのオプションの状態を変更するスイッチです。押したり、スワイプしたりすることで、オン・オフを切り替えることができます。トグルは、checkedプロパティを設定することで、プログラムによってチェックすることも可能です。
トグルは、enableOnOffLabelsプロパティを設定することで、オン/オフラベルを有効にすることができます。これはアクセシビリティ上重要なことで、チェックされたトグルとチェックされていないトグルの区別がつきやすくなります。
アイテムとリストコンポーネントを使用すると、リストビューでトグルを使用することも可能です。
開発者は labelPlacement プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
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.
開発者は 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.
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 | trueの場合、トグルが選択されます。 |
| 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 | trueの場合、ユーザーはトグルを操作することができません。 |
| Attribute | disabled |
| Type | boolean |
| Default | false |
| Description | トグル内のオン／オフアクセシビリティスイッチラベルを有効にします。 |
| 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 | modeは、どのプラットフォームのスタイルを使用するかを決定します。 |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
| Description | フォームデータとともに送信されるコントロールの名前。 |
| 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 | トグルのフォーカスが外れたときに発行されます。 | 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.
| Name | Description |
|---|
error-text | Supporting text displayed beneath the toggle label when the toggle is invalid and touched. |
handle | チェックした状態を変更するために使用するトグルハンドル（つまみ）です。 |
helper-text | Supporting text displayed beneath the toggle label when the toggle is valid. |
label | トグルを説明するラベルテキスト。 |
supporting-text | Supporting text displayed beneath the toggle label. |
track | トグルの背景トラックで す。 |
| 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 | チェックしたときのトグルトラックの背景 |
| Name | Description |
|---|
| `` | トグルに関連付けるラベルテキストです。"labelPlacement"プロパティを使用して、トグルに対してラベルを配置する位置を制御します。 |