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 | 十字軸上のトグルとラベルの配置を制御する方法。start"：ラベルとコントロールはLTRでは十字軸の左側に、RTLでは右側に表示されます。center"：ラベルとコントロールはLTRでもRTLでも横軸の中央に表示されます。このプロパティを設定すると、トグルの display が block に変更されます。 |
| Attribute | alignment |
| Type | "center" ｜ "start" ｜ undefined |
| Default | undefined |
| Description | trueの場合、トグルが選択されます。 |
| Attribute | checked |
| Type | boolean |
| Default | false |
| 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 |
| 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 | ラベルとトグルを1行にまとめる方法。start"：ラベルとトグルはLTRでは左に、RTLでは右に表示されます。end"：ラベルとトグルはLTRでは右に、RTLでは左に表示されます。space-between"：ラベルとトグルは行の反対側に表示され、2つの要素の間にはスペースが入ります。このプロパティを設定すると、トグルの displayがblock` に変更されます。 |
| Attribute | justify |
| Type | "end" ｜ "space-between" ｜ "start" ｜ undefined |
| Default | undefined |
| Description | 入力に対するラベルの位置。start"：ラベルはLTRではトグルの左に、RTLでは右に表示されます。end"：ラベルはLTRではトグルの右、RTLでは左に表示されます。fixed"：ラベルの幅が固定される以外は "start" と同じ動作をします。長いテキストは省略記号("...")で切り捨てられます。stacked"：ラベルは向きに関係なくトグルの上に表示されます。ラベルの整列は alignment プロパティで制御できます。 |
| Attribute | label-placement |
| Type | "end" ｜ "fixed" ｜ "stacked" ｜ "start" |
| Default | 'start' |
| Description | modeは、どのプラットフォームのスタイルを使用するかを決定します。
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 | フォームデータとともに送信されるコントロールの名前。 |
| Attribute | name |
| Type | string |
| Default | this.inputId |
| Description | true の場合、スクリーンリーダーは必須項目として読み上げます。このプロパティはアクセシビリティ目的でのみ機能し、値が無効でもフォーム送信は妨げません。 |
| Attribute | required |
| Type | boolean |
| Default | false |
| Description | トグルの値は、チェックされているかどうかを意味するものではありません。 トグルの値は <input type="checkbox"> の値に類似しており、トグルがネイティブの <form> に参加する場合にのみ使用されます。 |
| Attribute | value |
| Type | null ｜ string ｜ undefined |
| Default | 'on' |
| Name | Description | Bubbles |
|---|
ionBlur | トグルのフォーカスが外れたときに発行されます。 | true |
ionChange | ユーザがトグルのオン/オフを切り替えたときに発行される。 プログラムで checked プロパティを設定した場合は、このイベントは発生しない。 | 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"プロパティを使用して、トグルに対してラベルを配置する位置を制御します。 |