mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
docs(): add note on form bindings with debounce (#22409)
This commit is contained in:
Liam DeBeasi
16
core/src/components.d.ts
vendored
16
core/src/components.d.ts
vendored
@ -858,7 +858,7 @@ export namespace Components {
|
|||||||
*/
|
*/
|
||||||
"color"?: Color;
|
"color"?: Color;
|
||||||
/**
|
/**
|
||||||
* Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke.
|
* Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
|
||||||
*/
|
*/
|
||||||
"debounce": number;
|
"debounce": number;
|
||||||
/**
|
/**
|
||||||
@ -1730,7 +1730,7 @@ export namespace Components {
|
|||||||
*/
|
*/
|
||||||
"color"?: Color;
|
"color"?: Color;
|
||||||
/**
|
/**
|
||||||
* How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value.
|
* How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value. This also impacts form bindings such as `ngModel` or `v-model`.
|
||||||
*/
|
*/
|
||||||
"debounce": number;
|
"debounce": number;
|
||||||
/**
|
/**
|
||||||
@ -1991,7 +1991,7 @@ export namespace Components {
|
|||||||
*/
|
*/
|
||||||
"color"?: Color;
|
"color"?: Color;
|
||||||
/**
|
/**
|
||||||
* Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke.
|
* Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
|
||||||
*/
|
*/
|
||||||
"debounce": number;
|
"debounce": number;
|
||||||
/**
|
/**
|
||||||
@ -2430,7 +2430,7 @@ export namespace Components {
|
|||||||
*/
|
*/
|
||||||
"cols"?: number;
|
"cols"?: number;
|
||||||
/**
|
/**
|
||||||
* Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke.
|
* Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
|
||||||
*/
|
*/
|
||||||
"debounce": number;
|
"debounce": number;
|
||||||
/**
|
/**
|
||||||
@ -4197,7 +4197,7 @@ declare namespace LocalJSX {
|
|||||||
*/
|
*/
|
||||||
"color"?: Color;
|
"color"?: Color;
|
||||||
/**
|
/**
|
||||||
* Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke.
|
* Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
|
||||||
*/
|
*/
|
||||||
"debounce"?: number;
|
"debounce"?: number;
|
||||||
/**
|
/**
|
||||||
@ -4992,7 +4992,7 @@ declare namespace LocalJSX {
|
|||||||
*/
|
*/
|
||||||
"color"?: Color;
|
"color"?: Color;
|
||||||
/**
|
/**
|
||||||
* How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value.
|
* How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value. This also impacts form bindings such as `ngModel` or `v-model`.
|
||||||
*/
|
*/
|
||||||
"debounce"?: number;
|
"debounce"?: number;
|
||||||
/**
|
/**
|
||||||
@ -5265,7 +5265,7 @@ declare namespace LocalJSX {
|
|||||||
*/
|
*/
|
||||||
"color"?: Color;
|
"color"?: Color;
|
||||||
/**
|
/**
|
||||||
* Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke.
|
* Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
|
||||||
*/
|
*/
|
||||||
"debounce"?: number;
|
"debounce"?: number;
|
||||||
/**
|
/**
|
||||||
@ -5741,7 +5741,7 @@ declare namespace LocalJSX {
|
|||||||
*/
|
*/
|
||||||
"cols"?: number;
|
"cols"?: number;
|
||||||
/**
|
/**
|
||||||
* Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke.
|
* Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
|
||||||
*/
|
*/
|
||||||
"debounce"?: number;
|
"debounce"?: number;
|
||||||
/**
|
/**
|
||||||
|
|||||||
@ -80,7 +80,7 @@ export class Input implements ComponentInterface {
|
|||||||
@Prop() clearOnEdit?: boolean;
|
@Prop() clearOnEdit?: boolean;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke.
|
* Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
|
||||||
*/
|
*/
|
||||||
@Prop() debounce = 0;
|
@Prop() debounce = 0;
|
||||||
|
|
||||||
|
|||||||
@ -308,7 +308,7 @@ export default defineComponent({
|
|||||||
| `clearInput` | `clear-input` | If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input. | `boolean` | `false` |
|
| `clearInput` | `clear-input` | If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input. | `boolean` | `false` |
|
||||||
| `clearOnEdit` | `clear-on-edit` | If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. | `boolean \| undefined` | `undefined` |
|
| `clearOnEdit` | `clear-on-edit` | If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. | `boolean \| undefined` | `undefined` |
|
||||||
| `color` | `color` | 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](/docs/theming/basics). | `string \| undefined` | `undefined` |
|
| `color` | `color` | 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](/docs/theming/basics). | `string \| undefined` | `undefined` |
|
||||||
| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. | `number` | `0` |
|
| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`. | `number` | `0` |
|
||||||
| `disabled` | `disabled` | If `true`, the user cannot interact with the input. | `boolean` | `false` |
|
| `disabled` | `disabled` | If `true`, the user cannot interact with the input. | `boolean` | `false` |
|
||||||
| `enterkeyhint` | `enterkeyhint` | A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`. | `"done" \| "enter" \| "go" \| "next" \| "previous" \| "search" \| "send" \| undefined` | `undefined` |
|
| `enterkeyhint` | `enterkeyhint` | A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`. | `"done" \| "enter" \| "go" \| "next" \| "previous" \| "search" \| "send" \| undefined` | `undefined` |
|
||||||
| `inputmode` | `inputmode` | A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url" \| undefined` | `undefined` |
|
| `inputmode` | `inputmode` | A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url" \| undefined` | `undefined` |
|
||||||
|
|||||||
@ -50,6 +50,7 @@ export class Range implements ComponentInterface {
|
|||||||
/**
|
/**
|
||||||
* How long, in milliseconds, to wait to trigger the
|
* How long, in milliseconds, to wait to trigger the
|
||||||
* `ionChange` event after each change in the range value.
|
* `ionChange` event after each change in the range value.
|
||||||
|
* This also impacts form bindings such as `ngModel` or `v-model`.
|
||||||
*/
|
*/
|
||||||
@Prop() debounce = 0;
|
@Prop() debounce = 0;
|
||||||
|
|
||||||
|
|||||||
@ -272,7 +272,7 @@ export default defineComponent({
|
|||||||
| Property | Attribute | Description | Type | Default |
|
| Property | Attribute | Description | Type | Default |
|
||||||
| ----------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | ----------- |
|
| ----------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | ----------- |
|
||||||
| `color` | `color` | 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](/docs/theming/basics). | `string \| undefined` | `undefined` |
|
| `color` | `color` | 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](/docs/theming/basics). | `string \| undefined` | `undefined` |
|
||||||
| `debounce` | `debounce` | How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value. | `number` | `0` |
|
| `debounce` | `debounce` | How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value. This also impacts form bindings such as `ngModel` or `v-model`. | `number` | `0` |
|
||||||
| `disabled` | `disabled` | If `true`, the user cannot interact with the range. | `boolean` | `false` |
|
| `disabled` | `disabled` | If `true`, the user cannot interact with the range. | `boolean` | `false` |
|
||||||
| `dualKnobs` | `dual-knobs` | Show two knobs. | `boolean` | `false` |
|
| `dualKnobs` | `dual-knobs` | Show two knobs. | `boolean` | `false` |
|
||||||
| `max` | `max` | Maximum integer value of the range. | `number` | `100` |
|
| `max` | `max` | Maximum integer value of the range. | `number` | `100` |
|
||||||
|
|||||||
@ -320,7 +320,7 @@ export default defineComponent({
|
|||||||
| `cancelButtonText` | `cancel-button-text` | Set the the cancel button text. Only applies to `ios` mode. | `string` | `'Cancel'` |
|
| `cancelButtonText` | `cancel-button-text` | Set the the cancel button text. Only applies to `ios` mode. | `string` | `'Cancel'` |
|
||||||
| `clearIcon` | `clear-icon` | Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close-sharp"` for `md`. | `string \| undefined` | `undefined` |
|
| `clearIcon` | `clear-icon` | Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close-sharp"` for `md`. | `string \| undefined` | `undefined` |
|
||||||
| `color` | `color` | 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](/docs/theming/basics). | `string \| undefined` | `undefined` |
|
| `color` | `color` | 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](/docs/theming/basics). | `string \| undefined` | `undefined` |
|
||||||
| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. | `number` | `250` |
|
| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`. | `number` | `250` |
|
||||||
| `disabled` | `disabled` | If `true`, the user cannot interact with the input. | `boolean` | `false` |
|
| `disabled` | `disabled` | If `true`, the user cannot interact with the input. | `boolean` | `false` |
|
||||||
| `enterkeyhint` | `enterkeyhint` | A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`. | `"done" \| "enter" \| "go" \| "next" \| "previous" \| "search" \| "send" \| undefined` | `undefined` |
|
| `enterkeyhint` | `enterkeyhint` | A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`. | `"done" \| "enter" \| "go" \| "next" \| "previous" \| "search" \| "send" \| undefined` | `undefined` |
|
||||||
| `inputmode` | `inputmode` | A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url" \| undefined` | `undefined` |
|
| `inputmode` | `inputmode` | A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url" \| undefined` | `undefined` |
|
||||||
|
|||||||
@ -67,7 +67,7 @@ export class Searchbar implements ComponentInterface {
|
|||||||
@Prop() clearIcon?: string;
|
@Prop() clearIcon?: string;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke.
|
* Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
|
||||||
*/
|
*/
|
||||||
@Prop() debounce = 250;
|
@Prop() debounce = 250;
|
||||||
|
|
||||||
|
|||||||
@ -274,7 +274,7 @@ export default defineComponent({
|
|||||||
| `clearOnEdit` | `clear-on-edit` | If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. | `boolean` | `false` |
|
| `clearOnEdit` | `clear-on-edit` | If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. | `boolean` | `false` |
|
||||||
| `color` | `color` | 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](/docs/theming/basics). | `string \| undefined` | `undefined` |
|
| `color` | `color` | 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](/docs/theming/basics). | `string \| undefined` | `undefined` |
|
||||||
| `cols` | `cols` | The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. | `number \| undefined` | `undefined` |
|
| `cols` | `cols` | The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. | `number \| undefined` | `undefined` |
|
||||||
| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. | `number` | `0` |
|
| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`. | `number` | `0` |
|
||||||
| `disabled` | `disabled` | If `true`, the user cannot interact with the textarea. | `boolean` | `false` |
|
| `disabled` | `disabled` | If `true`, the user cannot interact with the textarea. | `boolean` | `false` |
|
||||||
| `enterkeyhint` | `enterkeyhint` | A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`. | `"done" \| "enter" \| "go" \| "next" \| "previous" \| "search" \| "send" \| undefined` | `undefined` |
|
| `enterkeyhint` | `enterkeyhint` | A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`. | `"done" \| "enter" \| "go" \| "next" \| "previous" \| "search" \| "send" \| undefined` | `undefined` |
|
||||||
| `inputmode` | `inputmode` | A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url" \| undefined` | `undefined` |
|
| `inputmode` | `inputmode` | A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url" \| undefined` | `undefined` |
|
||||||
|
|||||||
@ -60,7 +60,7 @@ export class Textarea implements ComponentInterface {
|
|||||||
@Prop({ mutable: true }) clearOnEdit = false;
|
@Prop({ mutable: true }) clearOnEdit = false;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke.
|
* Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
|
||||||
*/
|
*/
|
||||||
@Prop() debounce = 0;
|
@Prop() debounce = 0;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user