diff --git a/core/package.json b/core/package.json index 377b5058d2..4e55af1d7a 100644 --- a/core/package.json +++ b/core/package.json @@ -30,7 +30,7 @@ "ionicons": "4.4.6" }, "devDependencies": { - "@stencil/core": "0.15.2", + "@stencil/core": "0.16.0-0", "@stencil/sass": "0.1.1", "@stencil/utils": "latest", "@types/jest": "^23.3.1", diff --git a/core/src/components.d.ts b/core/src/components.d.ts index de77d49289..eca38edccd 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -91,11 +91,11 @@ export namespace Components { interface IonActionSheet { /** - * If `true`, the action sheet will animate. Defaults to `true`. + * If `true`, the action sheet will animate. */ 'animated': boolean; /** - * If `true`, the action sheet will be dismissed when the backdrop is clicked. Defaults to `true`. + * If `true`, the action sheet will be dismissed when the backdrop is clicked. */ 'backdropDismiss': boolean; /** @@ -127,7 +127,7 @@ export namespace Components { */ 'leaveAnimation'?: AnimationBuilder; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; /** @@ -148,23 +148,23 @@ export namespace Components { */ 'subHeader'?: string; /** - * If `true`, the action sheet will be translucent. Defaults to `false`. + * If `true`, the action sheet will be translucent. */ 'translucent': boolean; } interface IonActionSheetAttributes extends StencilHTMLAttributes { /** - * If `true`, the action sheet will animate. Defaults to `true`. + * If `true`, the action sheet will animate. */ 'animated'?: boolean; /** - * If `true`, the action sheet will be dismissed when the backdrop is clicked. Defaults to `true`. + * If `true`, the action sheet will be dismissed when the backdrop is clicked. */ 'backdropDismiss'?: boolean; /** * An array of buttons for the action sheet. */ - 'buttons'?: (ActionSheetButton | string)[]; + 'buttons': (ActionSheetButton | string)[]; /** * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. */ @@ -186,7 +186,7 @@ export namespace Components { */ 'leaveAnimation'?: AnimationBuilder; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; /** @@ -213,13 +213,13 @@ export namespace Components { * Emitted before the alert has presented. */ 'onIonActionSheetWillPresent'?: (event: CustomEvent) => void; - 'overlayIndex'?: number; + 'overlayIndex': number; /** * Subtitle for the action sheet. */ 'subHeader'?: string; /** - * If `true`, the action sheet will be translucent. Defaults to `false`. + * If `true`, the action sheet will be translucent. */ 'translucent'?: boolean; } @@ -242,11 +242,11 @@ export namespace Components { interface IonAlert { /** - * If `true`, the alert will animate. Defaults to `true`. + * If `true`, the alert will animate. */ 'animated': boolean; /** - * If `true`, the alert will be dismissed when the backdrop is clicked. Defaults to `true`. + * If `true`, the alert will be dismissed when the backdrop is clicked. */ 'backdropDismiss': boolean; /** @@ -286,7 +286,7 @@ export namespace Components { */ 'message'?: string; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; /** @@ -307,17 +307,17 @@ export namespace Components { */ 'subHeader'?: string; /** - * If `true`, the alert will be translucent. Defaults to `false`. + * If `true`, the alert will be translucent. */ 'translucent': boolean; } interface IonAlertAttributes extends StencilHTMLAttributes { /** - * If `true`, the alert will animate. Defaults to `true`. + * If `true`, the alert will animate. */ 'animated'?: boolean; /** - * If `true`, the alert will be dismissed when the backdrop is clicked. Defaults to `true`. + * If `true`, the alert will be dismissed when the backdrop is clicked. */ 'backdropDismiss'?: boolean; /** @@ -353,7 +353,7 @@ export namespace Components { */ 'message'?: string; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; /** @@ -380,13 +380,13 @@ export namespace Components { * Emitted before the alert has presented. */ 'onIonAlertWillPresent'?: (event: CustomEvent) => void; - 'overlayIndex'?: number; + 'overlayIndex': number; /** * The subtitle in the heading of the alert. Displayed under the title. */ 'subHeader'?: string; /** - * If `true`, the alert will be translucent. Defaults to `false`. + * If `true`, the alert will be translucent. */ 'translucent'?: boolean; } @@ -448,7 +448,7 @@ export namespace Components { */ 'icon'?: string | null; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; /** @@ -470,7 +470,7 @@ export namespace Components { */ 'icon'?: string | null; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; /** @@ -481,15 +481,15 @@ export namespace Components { interface IonBackdrop { /** - * If `true`, the backdrop will stop propagation on tap. Defaults to `true`. + * If `true`, the backdrop will stop propagation on tap. */ 'stopPropagation': boolean; /** - * If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event. Defaults to `true`. + * If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event. */ 'tappable': boolean; /** - * If `true`, the backdrop will be visible. Defaults to `true`. + * If `true`, the backdrop will be visible. */ 'visible': boolean; } @@ -499,15 +499,15 @@ export namespace Components { */ 'onIonBackdropTap'?: (event: CustomEvent) => void; /** - * If `true`, the backdrop will stop propagation on tap. Defaults to `true`. + * If `true`, the backdrop will stop propagation on tap. */ 'stopPropagation'?: boolean; /** - * If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event. Defaults to `true`. + * If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event. */ 'tappable'?: boolean; /** - * If `true`, the backdrop will be visible. Defaults to `true`. + * If `true`, the backdrop will be visible. */ 'visible'?: boolean; } @@ -518,7 +518,7 @@ export namespace Components { */ 'color'?: Color; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; } @@ -528,14 +528,14 @@ export namespace Components { */ 'color'?: Color; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; } interface IonButton { /** - * The type of button. Possible values are: `"button"`, `"bar-button"`. + * The type of button. */ 'buttonType': string; /** @@ -543,7 +543,7 @@ export namespace Components { */ 'color'?: Color; /** - * If `true`, the user cannot interact with the button. Defaults to `false`. + * If `true`, the user cannot interact with the button. */ 'disabled': boolean; /** @@ -559,7 +559,7 @@ export namespace Components { */ 'href'?: string; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; /** @@ -567,11 +567,11 @@ export namespace Components { */ 'routerDirection'?: RouterDirection; /** - * The button shape. Possible values are: `"round"`. + * The button shape. */ 'shape'?: 'round'; /** - * The button size. Possible values are: `"small"`, `"default"`, `"large"`. + * The button size. */ 'size'?: 'small' | 'default' | 'large'; /** @@ -579,13 +579,13 @@ export namespace Components { */ 'strong': boolean; /** - * The type of the button. Possible values are: `"submit"`, `"reset"` and `"button"`. Default value is: `"button"` + * The type of the button. */ 'type': 'submit' | 'reset' | 'button'; } interface IonButtonAttributes extends StencilHTMLAttributes { /** - * The type of button. Possible values are: `"button"`, `"bar-button"`. + * The type of button. */ 'buttonType'?: string; /** @@ -593,7 +593,7 @@ export namespace Components { */ 'color'?: Color; /** - * If `true`, the user cannot interact with the button. Defaults to `false`. + * If `true`, the user cannot interact with the button. */ 'disabled'?: boolean; /** @@ -609,7 +609,7 @@ export namespace Components { */ 'href'?: string; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; /** @@ -625,11 +625,11 @@ export namespace Components { */ 'routerDirection'?: RouterDirection; /** - * The button shape. Possible values are: `"round"`. + * The button shape. */ 'shape'?: 'round'; /** - * The button size. Possible values are: `"small"`, `"default"`, `"large"`. + * The button size. */ 'size'?: 'small' | 'default' | 'large'; /** @@ -637,7 +637,7 @@ export namespace Components { */ 'strong'?: boolean; /** - * The type of the button. Possible values are: `"submit"`, `"reset"` and `"button"`. Default value is: `"button"` + * The type of the button. */ 'type'?: 'submit' | 'reset' | 'button'; } @@ -647,13 +647,13 @@ export namespace Components { interface IonCardContent { /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; } interface IonCardContentAttributes extends StencilHTMLAttributes { /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; } @@ -664,11 +664,11 @@ export namespace Components { */ 'color'?: Color; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; /** - * If `true`, the card header will be translucent. Defaults to `false`. + * If `true`, the card header will be translucent. */ 'translucent': boolean; } @@ -678,11 +678,11 @@ export namespace Components { */ 'color'?: Color; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; /** - * If `true`, the card header will be translucent. Defaults to `false`. + * If `true`, the card header will be translucent. */ 'translucent'?: boolean; } @@ -693,7 +693,7 @@ export namespace Components { */ 'color'?: Color; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; } @@ -703,7 +703,7 @@ export namespace Components { */ 'color'?: Color; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; } @@ -714,7 +714,7 @@ export namespace Components { */ 'color'?: Color; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; } @@ -724,7 +724,7 @@ export namespace Components { */ 'color'?: Color; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; } @@ -735,7 +735,7 @@ export namespace Components { */ 'color'?: Color; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; } @@ -745,14 +745,14 @@ export namespace Components { */ 'color'?: Color; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; } interface IonCheckbox { /** - * If `true`, the checkbox is selected. Defaults to `false`. + * If `true`, the checkbox is selected. */ 'checked': boolean; /** @@ -760,11 +760,11 @@ export namespace Components { */ 'color'?: Color; /** - * If `true`, the user cannot interact with the checkbox. Defaults to `false`. + * If `true`, the user cannot interact with the checkbox. */ 'disabled': boolean; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; /** @@ -772,13 +772,13 @@ export namespace Components { */ 'name': string; /** - * 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 ``, it's only used when the toggle participates in a native `
`. Defaults to `on`. + * 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 ``, it's only used when the toggle participates in a native ``. */ 'value': string; } interface IonCheckboxAttributes extends StencilHTMLAttributes { /** - * If `true`, the checkbox is selected. Defaults to `false`. + * If `true`, the checkbox is selected. */ 'checked'?: boolean; /** @@ -786,11 +786,11 @@ export namespace Components { */ 'color'?: Color; /** - * If `true`, the user cannot interact with the checkbox. Defaults to `false`. + * If `true`, the user cannot interact with the checkbox. */ 'disabled'?: boolean; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; /** @@ -814,7 +814,7 @@ export namespace Components { */ 'onIonStyle'?: (event: CustomEvent) => void; /** - * 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 ``, it's only used when the toggle participates in a native ``. Defaults to `on`. + * 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 ``, it's only used when the toggle participates in a native ``. */ 'value'?: string; } @@ -825,11 +825,11 @@ export namespace Components { */ 'color'?: Color; /** - * If `true`, the user cannot interact with the chip button. Defaults to `false`. + * If `true`, the user cannot interact with the chip button. */ 'disabled': boolean; /** - * Set to `"clear"` for a transparent button or to `"solid"` for a filled background. Defaults to `"clear"`. + * Set to `"clear"` for a transparent button or to `"solid"` for a filled background. */ 'fill': 'clear' | 'solid'; /** @@ -837,7 +837,7 @@ export namespace Components { */ 'href'?: string; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; } @@ -847,11 +847,11 @@ export namespace Components { */ 'color'?: Color; /** - * If `true`, the user cannot interact with the chip button. Defaults to `false`. + * If `true`, the user cannot interact with the chip button. */ 'disabled'?: boolean; /** - * Set to `"clear"` for a transparent button or to `"solid"` for a filled background. Defaults to `"clear"`. + * Set to `"clear"` for a transparent button or to `"solid"` for a filled background. */ 'fill'?: 'clear' | 'solid'; /** @@ -859,7 +859,7 @@ export namespace Components { */ 'href'?: string; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; } @@ -870,11 +870,11 @@ export namespace Components { */ 'color'?: Color; /** - * Set to `"clear"` for a transparent icon or to `"solid"` for a filled background. Defaults to `"clear"`. + * Set to `"clear"` for a transparent icon or to `"solid"` for a filled background. */ 'fill': 'clear' | 'solid'; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; /** @@ -892,11 +892,11 @@ export namespace Components { */ 'color'?: Color; /** - * Set to `"clear"` for a transparent icon or to `"solid"` for a filled background. Defaults to `"clear"`. + * Set to `"clear"` for a transparent icon or to `"solid"` for a filled background. */ 'fill'?: 'clear' | 'solid'; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; /** @@ -915,7 +915,7 @@ export namespace Components { */ 'color'?: Color; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; } @@ -925,7 +925,7 @@ export namespace Components { */ 'color'?: Color; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; } @@ -1214,7 +1214,7 @@ export namespace Components { interface IonDatetime { /** - * The text to display on the picker's cancel button. Default: `Cancel`. + * The text to display on the picker's cancel button. */ 'cancelText': string; /** @@ -1230,7 +1230,7 @@ export namespace Components { */ 'dayValues'?: number[] | number | string; /** - * If `true`, the user cannot interact with the datetime. Defaults to `false`. + * If `true`, the user cannot interact with the datetime. */ 'disabled': boolean; /** @@ -1238,7 +1238,7 @@ export namespace Components { */ 'displayFormat': string; /** - * The text to display on the picker's "Done" button. Default: `Done`. + * The text to display on the picker's "Done" button. */ 'doneText': string; /** @@ -1258,7 +1258,7 @@ export namespace Components { */ 'minuteValues'?: number[] | number | string; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; /** @@ -1304,7 +1304,7 @@ export namespace Components { } interface IonDatetimeAttributes extends StencilHTMLAttributes { /** - * The text to display on the picker's cancel button. Default: `Cancel`. + * The text to display on the picker's cancel button. */ 'cancelText'?: string; /** @@ -1320,7 +1320,7 @@ export namespace Components { */ 'dayValues'?: number[] | number | string; /** - * If `true`, the user cannot interact with the datetime. Defaults to `false`. + * If `true`, the user cannot interact with the datetime. */ 'disabled'?: boolean; /** @@ -1328,7 +1328,7 @@ export namespace Components { */ 'displayFormat'?: string; /** - * The text to display on the picker's "Done" button. Default: `Done`. + * The text to display on the picker's "Done" button. */ 'doneText'?: string; /** @@ -1348,7 +1348,7 @@ export namespace Components { */ 'minuteValues'?: number[] | number | string; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; /** @@ -1403,7 +1403,7 @@ export namespace Components { interface IonFabButton { /** - * If `true`, the fab button will be show a close icon. Defaults to `false`. + * If `true`, the fab button will be show a close icon. */ 'activated': boolean; /** @@ -1411,7 +1411,7 @@ export namespace Components { */ 'color'?: Color; /** - * If `true`, the user cannot interact with the fab button. Defaults to `false`. + * If `true`, the user cannot interact with the fab button. */ 'disabled': boolean; /** @@ -1419,7 +1419,7 @@ export namespace Components { */ 'href'?: string; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; /** @@ -1431,17 +1431,17 @@ export namespace Components { */ 'show': boolean; /** - * If `true`, the fab button will be translucent. Defaults to `false`. + * If `true`, the fab button will be translucent. */ 'translucent': boolean; /** - * The type of the button. Possible values are: `"submit"`, `"reset"` and `"button"`. Default value is: `"button"` + * The type of the button. */ 'type': 'submit' | 'reset' | 'button'; } interface IonFabButtonAttributes extends StencilHTMLAttributes { /** - * If `true`, the fab button will be show a close icon. Defaults to `false`. + * If `true`, the fab button will be show a close icon. */ 'activated'?: boolean; /** @@ -1449,7 +1449,7 @@ export namespace Components { */ 'color'?: Color; /** - * If `true`, the user cannot interact with the fab button. Defaults to `false`. + * If `true`, the user cannot interact with the fab button. */ 'disabled'?: boolean; /** @@ -1457,7 +1457,7 @@ export namespace Components { */ 'href'?: string; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; /** @@ -1477,32 +1477,32 @@ export namespace Components { */ 'show'?: boolean; /** - * If `true`, the fab button will be translucent. Defaults to `false`. + * If `true`, the fab button will be translucent. */ 'translucent'?: boolean; /** - * The type of the button. Possible values are: `"submit"`, `"reset"` and `"button"`. Default value is: `"button"` + * The type of the button. */ 'type'?: 'submit' | 'reset' | 'button'; } interface IonFabList { /** - * If `true`, the fab list will be show all fab buttons in the list. Defaults to `false`. + * If `true`, the fab list will be show all fab buttons in the list. */ 'activated': boolean; /** - * The side the fab list will show on relative to the main fab button. Defaults to `'bottom'`. + * The side the fab list will show on relative to the main fab button. */ 'side': 'start' | 'end' | 'top' | 'bottom'; } interface IonFabListAttributes extends StencilHTMLAttributes { /** - * If `true`, the fab list will be show all fab buttons in the list. Defaults to `false`. + * If `true`, the fab list will be show all fab buttons in the list. */ 'activated'?: boolean; /** - * The side the fab list will show on relative to the main fab button. Defaults to `'bottom'`. + * The side the fab list will show on relative to the main fab button. */ 'side'?: 'start' | 'end' | 'top' | 'bottom'; } @@ -1521,11 +1521,11 @@ export namespace Components { */ 'edge': boolean; /** - * Where to align the fab horizontally in the viewport. Possible values are: `"center"`, `"start"`, `"end"`. + * Where to align the fab horizontally in the viewport. */ 'horizontal'?: 'start' | 'end' | 'center'; /** - * Where to align the fab vertically in the viewport. Possible values are: `"top"`, `"center"`, `"bottom"`. + * Where to align the fab vertically in the viewport. */ 'vertical'?: 'top' | 'bottom' | 'center'; } @@ -1539,66 +1539,66 @@ export namespace Components { */ 'edge'?: boolean; /** - * Where to align the fab horizontally in the viewport. Possible values are: `"center"`, `"start"`, `"end"`. + * Where to align the fab horizontally in the viewport. */ 'horizontal'?: 'start' | 'end' | 'center'; /** - * Where to align the fab vertically in the viewport. Possible values are: `"top"`, `"center"`, `"bottom"`. + * Where to align the fab vertically in the viewport. */ 'vertical'?: 'top' | 'bottom' | 'center'; } interface IonFooter { /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; /** - * If `true`, the footer will be translucent. Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content. Defaults to `false`. + * If `true`, the footer will be translucent. Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content. */ 'translucent': boolean; } interface IonFooterAttributes extends StencilHTMLAttributes { /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; /** - * If `true`, the footer will be translucent. Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content. Defaults to `false`. + * If `true`, the footer will be translucent. Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content. */ 'translucent'?: boolean; } interface IonGrid { /** - * If `true`, the grid will have a fixed width based on the screen size. Defaults to `false`. + * If `true`, the grid will have a fixed width based on the screen size. */ 'fixed': boolean; } interface IonGridAttributes extends StencilHTMLAttributes { /** - * If `true`, the grid will have a fixed width based on the screen size. Defaults to `false`. + * If `true`, the grid will have a fixed width based on the screen size. */ 'fixed'?: boolean; } interface IonHeader { /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; /** - * If `true`, the header will be translucent. Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content. Defaults to `false`. + * If `true`, the header will be translucent. Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content. */ 'translucent': boolean; } interface IonHeaderAttributes extends StencilHTMLAttributes { /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; /** - * If `true`, the header will be translucent. Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content. Defaults to `false`. + * If `true`, the header will be translucent. Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content. */ 'translucent'?: boolean; } @@ -1632,7 +1632,7 @@ export namespace Components { /** * An animated SVG spinner that shows while loading. */ - 'loadingSpinner'?: string; + 'loadingSpinner'?: SpinnerTypes; /** * Optional text to display while loading. */ @@ -1642,7 +1642,7 @@ export namespace Components { /** * An animated SVG spinner that shows while loading. */ - 'loadingSpinner'?: string; + 'loadingSpinner'?: SpinnerTypes; /** * Optional text to display while loading. */ @@ -1659,11 +1659,11 @@ export namespace Components { */ 'disabled': boolean; /** - * The position of the infinite scroll element. The value can be either `top` or `bottom`. Defaults to `bottom`. + * The position of the infinite scroll element. The value can be either `top` or `bottom`. */ 'position': 'top' | 'bottom'; /** - * The threshold distance from the bottom of the content to call the `infinite` output event when scrolled. The threshold value can be either a percent, or in pixels. For example, use the value of `10%` for the `infinite` output event to get called when the user has scrolled 10% from the bottom of the page. Use the value `100px` when the scroll is within 100 pixels from the bottom of the page. Defaults to `15%`. + * The threshold distance from the bottom of the content to call the `infinite` output event when scrolled. The threshold value can be either a percent, or in pixels. For example, use the value of `10%` for the `infinite` output event to get called when the user has scrolled 10% from the bottom of the page. Use the value `100px` when the scroll is within 100 pixels from the bottom of the page. */ 'threshold': string; } @@ -1677,11 +1677,11 @@ export namespace Components { */ 'onIonInfinite'?: (event: CustomEvent) => void; /** - * The position of the infinite scroll element. The value can be either `top` or `bottom`. Defaults to `bottom`. + * The position of the infinite scroll element. The value can be either `top` or `bottom`. */ 'position'?: 'top' | 'bottom'; /** - * The threshold distance from the bottom of the content to call the `infinite` output event when scrolled. The threshold value can be either a percent, or in pixels. For example, use the value of `10%` for the `infinite` output event to get called when the user has scrolled 10% from the bottom of the page. Use the value `100px` when the scroll is within 100 pixels from the bottom of the page. Defaults to `15%`. + * The threshold distance from the bottom of the content to call the `infinite` output event when scrolled. The threshold value can be either a percent, or in pixels. For example, use the value of `10%` for the `infinite` output event to get called when the user has scrolled 10% from the bottom of the page. Use the value `100px` when the scroll is within 100 pixels from the bottom of the page. */ 'threshold'?: string; } @@ -1692,23 +1692,23 @@ export namespace Components { */ 'accept'?: string; /** - * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Defaults to `"none"`. + * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. */ - 'autocapitalize': string; + 'autocapitalize': 'on' | 'off' | 'words' | 'characters'; /** - * Indicates whether the value of the control can be automatically completed by the browser. Defaults to `"off"`. + * Indicates whether the value of the control can be automatically completed by the browser. */ - 'autocomplete': string; + 'autocomplete': 'on' | 'off'; /** - * Whether autocorrection should be enabled when the user is entering/editing the text value. Defaults to `"off"`. + * Whether autocorrection should be enabled when the user is entering/editing the text value. */ - 'autocorrect': string; + 'autocorrect': 'on' | 'off'; /** - * This Boolean attribute lets you specify that a form control should have input focus when the page loads. Defaults to `false`. + * This Boolean attribute lets you specify that a form control should have input focus when the page loads. */ 'autofocus': boolean; /** - * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input. Defaults to `false`. + * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input. */ 'clearInput': boolean; /** @@ -1720,11 +1720,11 @@ export namespace Components { */ 'color'?: Color; /** - * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `0`. + * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. */ 'debounce': number; /** - * If `true`, the user cannot interact with the input. Defaults to `false`. + * If `true`, the user cannot interact with the input. */ 'disabled': boolean; /** @@ -1748,7 +1748,7 @@ export namespace Components { */ 'minlength'?: number; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; /** @@ -1768,7 +1768,7 @@ export namespace Components { */ 'placeholder'?: string; /** - * If `true`, the user cannot modify the value. Defaults to `false`. + * If `true`, the user cannot modify the value. */ 'readonly': boolean; /** @@ -1788,7 +1788,7 @@ export namespace Components { */ 'size'?: number; /** - * If `true`, the element will have its spelling and grammar checked. Defaults to `false`. + * If `true`, the element will have its spelling and grammar checked. */ 'spellcheck': boolean; /** @@ -1796,7 +1796,7 @@ export namespace Components { */ 'step'?: string; /** - * The type of control to display. The default type is text. Possible values are: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, or `"url"`. + * The type of control to display. The default type is text. */ 'type': TextFieldTypes; /** @@ -1810,23 +1810,23 @@ export namespace Components { */ 'accept'?: string; /** - * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Defaults to `"none"`. + * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. */ - 'autocapitalize'?: string; + 'autocapitalize'?: 'on' | 'off' | 'words' | 'characters'; /** - * Indicates whether the value of the control can be automatically completed by the browser. Defaults to `"off"`. + * Indicates whether the value of the control can be automatically completed by the browser. */ - 'autocomplete'?: string; + 'autocomplete'?: 'on' | 'off'; /** - * Whether autocorrection should be enabled when the user is entering/editing the text value. Defaults to `"off"`. + * Whether autocorrection should be enabled when the user is entering/editing the text value. */ - 'autocorrect'?: string; + 'autocorrect'?: 'on' | 'off'; /** - * This Boolean attribute lets you specify that a form control should have input focus when the page loads. Defaults to `false`. + * This Boolean attribute lets you specify that a form control should have input focus when the page loads. */ 'autofocus'?: boolean; /** - * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input. Defaults to `false`. + * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input. */ 'clearInput'?: boolean; /** @@ -1838,11 +1838,11 @@ export namespace Components { */ 'color'?: Color; /** - * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `0`. + * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. */ 'debounce'?: number; /** - * If `true`, the user cannot interact with the input. Defaults to `false`. + * If `true`, the user cannot interact with the input. */ 'disabled'?: boolean; /** @@ -1866,7 +1866,7 @@ export namespace Components { */ 'minlength'?: number; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; /** @@ -1914,7 +1914,7 @@ export namespace Components { */ 'placeholder'?: string; /** - * If `true`, the user cannot modify the value. Defaults to `false`. + * If `true`, the user cannot modify the value. */ 'readonly'?: boolean; /** @@ -1930,7 +1930,7 @@ export namespace Components { */ 'size'?: number; /** - * If `true`, the element will have its spelling and grammar checked. Defaults to `false`. + * If `true`, the element will have its spelling and grammar checked. */ 'spellcheck'?: boolean; /** @@ -1938,7 +1938,7 @@ export namespace Components { */ 'step'?: string; /** - * The type of control to display. The default type is text. Possible values are: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, or `"url"`. + * The type of control to display. The default type is text. */ 'type'?: TextFieldTypes; /** @@ -1953,7 +1953,7 @@ export namespace Components { */ 'color'?: Color; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; } @@ -1963,7 +1963,7 @@ export namespace Components { */ 'color'?: Color; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; } @@ -1977,11 +1977,11 @@ export namespace Components { */ 'color'?: Color; /** - * If `true`, the user cannot interact with the item option. Defaults to `false`. + * If `true`, the user cannot interact with the item option. */ 'disabled': boolean; /** - * If `true`, the option will expand to take up the available width and cover any other options. Defaults to `false`. + * If `true`, the option will expand to take up the available width and cover any other options. */ 'expandable': boolean; /** @@ -1989,7 +1989,7 @@ export namespace Components { */ 'href'?: string; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; } @@ -1999,11 +1999,11 @@ export namespace Components { */ 'color'?: Color; /** - * If `true`, the user cannot interact with the item option. Defaults to `false`. + * If `true`, the user cannot interact with the item option. */ 'disabled'?: boolean; /** - * If `true`, the option will expand to take up the available width and cover any other options. Defaults to `false`. + * If `true`, the option will expand to take up the available width and cover any other options. */ 'expandable'?: boolean; /** @@ -2011,7 +2011,7 @@ export namespace Components { */ 'href'?: string; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; } @@ -2019,7 +2019,7 @@ export namespace Components { interface IonItemOptions { 'fireSwipeEvent': () => void; /** - * The side the option button should be on. Possible values: `"start"` and `"end"`. Defaults to `"end"`. If you have multiple `ion-item-options`, a side must be provided for each. + * The side the option button should be on. Possible values: `"start"` and `"end"`. If you have multiple `ion-item-options`, a side must be provided for each. */ 'side': Side; } @@ -2029,7 +2029,7 @@ export namespace Components { */ 'onIonSwipe'?: (event: CustomEvent) => void; /** - * The side the option button should be on. Possible values: `"start"` and `"end"`. Defaults to `"end"`. If you have multiple `ion-item-options`, a side must be provided for each. + * The side the option button should be on. Possible values: `"start"` and `"end"`. If you have multiple `ion-item-options`, a side must be provided for each. */ 'side'?: Side; } @@ -2044,7 +2044,7 @@ export namespace Components { */ 'closeOpened': () => Promise; /** - * If `true`, the user cannot interact with the sliding-item. Defaults to `false`. + * If `true`, the user cannot interact with the sliding-item. */ 'disabled': boolean; /** @@ -2058,7 +2058,7 @@ export namespace Components { } interface IonItemSlidingAttributes extends StencilHTMLAttributes { /** - * If `true`, the user cannot interact with the sliding-item. Defaults to `false`. + * If `true`, the user cannot interact with the sliding-item. */ 'disabled'?: boolean; /** @@ -2069,7 +2069,7 @@ export namespace Components { interface IonItem { /** - * If `true`, a button tag will be rendered and the item will be tappable. Defaults to `false`. + * If `true`, a button tag will be rendered and the item will be tappable. */ 'button': boolean; /** @@ -2081,11 +2081,11 @@ export namespace Components { */ 'detail'?: boolean; /** - * The icon to use when `detail` is set to `true`. Defaults to `"ios-arrow-forward"`. + * The icon to use when `detail` is set to `true`. */ 'detailIcon': string; /** - * If `true`, the user cannot interact with the item. Defaults to `false`. + * If `true`, the user cannot interact with the item. */ 'disabled': boolean; /** @@ -2093,11 +2093,11 @@ export namespace Components { */ 'href'?: string; /** - * How the bottom border should be displayed on the item. Available options: `"full"`, `"inset"`, `"none"`. + * How the bottom border should be displayed on the item. */ 'lines'?: 'full' | 'inset' | 'none'; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; /** @@ -2105,13 +2105,13 @@ export namespace Components { */ 'routerDirection'?: RouterDirection; /** - * The type of the button. Only used when an `onclick` or `button` property is present. Possible values are: `"submit"`, `"reset"` and `"button"`. Default value is: `"button"` + * The type of the button. Only used when an `onclick` or `button` property is present. */ 'type': 'submit' | 'reset' | 'button'; } interface IonItemAttributes extends StencilHTMLAttributes { /** - * If `true`, a button tag will be rendered and the item will be tappable. Defaults to `false`. + * If `true`, a button tag will be rendered and the item will be tappable. */ 'button'?: boolean; /** @@ -2123,11 +2123,11 @@ export namespace Components { */ 'detail'?: boolean; /** - * The icon to use when `detail` is set to `true`. Defaults to `"ios-arrow-forward"`. + * The icon to use when `detail` is set to `true`. */ 'detailIcon'?: string; /** - * If `true`, the user cannot interact with the item. Defaults to `false`. + * If `true`, the user cannot interact with the item. */ 'disabled'?: boolean; /** @@ -2135,11 +2135,11 @@ export namespace Components { */ 'href'?: string; /** - * How the bottom border should be displayed on the item. Available options: `"full"`, `"inset"`, `"none"`. + * How the bottom border should be displayed on the item. */ 'lines'?: 'full' | 'inset' | 'none'; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; /** @@ -2147,7 +2147,7 @@ export namespace Components { */ 'routerDirection'?: RouterDirection; /** - * The type of the button. Only used when an `onclick` or `button` property is present. Possible values are: `"submit"`, `"reset"` and `"button"`. Default value is: `"button"` + * The type of the button. Only used when an `onclick` or `button` property is present. */ 'type'?: 'submit' | 'reset' | 'button'; } @@ -2158,7 +2158,7 @@ export namespace Components { */ 'color'?: Color; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; /** @@ -2172,7 +2172,7 @@ export namespace Components { */ 'color'?: Color; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; /** @@ -2191,7 +2191,7 @@ export namespace Components { */ 'color'?: Color; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; } @@ -2201,7 +2201,7 @@ export namespace Components { */ 'color'?: Color; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; } @@ -2212,29 +2212,29 @@ export namespace Components { */ 'closeSlidingItems': () => Promise; /** - * If `true`, the list will have margin around it and rounded corners. Defaults to `false`. + * If `true`, the list will have margin around it and rounded corners. */ 'inset': boolean; /** - * How the bottom border should be displayed on all items. Available options: `"full"`, `"inset"`, `"none"`. + * How the bottom border should be displayed on all items. */ 'lines'?: 'full' | 'inset' | 'none'; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; } interface IonListAttributes extends StencilHTMLAttributes { /** - * If `true`, the list will have margin around it and rounded corners. Defaults to `false`. + * If `true`, the list will have margin around it and rounded corners. */ 'inset'?: boolean; /** - * How the bottom border should be displayed on all items. Available options: `"full"`, `"inset"`, `"none"`. + * How the bottom border should be displayed on all items. */ 'lines'?: 'full' | 'inset' | 'none'; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; } @@ -2257,11 +2257,11 @@ export namespace Components { interface IonLoading { /** - * If `true`, the loading indicator will animate. Defaults to `true`. + * If `true`, the loading indicator will animate. */ 'animated': boolean; /** - * If `true`, the loading indicator will be dismissed when the backdrop is clicked. Defaults to `false`. + * If `true`, the loading indicator will be dismissed when the backdrop is clicked. */ 'backdropDismiss': boolean; /** @@ -2293,7 +2293,7 @@ export namespace Components { */ 'message'?: string; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; /** @@ -2310,25 +2310,25 @@ export namespace Components { */ 'present': () => Promise; /** - * If `true`, a backdrop will be displayed behind the loading indicator. Defaults to `true`. + * If `true`, a backdrop will be displayed behind the loading indicator. */ 'showBackdrop': boolean; /** - * The name of the spinner to display. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, `"bubbles"`, `"circles"`, `"crescent"`. + * The name of the spinner to display. */ - 'spinner'?: string; + 'spinner'?: SpinnerTypes | 'hide'; /** - * If `true`, the loading indicator will be translucent. Defaults to `false`. + * If `true`, the loading indicator will be translucent. */ 'translucent': boolean; } interface IonLoadingAttributes extends StencilHTMLAttributes { /** - * If `true`, the loading indicator will animate. Defaults to `true`. + * If `true`, the loading indicator will animate. */ 'animated'?: boolean; /** - * If `true`, the loading indicator will be dismissed when the backdrop is clicked. Defaults to `false`. + * If `true`, the loading indicator will be dismissed when the backdrop is clicked. */ 'backdropDismiss'?: boolean; /** @@ -2356,7 +2356,7 @@ export namespace Components { */ 'message'?: string; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; /** @@ -2383,17 +2383,17 @@ export namespace Components { * Emitted before the loading has presented. */ 'onIonLoadingWillPresent'?: (event: CustomEvent) => void; - 'overlayIndex'?: number; + 'overlayIndex': number; /** - * If `true`, a backdrop will be displayed behind the loading indicator. Defaults to `true`. + * If `true`, a backdrop will be displayed behind the loading indicator. */ 'showBackdrop'?: boolean; /** - * The name of the spinner to display. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, `"bubbles"`, `"circles"`, `"crescent"`. + * The name of the spinner to display. */ - 'spinner'?: string; + 'spinner'?: SpinnerTypes | 'hide'; /** - * If `true`, the loading indicator will be translucent. Defaults to `false`. + * If `true`, the loading indicator will be translucent. */ 'translucent'?: boolean; } @@ -2412,7 +2412,7 @@ export namespace Components { */ 'menu'?: string; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; } @@ -2430,7 +2430,7 @@ export namespace Components { */ 'menu'?: string; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; } @@ -2519,7 +2519,7 @@ export namespace Components { */ 'contentId'?: string; /** - * If `true`, the menu is disabled. Defaults to `false`. + * If `true`, the menu is disabled. */ 'disabled': boolean; /** @@ -2547,11 +2547,11 @@ export namespace Components { */ 'setOpen': (shouldOpen: boolean, animated?: boolean) => Promise; /** - * Which side of the view the menu should be placed. Default `"start"`. + * Which side of the view the menu should be placed. */ 'side': Side; /** - * If `true`, swiping the menu is enabled. Defaults to `true`. + * If `true`, swiping the menu is enabled. */ 'swipeGesture': boolean; /** @@ -2569,7 +2569,7 @@ export namespace Components { */ 'contentId'?: string; /** - * If `true`, the menu is disabled. Defaults to `false`. + * If `true`, the menu is disabled. */ 'disabled'?: boolean; /** @@ -2601,17 +2601,17 @@ export namespace Components { */ 'onIonWillOpen'?: (event: CustomEvent) => void; /** - * Which side of the view the menu should be placed. Default `"start"`. + * Which side of the view the menu should be placed. */ 'side'?: Side; /** - * If `true`, swiping the menu is enabled. Defaults to `true`. + * If `true`, swiping the menu is enabled. */ 'swipeGesture'?: boolean; /** * The display type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`. */ - 'type'?: string; + 'type': string; } interface IonModalController { @@ -2632,11 +2632,11 @@ export namespace Components { interface IonModal { /** - * If `true`, the modal will animate. Defaults to `true`. + * If `true`, the modal will animate. */ 'animated': boolean; /** - * If `true`, the modal will be dismissed when the backdrop is clicked. Defaults to `true`. + * If `true`, the modal will be dismissed when the backdrop is clicked. */ 'backdropDismiss': boolean; /** @@ -2669,7 +2669,7 @@ export namespace Components { */ 'leaveAnimation'?: AnimationBuilder; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; /** @@ -2686,23 +2686,23 @@ export namespace Components { */ 'present': () => Promise; /** - * If `true`, a backdrop will be displayed behind the modal. Defaults to `true`. + * If `true`, a backdrop will be displayed behind the modal. */ 'showBackdrop': boolean; } interface IonModalAttributes extends StencilHTMLAttributes { /** - * If `true`, the modal will animate. Defaults to `true`. + * If `true`, the modal will animate. */ 'animated'?: boolean; /** - * If `true`, the modal will be dismissed when the backdrop is clicked. Defaults to `true`. + * If `true`, the modal will be dismissed when the backdrop is clicked. */ 'backdropDismiss'?: boolean; /** * The component to display inside of the modal. */ - 'component'?: ComponentRef; + 'component': ComponentRef; /** * The data to pass to the modal component. */ @@ -2725,7 +2725,7 @@ export namespace Components { */ 'leaveAnimation'?: AnimationBuilder; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; /** @@ -2752,9 +2752,9 @@ export namespace Components { * Emitted before the modal has presented. */ 'onIonModalWillPresent'?: (event: CustomEvent) => void; - 'overlayIndex'?: number; + 'overlayIndex': number; /** - * If `true`, a backdrop will be displayed behind the modal. Defaults to `true`. + * If `true`, a backdrop will be displayed behind the modal. */ 'showBackdrop'?: boolean; } @@ -2806,7 +2806,7 @@ export namespace Components { interface IonNav { /** - * If `true`, the nav should animate the transition of components. Default to `true`. + * If `true`, the nav should animate the transition of components. */ 'animated': boolean; /** @@ -2883,7 +2883,7 @@ export namespace Components { } interface IonNavAttributes extends StencilHTMLAttributes { /** - * If `true`, the nav should animate the transition of components. Default to `true`. + * If `true`, the nav should animate the transition of components. */ 'animated'?: boolean; /** @@ -2923,7 +2923,7 @@ export namespace Components { */ 'color'?: Color; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; } @@ -2933,7 +2933,7 @@ export namespace Components { */ 'color'?: Color; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; } @@ -2942,7 +2942,7 @@ export namespace Components { 'col': PickerColumn; } interface IonPickerColumnAttributes extends StencilHTMLAttributes { - 'col'?: PickerColumn; + 'col': PickerColumn; } interface IonPickerController { @@ -2963,11 +2963,11 @@ export namespace Components { interface IonPicker { /** - * If `true`, the picker will animate. Defaults to `true`. + * If `true`, the picker will animate. */ 'animated': boolean; /** - * If `true`, the picker will be dismissed when the backdrop is clicked. Defaults to `true`. + * If `true`, the picker will be dismissed when the backdrop is clicked. */ 'backdropDismiss': boolean; /** @@ -3007,7 +3007,7 @@ export namespace Components { */ 'leaveAnimation'?: AnimationBuilder; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; /** @@ -3024,17 +3024,17 @@ export namespace Components { */ 'present': () => Promise; /** - * If `true`, a backdrop will be displayed behind the picker. Defaults to `true`. + * If `true`, a backdrop will be displayed behind the picker. */ 'showBackdrop': boolean; } interface IonPickerAttributes extends StencilHTMLAttributes { /** - * If `true`, the picker will animate. Defaults to `true`. + * If `true`, the picker will animate. */ 'animated'?: boolean; /** - * If `true`, the picker will be dismissed when the backdrop is clicked. Defaults to `true`. + * If `true`, the picker will be dismissed when the backdrop is clicked. */ 'backdropDismiss'?: boolean; /** @@ -3066,7 +3066,7 @@ export namespace Components { */ 'leaveAnimation'?: AnimationBuilder; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; /** @@ -3093,9 +3093,9 @@ export namespace Components { * Emitted before the picker has presented. */ 'onIonPickerWillPresent'?: (event: CustomEvent) => void; - 'overlayIndex'?: number; + 'overlayIndex': number; /** - * If `true`, a backdrop will be displayed behind the picker. Defaults to `true`. + * If `true`, a backdrop will be displayed behind the picker. */ 'showBackdrop'?: boolean; } @@ -3118,11 +3118,11 @@ export namespace Components { interface IonPopover { /** - * If `true`, the popover will animate. Defaults to `true`. + * If `true`, the popover will animate. */ 'animated': boolean; /** - * If `true`, the popover will be dismissed when the backdrop is clicked. Defaults to `true`. + * If `true`, the popover will be dismissed when the backdrop is clicked. */ 'backdropDismiss': boolean; /** @@ -3159,7 +3159,7 @@ export namespace Components { */ 'leaveAnimation'?: AnimationBuilder; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; /** @@ -3176,27 +3176,27 @@ export namespace Components { */ 'present': () => Promise; /** - * If `true`, a backdrop will be displayed behind the popover. Defaults to `true`. + * If `true`, a backdrop will be displayed behind the popover. */ 'showBackdrop': boolean; /** - * If `true`, the popover will be translucent. Defaults to `false`. + * If `true`, the popover will be translucent. */ 'translucent': boolean; } interface IonPopoverAttributes extends StencilHTMLAttributes { /** - * If `true`, the popover will animate. Defaults to `true`. + * If `true`, the popover will animate. */ 'animated'?: boolean; /** - * If `true`, the popover will be dismissed when the backdrop is clicked. Defaults to `true`. + * If `true`, the popover will be dismissed when the backdrop is clicked. */ 'backdropDismiss'?: boolean; /** * The component to display inside of the popover. */ - 'component'?: ComponentRef; + 'component': ComponentRef; /** * The data to pass to the popover component. */ @@ -3223,7 +3223,7 @@ export namespace Components { */ 'leaveAnimation'?: AnimationBuilder; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; /** @@ -3250,20 +3250,20 @@ export namespace Components { * Emitted before the popover has presented. */ 'onIonPopoverWillPresent'?: (event: CustomEvent) => void; - 'overlayIndex'?: number; + 'overlayIndex': number; /** - * If `true`, a backdrop will be displayed behind the popover. Defaults to `true`. + * If `true`, a backdrop will be displayed behind the popover. */ 'showBackdrop'?: boolean; /** - * If `true`, the popover will be translucent. Defaults to `false`. + * If `true`, the popover will be translucent. */ 'translucent'?: boolean; } interface IonRadioGroup { /** - * If `true`, the radios can be deselected. Defaults to `false`. + * If `true`, the radios can be deselected. */ 'allowEmptySelection': boolean; /** @@ -3277,7 +3277,7 @@ export namespace Components { } interface IonRadioGroupAttributes extends StencilHTMLAttributes { /** - * If `true`, the radios can be deselected. Defaults to `false`. + * If `true`, the radios can be deselected. */ 'allowEmptySelection'?: boolean; /** @@ -3296,7 +3296,7 @@ export namespace Components { interface IonRadio { /** - * If `true`, the radio is selected. Defaults to `false`. + * If `true`, the radio is selected. */ 'checked': boolean; /** @@ -3304,11 +3304,11 @@ export namespace Components { */ 'color'?: Color; /** - * If `true`, the user cannot interact with the radio. Defaults to `false`. + * If `true`, the user cannot interact with the radio. */ 'disabled': boolean; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; /** @@ -3322,7 +3322,7 @@ export namespace Components { } interface IonRadioAttributes extends StencilHTMLAttributes { /** - * If `true`, the radio is selected. Defaults to `false`. + * If `true`, the radio is selected. */ 'checked'?: boolean; /** @@ -3330,11 +3330,11 @@ export namespace Components { */ 'color'?: Color; /** - * If `true`, the user cannot interact with the radio. Defaults to `false`. + * If `true`, the user cannot interact with the radio. */ 'disabled'?: boolean; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; /** @@ -3377,27 +3377,27 @@ export namespace Components { */ 'color'?: Color; /** - * How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value. Default `0`. + * How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value. */ 'debounce': number; /** - * If `true`, the user cannot interact with the range. Defaults to `false`. + * If `true`, the user cannot interact with the range. */ 'disabled': boolean; /** - * Show two knobs. Defaults to `false`. + * Show two knobs. */ 'dualKnobs': boolean; /** - * Maximum integer value of the range. Defaults to `100`. + * Maximum integer value of the range. */ 'max': number; /** - * Minimum integer value of the range. Defaults to `0`. + * Minimum integer value of the range. */ 'min': number; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; /** @@ -3405,15 +3405,15 @@ export namespace Components { */ 'name': string; /** - * If `true`, a pin with integer value is shown when the knob is pressed. Defaults to `false`. + * If `true`, a pin with integer value is shown when the knob is pressed. */ 'pin': boolean; /** - * If `true`, the knob snaps to tick marks evenly spaced based on the step property value. Defaults to `false`. + * If `true`, the knob snaps to tick marks evenly spaced based on the step property value. */ 'snaps': boolean; /** - * Specifies the value granularity. Defaults to `1`. + * Specifies the value granularity. */ 'step': number; /** @@ -3427,27 +3427,27 @@ export namespace Components { */ 'color'?: Color; /** - * How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value. Default `0`. + * How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value. */ 'debounce'?: number; /** - * If `true`, the user cannot interact with the range. Defaults to `false`. + * If `true`, the user cannot interact with the range. */ 'disabled'?: boolean; /** - * Show two knobs. Defaults to `false`. + * Show two knobs. */ 'dualKnobs'?: boolean; /** - * Maximum integer value of the range. Defaults to `100`. + * Maximum integer value of the range. */ 'max'?: number; /** - * Minimum integer value of the range. Defaults to `0`. + * Minimum integer value of the range. */ 'min'?: number; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; /** @@ -3471,15 +3471,15 @@ export namespace Components { */ 'onIonStyle'?: (event: CustomEvent) => void; /** - * If `true`, a pin with integer value is shown when the knob is pressed. Defaults to `false`. + * If `true`, a pin with integer value is shown when the knob is pressed. */ 'pin'?: boolean; /** - * If `true`, the knob snaps to tick marks evenly spaced based on the step property value. Defaults to `false`. + * If `true`, the knob snaps to tick marks evenly spaced based on the step property value. */ 'snaps'?: boolean; /** - * Specifies the value granularity. Defaults to `1`. + * Specifies the value granularity. */ 'step'?: number; /** @@ -3500,7 +3500,7 @@ export namespace Components { /** * An animated SVG spinner that shows when refreshing begins */ - 'refreshingSpinner'?: string; + 'refreshingSpinner'?: SpinnerTypes; /** * The text you want to display when performing a refresh */ @@ -3518,7 +3518,7 @@ export namespace Components { /** * An animated SVG spinner that shows when refreshing begins */ - 'refreshingSpinner'?: string; + 'refreshingSpinner'?: SpinnerTypes; /** * The text you want to display when performing a refresh */ @@ -3531,7 +3531,7 @@ export namespace Components { */ 'cancel': () => void; /** - * Time it takes to close the refresher. Defaults to `280ms`. + * Time it takes to close the refresher. */ 'closeDuration': string; /** @@ -3539,7 +3539,7 @@ export namespace Components { */ 'complete': () => void; /** - * If `true`, the refresher will be hidden. Defaults to `false`. + * If `true`, the refresher will be hidden. */ 'disabled': boolean; /** @@ -3551,21 +3551,21 @@ export namespace Components { */ 'pullMax': number; /** - * The minimum distance the user must pull down until the refresher will go into the `refreshing` state. Defaults to `60`. + * The minimum distance the user must pull down until the refresher will go into the `refreshing` state. */ 'pullMin': number; /** - * Time it takes the refresher to to snap back to the `refreshing` state. Defaults to `280ms`. + * Time it takes the refresher to to snap back to the `refreshing` state. */ 'snapbackDuration': string; } interface IonRefresherAttributes extends StencilHTMLAttributes { /** - * Time it takes to close the refresher. Defaults to `280ms`. + * Time it takes to close the refresher. */ 'closeDuration'?: string; /** - * If `true`, the refresher will be hidden. Defaults to `false`. + * If `true`, the refresher will be hidden. */ 'disabled'?: boolean; /** @@ -3585,11 +3585,11 @@ export namespace Components { */ 'pullMax'?: number; /** - * The minimum distance the user must pull down until the refresher will go into the `refreshing` state. Defaults to `60`. + * The minimum distance the user must pull down until the refresher will go into the `refreshing` state. */ 'pullMin'?: number; /** - * Time it takes the refresher to to snap back to the `refreshing` state. Defaults to `280ms`. + * Time it takes the refresher to to snap back to the `refreshing` state. */ 'snapbackDuration'?: string; } @@ -3600,13 +3600,13 @@ export namespace Components { */ 'complete': (listOrReorder?: boolean | any[] | undefined) => Promise; /** - * If `true`, the reorder will be hidden. Defaults to `true`. + * If `true`, the reorder will be hidden. */ 'disabled': boolean; } interface IonReorderGroupAttributes extends StencilHTMLAttributes { /** - * If `true`, the reorder will be hidden. Defaults to `true`. + * If `true`, the reorder will be hidden. */ 'disabled'?: boolean; /** @@ -3669,7 +3669,7 @@ export namespace Components { /** * Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-nav`) when the route matches. The value of this property is not always the tagname of the component to load, in `ion-tabs` it actually refers to the name of the `ion-tab` to select. */ - 'component'?: string; + 'component': string; /** * A key value `{ 'red': true, 'blue': 'white'}` containing props that should be passed to the defined component when rendered. */ @@ -3686,7 +3686,7 @@ export namespace Components { interface IonRouterOutlet { /** - * If `true`, the router-outlet should animate the transition of components. Default to `true`. + * If `true`, the router-outlet should animate the transition of components. */ 'animated': boolean; /** @@ -3704,7 +3704,7 @@ export namespace Components { } interface IonRouterOutletAttributes extends StencilHTMLAttributes { /** - * If `true`, the router-outlet should animate the transition of components. Default to `true`. + * If `true`, the router-outlet should animate the transition of components. */ 'animated'?: boolean; /** @@ -3761,23 +3761,23 @@ export namespace Components { interface IonSearchbar { /** - * If `true`, enable searchbar animation. Defaults to `false`. + * If `true`, enable searchbar animation. */ 'animated': boolean; /** - * Set the input's autocomplete property. Default `"off"`. + * Set the input's autocomplete property. */ 'autocomplete': 'on' | 'off'; /** - * Set the input's autocorrect property. Default `"off"`. + * Set the input's autocorrect property. */ 'autocorrect': 'on' | 'off'; /** - * Set the cancel button icon. Only applies to `md` mode. Defaults to `"md-arrow-back"`. + * Set the cancel button icon. Only applies to `md` mode. */ 'cancelButtonIcon': string; /** - * Set the the cancel button text. Only applies to `ios` mode. Default: `"Cancel"`. + * Set the the cancel button text. Only applies to `ios` mode. */ 'cancelButtonText': string; /** @@ -3789,37 +3789,37 @@ export namespace Components { */ 'color'?: Color; /** - * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `250`. + * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. */ 'debounce': number; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; /** - * Set the input's placeholder. Default `"Search"`. + * Set the input's placeholder. */ 'placeholder': string; /** - * The icon to use as the search icon. Defaults to `"search"`. + * The icon to use as the search icon. */ - 'searchIcon'?: string; + 'searchIcon': string; /** * Sets focus on the specified `ion-searchbar`. Use this method instead of the global `input.focus()`. */ 'setFocus': () => void; /** - * If `true`, show the cancel button. Defaults to `false`. + * If `true`, show the cancel button. */ 'showCancelButton': boolean; /** - * If `true`, enable spellcheck on the input. Defaults to `false`. + * If `true`, enable spellcheck on the input. */ 'spellcheck': boolean; /** - * Set the type of the input. Values: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, `"url"`. Default `"search"`. + * Set the type of the input. */ - 'type': string; + 'type': 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url'; /** * the value of the searchbar. */ @@ -3827,23 +3827,23 @@ export namespace Components { } interface IonSearchbarAttributes extends StencilHTMLAttributes { /** - * If `true`, enable searchbar animation. Defaults to `false`. + * If `true`, enable searchbar animation. */ 'animated'?: boolean; /** - * Set the input's autocomplete property. Default `"off"`. + * Set the input's autocomplete property. */ 'autocomplete'?: 'on' | 'off'; /** - * Set the input's autocorrect property. Default `"off"`. + * Set the input's autocorrect property. */ 'autocorrect'?: 'on' | 'off'; /** - * Set the cancel button icon. Only applies to `md` mode. Defaults to `"md-arrow-back"`. + * Set the cancel button icon. Only applies to `md` mode. */ 'cancelButtonIcon'?: string; /** - * Set the the cancel button text. Only applies to `ios` mode. Default: `"Cancel"`. + * Set the the cancel button text. Only applies to `ios` mode. */ 'cancelButtonText'?: string; /** @@ -3855,11 +3855,11 @@ export namespace Components { */ 'color'?: Color; /** - * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `250`. + * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. */ 'debounce'?: number; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; /** @@ -3887,25 +3887,25 @@ export namespace Components { */ 'onIonInput'?: (event: CustomEvent) => void; /** - * Set the input's placeholder. Default `"Search"`. + * Set the input's placeholder. */ 'placeholder'?: string; /** - * The icon to use as the search icon. Defaults to `"search"`. + * The icon to use as the search icon. */ 'searchIcon'?: string; /** - * If `true`, show the cancel button. Defaults to `false`. + * If `true`, show the cancel button. */ 'showCancelButton'?: boolean; /** - * If `true`, enable spellcheck on the input. Defaults to `false`. + * If `true`, enable spellcheck on the input. */ 'spellcheck'?: boolean; /** - * Set the type of the input. Values: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, `"url"`. Default `"search"`. + * Set the type of the input. */ - 'type'?: string; + 'type'?: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url'; /** * the value of the searchbar. */ @@ -3914,7 +3914,7 @@ export namespace Components { interface IonSegmentButton { /** - * If `true`, the segment button is selected. Defaults to `false`. + * If `true`, the segment button is selected. */ 'checked': boolean; /** @@ -3922,11 +3922,11 @@ export namespace Components { */ 'color'?: Color; /** - * If `true`, the user cannot interact with the segment button. Defaults to `false`. + * If `true`, the user cannot interact with the segment button. */ 'disabled': boolean; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; /** @@ -3936,7 +3936,7 @@ export namespace Components { } interface IonSegmentButtonAttributes extends StencilHTMLAttributes { /** - * If `true`, the segment button is selected. Defaults to `false`. + * If `true`, the segment button is selected. */ 'checked'?: boolean; /** @@ -3944,11 +3944,11 @@ export namespace Components { */ 'color'?: Color; /** - * If `true`, the user cannot interact with the segment button. Defaults to `false`. + * If `true`, the user cannot interact with the segment button. */ 'disabled'?: boolean; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; /** @@ -3967,11 +3967,11 @@ export namespace Components { */ 'color'?: Color; /** - * If `true`, the user cannot interact with the segment. Defaults to `false`. + * If `true`, the user cannot interact with the segment. */ 'disabled': boolean; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; /** @@ -3985,11 +3985,11 @@ export namespace Components { */ 'color'?: Color; /** - * If `true`, the user cannot interact with the segment. Defaults to `false`. + * If `true`, the user cannot interact with the segment. */ 'disabled'?: boolean; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; /** @@ -4004,7 +4004,7 @@ export namespace Components { interface IonSelectOption { /** - * If `true`, the user cannot interact with the select option. Defaults to `false`. + * If `true`, the user cannot interact with the select option. */ 'disabled': boolean; /** @@ -4018,7 +4018,7 @@ export namespace Components { } interface IonSelectOptionAttributes extends StencilHTMLAttributes { /** - * If `true`, the user cannot interact with the select option. Defaults to `false`. + * If `true`, the user cannot interact with the select option. */ 'disabled'?: boolean; /** @@ -4078,15 +4078,15 @@ export namespace Components { interface IonSelect { /** - * The text to display on the cancel button. Default: `Cancel`. + * The text to display on the cancel button. */ 'cancelText': string; /** - * If `true`, the user cannot interact with the select. Defaults to `false`. + * If `true`, the user cannot interact with the select. */ 'disabled': boolean; /** - * The interface the select should use: `action-sheet`, `popover` or `alert`. Default: `alert`. + * The interface the select should use: `action-sheet`, `popover` or `alert`. */ 'interface': SelectInterface; /** @@ -4094,7 +4094,7 @@ export namespace Components { */ 'interfaceOptions': any; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; /** @@ -4106,7 +4106,7 @@ export namespace Components { */ 'name': string; /** - * The text to display on the ok button. Default: `OK`. + * The text to display on the ok button. */ 'okText': string; /** @@ -4128,15 +4128,15 @@ export namespace Components { } interface IonSelectAttributes extends StencilHTMLAttributes { /** - * The text to display on the cancel button. Default: `Cancel`. + * The text to display on the cancel button. */ 'cancelText'?: string; /** - * If `true`, the user cannot interact with the select. Defaults to `false`. + * If `true`, the user cannot interact with the select. */ 'disabled'?: boolean; /** - * The interface the select should use: `action-sheet`, `popover` or `alert`. Default: `alert`. + * The interface the select should use: `action-sheet`, `popover` or `alert`. */ 'interface'?: SelectInterface; /** @@ -4144,7 +4144,7 @@ export namespace Components { */ 'interfaceOptions'?: any; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; /** @@ -4156,7 +4156,7 @@ export namespace Components { */ 'name'?: string; /** - * The text to display on the ok button. Default: `OK`. + * The text to display on the ok button. */ 'okText'?: string; /** @@ -4195,13 +4195,13 @@ export namespace Components { interface IonSkeletonText { /** - * Width for the element to render at. Default is 100% + * Width for the element to render at. */ 'width': string; } interface IonSkeletonTextAttributes extends StencilHTMLAttributes { /** - * Width for the element to render at. Default is 100% + * Width for the element to render at. */ 'width'?: string; } @@ -4245,7 +4245,7 @@ export namespace Components { */ 'lockSwipes': (shouldLockSwipes: boolean) => Promise; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; /** @@ -4253,11 +4253,11 @@ export namespace Components { */ 'options': any; /** - * If `true`, show the pagination. Defaults to `false`. + * If `true`, show the pagination. */ 'pager': boolean; /** - * If `true`, show the scrollbar. Defaults to `false`. + * If `true`, show the scrollbar. */ 'scrollbar': boolean; /** @@ -4287,7 +4287,7 @@ export namespace Components { } interface IonSlidesAttributes extends StencilHTMLAttributes { /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; /** @@ -4359,11 +4359,11 @@ export namespace Components { */ 'options'?: any; /** - * If `true`, show the pagination. Defaults to `false`. + * If `true`, show the pagination. */ 'pager'?: boolean; /** - * If `true`, show the scrollbar. Defaults to `false`. + * If `true`, show the scrollbar. */ 'scrollbar'?: boolean; } @@ -4378,11 +4378,11 @@ export namespace Components { */ 'duration'?: number; /** - * The name of the SVG spinner to use. If a name is not provided, the platform's default spinner will be used. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, `"bubbles"`, `"circles"`, `"crescent"`. + * The name of the SVG spinner to use. If a name is not provided, the platform's default spinner will be used. */ 'name'?: SpinnerTypes; /** - * If `true`, the spinner's animation will be paused. Defaults to `false`. + * If `true`, the spinner's animation will be paused. */ 'paused': boolean; } @@ -4396,18 +4396,18 @@ export namespace Components { */ 'duration'?: number; /** - * The name of the SVG spinner to use. If a name is not provided, the platform's default spinner will be used. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, `"bubbles"`, `"circles"`, `"crescent"`. + * The name of the SVG spinner to use. If a name is not provided, the platform's default spinner will be used. */ 'name'?: SpinnerTypes; /** - * If `true`, the spinner's animation will be paused. Defaults to `false`. + * If `true`, the spinner's animation will be paused. */ 'paused'?: boolean; } interface IonSplitPane { /** - * If `true`, the split pane will be hidden. Defaults to `false`. + * If `true`, the split pane will be hidden. */ 'disabled': boolean; /** @@ -4417,7 +4417,7 @@ export namespace Components { } interface IonSplitPaneAttributes extends StencilHTMLAttributes { /** - * If `true`, the split pane will be hidden. Defaults to `false`. + * If `true`, the split pane will be hidden. */ 'disabled'?: boolean; /** @@ -4444,7 +4444,7 @@ export namespace Components { */ 'layout': TabbarLayout; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; /** @@ -4452,7 +4452,7 @@ export namespace Components { */ 'selectedTab'?: string; /** - * If `true`, the tab bar will be translucent. Defaults to `false`. + * If `true`, the tab bar will be translucent. */ 'translucent': boolean; } @@ -4466,7 +4466,7 @@ export namespace Components { */ 'layout'?: TabbarLayout; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; 'onIonTabBarChanged'?: (event: CustomEvent) => void; @@ -4475,7 +4475,7 @@ export namespace Components { */ 'selectedTab'?: string; /** - * If `true`, the tab bar will be translucent. Defaults to `false`. + * If `true`, the tab bar will be translucent. */ 'translucent'?: boolean; } @@ -4498,7 +4498,7 @@ export namespace Components { */ 'layout': TabbarLayout; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; /** @@ -4524,7 +4524,7 @@ export namespace Components { */ 'layout'?: TabbarLayout; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; /** @@ -4607,7 +4607,7 @@ export namespace Components { */ 'color'?: Color; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; } @@ -4617,18 +4617,18 @@ export namespace Components { */ 'color'?: Color; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; } interface IonTextarea { /** - * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Defaults to `"none"`. + * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. */ 'autocapitalize': string; /** - * This Boolean attribute lets you specify that a form control should have input focus when the page loads. Defaults to `false`. + * This Boolean attribute lets you specify that a form control should have input focus when the page loads. */ 'autofocus': boolean; /** @@ -4644,11 +4644,11 @@ export namespace Components { */ 'cols'?: number; /** - * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `0`. + * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. */ 'debounce': number; /** - * If `true`, the user cannot interact with the textarea. Defaults to `false`. + * If `true`, the user cannot interact with the textarea. */ 'disabled': boolean; /** @@ -4660,7 +4660,7 @@ export namespace Components { */ 'minlength'?: number; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; /** @@ -4672,7 +4672,7 @@ export namespace Components { */ 'placeholder'?: string; /** - * If `true`, the user cannot modify the value. Defaults to `false`. + * If `true`, the user cannot modify the value. */ 'readonly': boolean; /** @@ -4688,7 +4688,7 @@ export namespace Components { */ 'setFocus': () => void; /** - * If `true`, the element will have its spelling and grammar checked. Defaults to `false`. + * If `true`, the element will have its spelling and grammar checked. */ 'spellcheck': boolean; /** @@ -4696,17 +4696,17 @@ export namespace Components { */ 'value'?: string | null; /** - * Indicates how the control wraps text. Possible values are: `"hard"`, `"soft"`, `"off"`. + * Indicates how the control wraps text. */ - 'wrap'?: string; + 'wrap'?: 'hard' | 'soft' | 'off'; } interface IonTextareaAttributes extends StencilHTMLAttributes { /** - * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Defaults to `"none"`. + * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. */ 'autocapitalize'?: string; /** - * This Boolean attribute lets you specify that a form control should have input focus when the page loads. Defaults to `false`. + * This Boolean attribute lets you specify that a form control should have input focus when the page loads. */ 'autofocus'?: boolean; /** @@ -4722,11 +4722,11 @@ export namespace Components { */ 'cols'?: number; /** - * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `0`. + * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. */ 'debounce'?: number; /** - * If `true`, the user cannot interact with the textarea. Defaults to `false`. + * If `true`, the user cannot interact with the textarea. */ 'disabled'?: boolean; /** @@ -4738,7 +4738,7 @@ export namespace Components { */ 'minlength'?: number; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; /** @@ -4770,7 +4770,7 @@ export namespace Components { */ 'placeholder'?: string; /** - * If `true`, the user cannot modify the value. Defaults to `false`. + * If `true`, the user cannot modify the value. */ 'readonly'?: boolean; /** @@ -4782,7 +4782,7 @@ export namespace Components { */ 'rows'?: number; /** - * If `true`, the element will have its spelling and grammar checked. Defaults to `false`. + * If `true`, the element will have its spelling and grammar checked. */ 'spellcheck'?: boolean; /** @@ -4790,9 +4790,9 @@ export namespace Components { */ 'value'?: string | null; /** - * Indicates how the control wraps text. Possible values are: `"hard"`, `"soft"`, `"off"`. + * Indicates how the control wraps text. */ - 'wrap'?: string; + 'wrap'?: 'hard' | 'soft' | 'off'; } interface IonThumbnail {} @@ -4829,7 +4829,7 @@ export namespace Components { interface IonToast { /** - * If `true`, the toast will animate. Defaults to `true`. + * If `true`, the toast will animate. */ 'animated': boolean; /** @@ -4869,7 +4869,7 @@ export namespace Components { */ 'message'?: string; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; /** @@ -4882,7 +4882,7 @@ export namespace Components { 'onWillDismiss': () => Promise>; 'overlayIndex': number; /** - * The position of the toast on the screen. Possible values: "top", "middle", "bottom". + * The position of the toast on the screen. */ 'position': 'top' | 'bottom' | 'middle'; /** @@ -4890,17 +4890,17 @@ export namespace Components { */ 'present': () => Promise; /** - * If `true`, the close button will be displayed. Defaults to `false`. + * If `true`, the close button will be displayed. */ 'showCloseButton': boolean; /** - * If `true`, the toast will be translucent. Defaults to `false`. + * If `true`, the toast will be translucent. */ 'translucent': boolean; } interface IonToastAttributes extends StencilHTMLAttributes { /** - * If `true`, the toast will animate. Defaults to `true`. + * If `true`, the toast will animate. */ 'animated'?: boolean; /** @@ -4936,7 +4936,7 @@ export namespace Components { */ 'message'?: string; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; /** @@ -4963,24 +4963,24 @@ export namespace Components { * Emitted before the toast has presented. */ 'onIonToastWillPresent'?: (event: CustomEvent) => void; - 'overlayIndex'?: number; + 'overlayIndex': number; /** - * The position of the toast on the screen. Possible values: "top", "middle", "bottom". + * The position of the toast on the screen. */ 'position'?: 'top' | 'bottom' | 'middle'; /** - * If `true`, the close button will be displayed. Defaults to `false`. + * If `true`, the close button will be displayed. */ 'showCloseButton'?: boolean; /** - * If `true`, the toast will be translucent. Defaults to `false`. + * If `true`, the toast will be translucent. */ 'translucent'?: boolean; } interface IonToggle { /** - * If `true`, the toggle is selected. Defaults to `false`. + * If `true`, the toggle is selected. */ 'checked': boolean; /** @@ -4988,11 +4988,11 @@ export namespace Components { */ 'color'?: Color; /** - * If `true`, the user cannot interact with the toggle. Defaults to `false`. + * If `true`, the user cannot interact with the toggle. */ 'disabled': boolean; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; /** @@ -5000,13 +5000,13 @@ export namespace Components { */ 'name': string; /** - * 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 ``, it's only used when the toggle participates in a native ``. Defaults to `on`. + * 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 ``, it's only used when the toggle participates in a native ``. */ 'value'?: string | null; } interface IonToggleAttributes extends StencilHTMLAttributes { /** - * If `true`, the toggle is selected. Defaults to `false`. + * If `true`, the toggle is selected. */ 'checked'?: boolean; /** @@ -5014,11 +5014,11 @@ export namespace Components { */ 'color'?: Color; /** - * If `true`, the user cannot interact with the toggle. Defaults to `false`. + * If `true`, the user cannot interact with the toggle. */ 'disabled'?: boolean; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; /** @@ -5042,7 +5042,7 @@ export namespace Components { */ 'onIonStyle'?: (event: CustomEvent) => void; /** - * 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 ``, it's only used when the toggle participates in a native ``. Defaults to `on`. + * 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 ``, it's only used when the toggle participates in a native ``. */ 'value'?: string | null; } @@ -5053,7 +5053,7 @@ export namespace Components { */ 'color'?: Color; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode': Mode; } @@ -5063,22 +5063,22 @@ export namespace Components { */ 'color'?: Color; /** - * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + * The mode determines which platform styles to use. */ 'mode'?: Mode; } interface IonVirtualScroll { /** - * The approximate width of each footer template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This value can use either `px` or `%` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered. Default is `100%`. + * The approximate width of each footer template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This value can use either `px` or `%` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered. */ 'approxFooterHeight': number; /** - * The approximate height of each header template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This height value can only use `px` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered. Default is `40px`. + * The approximate height of each header template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This height value can only use `px` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered. */ 'approxHeaderHeight': number; /** - * It is important to provide this if virtual item height will be significantly larger than the default The approximate height of each virtual item template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This height value can only use `px` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered. Default is `45`. + * It is important to provide this if virtual item height will be significantly larger than the default The approximate height of each virtual item template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This height value can only use `px` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered. */ 'approxItemHeight': number; 'domRender'?: DomRenderFn; @@ -5129,15 +5129,15 @@ export namespace Components { } interface IonVirtualScrollAttributes extends StencilHTMLAttributes { /** - * The approximate width of each footer template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This value can use either `px` or `%` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered. Default is `100%`. + * The approximate width of each footer template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This value can use either `px` or `%` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered. */ 'approxFooterHeight'?: number; /** - * The approximate height of each header template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This height value can only use `px` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered. Default is `40px`. + * The approximate height of each header template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This height value can only use `px` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered. */ 'approxHeaderHeight'?: number; /** - * It is important to provide this if virtual item height will be significantly larger than the default The approximate height of each virtual item template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This height value can only use `px` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered. Default is `45`. + * It is important to provide this if virtual item height will be significantly larger than the default The approximate height of each virtual item template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This height value can only use `px` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered. */ 'approxItemHeight'?: number; 'domRender'?: DomRenderFn; diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx index c7ada24efc..a7602fcb17 100644 --- a/core/src/components/action-sheet/action-sheet.tsx +++ b/core/src/components/action-sheet/action-sheet.tsx @@ -31,7 +31,6 @@ export class ActionSheet implements ComponentInterface, OverlayInterface { /** * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; @@ -62,7 +61,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface { @Prop() cssClass?: string | string[]; /** - * If `true`, the action sheet will be dismissed when the backdrop is clicked. Defaults to `true`. + * If `true`, the action sheet will be dismissed when the backdrop is clicked. */ @Prop() backdropDismiss = true; @@ -77,12 +76,12 @@ export class ActionSheet implements ComponentInterface, OverlayInterface { @Prop() subHeader?: string; /** - * If `true`, the action sheet will be translucent. Defaults to `false`. + * If `true`, the action sheet will be translucent. */ @Prop() translucent = false; /** - * If `true`, the action sheet will animate. Defaults to `true`. + * If `true`, the action sheet will animate. */ @Prop() animated = true; diff --git a/core/src/components/action-sheet/readme.md b/core/src/components/action-sheet/readme.md index 0725f9a764..b95900d02d 100644 --- a/core/src/components/action-sheet/readme.md +++ b/core/src/components/action-sheet/readme.md @@ -16,32 +16,32 @@ A button's `role` property can either be `destructive` or `cancel`. Buttons with ## Properties -| Property | Attribute | Description | Type | -| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | --------------------------------- | -| `animated` | `animated` | If `true`, the action sheet will animate. Defaults to `true`. | `boolean` | -| `backdropDismiss` | `backdrop-dismiss` | If `true`, the action sheet will be dismissed when the backdrop is clicked. Defaults to `true`. | `boolean` | -| `buttons` | -- | An array of buttons for the action sheet. | `(string \| ActionSheetButton)[]` | -| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | -| `enterAnimation` | -- | Animation to use when the action sheet is presented. | `AnimationBuilder \| undefined` | -| `header` | `header` | Title for the action sheet. | `string \| undefined` | -| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | -| `leaveAnimation` | -- | Animation to use when the action sheet is dismissed. | `AnimationBuilder \| undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` | -| `overlayIndex` | `overlay-index` | | `number` | -| `subHeader` | `sub-header` | Subtitle for the action sheet. | `string \| undefined` | -| `translucent` | `translucent` | If `true`, the action sheet will be translucent. Defaults to `false`. | `boolean` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- | +| `animated` | `animated` | If `true`, the action sheet will animate. | `boolean` | `true` | +| `backdropDismiss` | `backdrop-dismiss` | If `true`, the action sheet will be dismissed when the backdrop is clicked. | `boolean` | `true` | +| `buttons` | -- | An array of buttons for the action sheet. | `(string \| ActionSheetButton)[]` | `undefined` | +| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | +| `enterAnimation` | -- | Animation to use when the action sheet is presented. | `AnimationBuilder \| undefined` | `undefined` | +| `header` | `header` | Title for the action sheet. | `string \| undefined` | `undefined` | +| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | +| `leaveAnimation` | -- | Animation to use when the action sheet is dismissed. | `AnimationBuilder \| undefined` | `undefined` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `overlayIndex` | `overlay-index` | | `number` | `undefined` | +| `subHeader` | `sub-header` | Subtitle for the action sheet. | `string \| undefined` | `undefined` | +| `translucent` | `translucent` | If `true`, the action sheet will be translucent. | `boolean` | `false` | ## Events -| Event | Detail | Description | -| --------------------------- | ------------------ | --------------------------------------- | -| `ionActionSheetDidDismiss` | OverlayEventDetail | Emitted after the alert has dismissed. | -| `ionActionSheetDidLoad` | | Emitted after the alert has loaded. | -| `ionActionSheetDidPresent` | | Emitted after the alert has presented. | -| `ionActionSheetDidUnload` | | Emitted after the alert has unloaded. | -| `ionActionSheetWillDismiss` | OverlayEventDetail | Emitted before the alert has dismissed. | -| `ionActionSheetWillPresent` | | Emitted before the alert has presented. | +| Event | Description | Detail | +| --------------------------- | --------------------------------------- | ------------------ | +| `ionActionSheetDidDismiss` | Emitted after the alert has dismissed. | OverlayEventDetail | +| `ionActionSheetDidLoad` | Emitted after the alert has loaded. | void | +| `ionActionSheetDidPresent` | Emitted after the alert has presented. | void | +| `ionActionSheetDidUnload` | Emitted after the alert has unloaded. | void | +| `ionActionSheetWillDismiss` | Emitted before the alert has dismissed. | OverlayEventDetail | +| `ionActionSheetWillPresent` | Emitted before the alert has presented. | void | ## Methods diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx index 0c7463a2f8..9d7b419a52 100644 --- a/core/src/components/alert/alert.tsx +++ b/core/src/components/alert/alert.tsx @@ -31,12 +31,12 @@ export class Alert implements ComponentInterface, OverlayInterface { @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement; @Prop({ context: 'config' }) config!: Config; + /** @internal */ @Prop() overlayIndex!: number; /** * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; @@ -87,17 +87,17 @@ export class Alert implements ComponentInterface, OverlayInterface { @Prop({ mutable: true }) inputs: AlertInput[] = []; /** - * If `true`, the alert will be dismissed when the backdrop is clicked. Defaults to `true`. + * If `true`, the alert will be dismissed when the backdrop is clicked. */ @Prop() backdropDismiss = true; /** - * If `true`, the alert will be translucent. Defaults to `false`. + * If `true`, the alert will be translucent. */ @Prop() translucent = false; /** - * If `true`, the alert will animate. Defaults to `true`. + * If `true`, the alert will animate. */ @Prop() animated = true; diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md index d6c2524533..6ec9a0199a 100644 --- a/core/src/components/alert/readme.md +++ b/core/src/components/alert/readme.md @@ -25,34 +25,34 @@ Alerts can also include several different inputs whose data can be passed back t ## Properties -| Property | Attribute | Description | Type | -| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | --------------------------------- | -| `animated` | `animated` | If `true`, the alert will animate. Defaults to `true`. | `boolean` | -| `backdropDismiss` | `backdrop-dismiss` | If `true`, the alert will be dismissed when the backdrop is clicked. Defaults to `true`. | `boolean` | -| `buttons` | -- | Array of buttons to be added to the alert. | `(string \| AlertButton)[]` | -| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | -| `enterAnimation` | -- | Animation to use when the alert is presented. | `AnimationBuilder \| undefined` | -| `header` | `header` | The main title in the heading of the alert. | `string \| undefined` | -| `inputs` | -- | Array of input to show in the alert. | `AlertInput[]` | -| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | -| `leaveAnimation` | -- | Animation to use when the alert is dismissed. | `AnimationBuilder \| undefined` | -| `message` | `message` | The main message to be displayed in the alert. | `string \| undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` | -| `overlayIndex` | `overlay-index` | | `number` | -| `subHeader` | `sub-header` | The subtitle in the heading of the alert. Displayed under the title. | `string \| undefined` | -| `translucent` | `translucent` | If `true`, the alert will be translucent. Defaults to `false`. | `boolean` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- | +| `animated` | `animated` | If `true`, the alert will animate. | `boolean` | `true` | +| `backdropDismiss` | `backdrop-dismiss` | If `true`, the alert will be dismissed when the backdrop is clicked. | `boolean` | `true` | +| `buttons` | -- | Array of buttons to be added to the alert. | `(string \| AlertButton)[]` | `[]` | +| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | +| `enterAnimation` | -- | Animation to use when the alert is presented. | `AnimationBuilder \| undefined` | `undefined` | +| `header` | `header` | The main title in the heading of the alert. | `string \| undefined` | `undefined` | +| `inputs` | -- | Array of input to show in the alert. | `AlertInput[]` | `[]` | +| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | +| `leaveAnimation` | -- | Animation to use when the alert is dismissed. | `AnimationBuilder \| undefined` | `undefined` | +| `message` | `message` | The main message to be displayed in the alert. | `string \| undefined` | `undefined` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `overlayIndex` | `overlay-index` | | `number` | `undefined` | +| `subHeader` | `sub-header` | The subtitle in the heading of the alert. Displayed under the title. | `string \| undefined` | `undefined` | +| `translucent` | `translucent` | If `true`, the alert will be translucent. | `boolean` | `false` | ## Events -| Event | Detail | Description | -| --------------------- | ------------------ | --------------------------------------- | -| `ionAlertDidDismiss` | OverlayEventDetail | Emitted after the alert has dismissed. | -| `ionAlertDidLoad` | | Emitted after the alert has presented. | -| `ionAlertDidPresent` | | Emitted after the alert has presented. | -| `ionAlertDidUnload` | | Emitted before the alert has presented. | -| `ionAlertWillDismiss` | OverlayEventDetail | Emitted before the alert has dismissed. | -| `ionAlertWillPresent` | | Emitted before the alert has presented. | +| Event | Description | Detail | +| --------------------- | --------------------------------------- | ------------------ | +| `ionAlertDidDismiss` | Emitted after the alert has dismissed. | OverlayEventDetail | +| `ionAlertDidLoad` | Emitted after the alert has presented. | void | +| `ionAlertDidPresent` | Emitted after the alert has presented. | void | +| `ionAlertDidUnload` | Emitted before the alert has presented. | void | +| `ionAlertWillDismiss` | Emitted before the alert has dismissed. | OverlayEventDetail | +| `ionAlertWillPresent` | Emitted before the alert has presented. | void | ## Methods diff --git a/core/src/components/anchor/readme.md b/core/src/components/anchor/readme.md index be30bafcfe..6a49bcfbc0 100644 --- a/core/src/components/anchor/readme.md +++ b/core/src/components/anchor/readme.md @@ -8,11 +8,11 @@ The Anchor component is used for navigating to a specified link. Similar to the ## Properties -| Property | Attribute | Description | Type | -| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -| `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` | -| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | -| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root" \| undefined` | +| 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` | +| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` | +| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root" \| undefined` | `undefined` | ## CSS Custom Properties diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx index 899e69793f..1705b1897c 100644 --- a/core/src/components/back-button/back-button.tsx +++ b/core/src/components/back-button/back-button.tsx @@ -27,7 +27,6 @@ export class BackButton implements ComponentInterface { /** * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; diff --git a/core/src/components/back-button/readme.md b/core/src/components/back-button/readme.md index 4975b21303..a029b1fdf7 100644 --- a/core/src/components/back-button/readme.md +++ b/core/src/components/back-button/readme.md @@ -10,13 +10,13 @@ To change what is displayed in the back button, use the `text` and `icon` proper ## Properties -| Property | Attribute | Description | Type | -| ------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | -| `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` | -| `defaultHref` | `default-href` | The url to navigate back to by default when there is no history. | `string \| undefined` | -| `icon` | `icon` | The icon name to use for the back button. | `null \| string \| undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` | -| `text` | `text` | The text to display in the back button. | `null \| string \| undefined` | +| 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` | +| `defaultHref` | `default-href` | The url to navigate back to by default when there is no history. | `string \| undefined` | `undefined` | +| `icon` | `icon` | The icon name to use for the back button. | `null \| string \| undefined` | `undefined` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `text` | `text` | The text to display in the back button. | `null \| string \| undefined` | `undefined` | ## CSS Custom Properties diff --git a/core/src/components/backdrop/backdrop.tsx b/core/src/components/backdrop/backdrop.tsx index 9c443d53aa..d282fc36bf 100644 --- a/core/src/components/backdrop/backdrop.tsx +++ b/core/src/components/backdrop/backdrop.tsx @@ -21,17 +21,17 @@ export class Backdrop implements ComponentInterface { @Prop({ context: 'document' }) doc!: Document; /** - * If `true`, the backdrop will be visible. Defaults to `true`. + * If `true`, the backdrop will be visible. */ @Prop() visible = true; /** - * If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event. Defaults to `true`. + * If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event. */ @Prop() tappable = true; /** - * If `true`, the backdrop will stop propagation on tap. Defaults to `true`. + * If `true`, the backdrop will stop propagation on tap. */ @Prop() stopPropagation = true; diff --git a/core/src/components/backdrop/readme.md b/core/src/components/backdrop/readme.md index d54c7d0478..aa3fa392b6 100644 --- a/core/src/components/backdrop/readme.md +++ b/core/src/components/backdrop/readme.md @@ -8,18 +8,18 @@ Backdrops are full screen components that overlay other components. They are use ## Properties -| Property | Attribute | Description | Type | -| ----------------- | ------------------ | --------------------------------------------------------------------------------------------------------- | --------- | -| `stopPropagation` | `stop-propagation` | If `true`, the backdrop will stop propagation on tap. Defaults to `true`. | `boolean` | -| `tappable` | `tappable` | If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event. Defaults to `true`. | `boolean` | -| `visible` | `visible` | If `true`, the backdrop will be visible. Defaults to `true`. | `boolean` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------ | ------------------------------------------------------------------------------------- | --------- | ------- | +| `stopPropagation` | `stop-propagation` | If `true`, the backdrop will stop propagation on tap. | `boolean` | `true` | +| `tappable` | `tappable` | If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event. | `boolean` | `true` | +| `visible` | `visible` | If `true`, the backdrop will be visible. | `boolean` | `true` | ## Events -| Event | Detail | Description | -| ---------------- | ------ | ------------------------------------ | -| `ionBackdropTap` | | Emitted when the backdrop is tapped. | +| Event | Description | Detail | +| ---------------- | ------------------------------------ | ------ | +| `ionBackdropTap` | Emitted when the backdrop is tapped. | void | ---------------------------------------------- diff --git a/core/src/components/badge/badge.tsx b/core/src/components/badge/badge.tsx index 74778ae1d0..4e3fc8d5d4 100644 --- a/core/src/components/badge/badge.tsx +++ b/core/src/components/badge/badge.tsx @@ -21,7 +21,6 @@ export class Badge implements ComponentInterface { /** * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; diff --git a/core/src/components/badge/readme.md b/core/src/components/badge/readme.md index 753157338b..d3bbacd8e7 100644 --- a/core/src/components/badge/readme.md +++ b/core/src/components/badge/readme.md @@ -8,10 +8,10 @@ Badges are inline block elements that usually appear near another element. Typic ## Properties -| Property | Attribute | Description | Type | -| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | -| `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` | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` | +| 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` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | ## CSS Custom Properties diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx index 34a5327d7c..408c9bc4fa 100644 --- a/core/src/components/button/button.tsx +++ b/core/src/components/button/button.tsx @@ -28,18 +28,16 @@ export class Button implements ComponentInterface { /** * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; /** * The type of button. - * Possible values are: `"button"`, `"bar-button"`. */ @Prop({ mutable: true }) buttonType = 'button'; /** - * If `true`, the user cannot interact with the button. Defaults to `false`. + * If `true`, the user cannot interact with the button. */ @Prop({ reflectToAttr: true }) disabled = false; @@ -70,13 +68,11 @@ export class Button implements ComponentInterface { /** * The button shape. - * Possible values are: `"round"`. */ @Prop({ reflectToAttr: true }) shape?: 'round'; /** * The button size. - * Possible values are: `"small"`, `"default"`, `"large"`. */ @Prop({ reflectToAttr: true }) size?: 'small' | 'default' | 'large'; @@ -87,8 +83,6 @@ export class Button implements ComponentInterface { /** * The type of the button. - * Possible values are: `"submit"`, `"reset"` and `"button"`. - * Default value is: `"button"` */ @Prop() type: 'submit' | 'reset' | 'button' = 'button'; diff --git a/core/src/components/button/readme.md b/core/src/components/button/readme.md index 75701f49c4..b6fbd53511 100644 --- a/core/src/components/button/readme.md +++ b/core/src/components/button/readme.md @@ -37,28 +37,28 @@ This attribute specifies the size of the button. Setting this attribute will cha ## Properties -| Property | Attribute | Description | Type | -| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | -| `buttonType` | `button-type` | The type of button. Possible values are: `"button"`, `"bar-button"`. | `string` | -| `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` | -| `disabled` | `disabled` | If `true`, the user cannot interact with the button. Defaults to `false`. | `boolean` | -| `expand` | `expand` | Set to `"block"` for a full-width button or to `"full"` for a full-width button without left and right borders. | `"block" \| "full" \| undefined` | -| `fill` | `fill` | Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`. | `"clear" \| "default" \| "outline" \| "solid" \| undefined` | -| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` | -| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root" \| undefined` | -| `shape` | `shape` | The button shape. Possible values are: `"round"`. | `"round" \| undefined` | -| `size` | `size` | The button size. Possible values are: `"small"`, `"default"`, `"large"`. | `"default" \| "large" \| "small" \| undefined` | -| `strong` | `strong` | If `true`, activates a button with a heavier font weight. | `boolean` | -| `type` | `type` | The type of the button. Possible values are: `"submit"`, `"reset"` and `"button"`. Default value is: `"button"` | `"button" \| "reset" \| "submit"` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | ----------- | +| `buttonType` | `button-type` | The type of button. | `string` | `'button'` | +| `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` | +| `disabled` | `disabled` | If `true`, the user cannot interact with the button. | `boolean` | `false` | +| `expand` | `expand` | Set to `"block"` for a full-width button or to `"full"` for a full-width button without left and right borders. | `"block" \| "full" \| undefined` | `undefined` | +| `fill` | `fill` | Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`. | `"clear" \| "default" \| "outline" \| "solid" \| undefined` | `undefined` | +| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root" \| undefined` | `undefined` | +| `shape` | `shape` | The button shape. | `"round" \| undefined` | `undefined` | +| `size` | `size` | The button size. | `"default" \| "large" \| "small" \| undefined` | `undefined` | +| `strong` | `strong` | If `true`, activates a button with a heavier font weight. | `boolean` | `false` | +| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` | ## Events -| Event | Detail | Description | -| ---------- | ------ | ------------------------------------ | -| `ionBlur` | | Emitted when the button loses focus. | -| `ionFocus` | | Emitted when the button has focus. | +| Event | Description | Detail | +| ---------- | ------------------------------------ | ------ | +| `ionBlur` | Emitted when the button loses focus. | void | +| `ionFocus` | Emitted when the button has focus. | void | ## CSS Custom Properties diff --git a/core/src/components/card-content/card-content.tsx b/core/src/components/card-content/card-content.tsx index 9ee2d586ca..fff0a86337 100644 --- a/core/src/components/card-content/card-content.tsx +++ b/core/src/components/card-content/card-content.tsx @@ -14,7 +14,6 @@ export class CardContent implements ComponentInterface { /** * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; diff --git a/core/src/components/card-content/readme.md b/core/src/components/card-content/readme.md index 6712d49c7a..583013e0fc 100644 --- a/core/src/components/card-content/readme.md +++ b/core/src/components/card-content/readme.md @@ -9,9 +9,9 @@ It is recommended that any text content for a card should be placed in an `ion-c ## Properties -| Property | Attribute | Description | Type | -| -------- | --------- | ----------------------------------------------------------------------------------------- | --------------- | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` | +| Property | Attribute | Description | Type | Default | +| -------- | --------- | ------------------------------------------------- | --------------- | ----------- | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | ---------------------------------------------- diff --git a/core/src/components/card-header/card-header.tsx b/core/src/components/card-header/card-header.tsx index e6d43fc81f..93b2965c5c 100644 --- a/core/src/components/card-header/card-header.tsx +++ b/core/src/components/card-header/card-header.tsx @@ -21,12 +21,11 @@ export class CardHeader implements ComponentInterface { /** * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; /** - * If `true`, the card header will be translucent. Defaults to `false`. + * If `true`, the card header will be translucent. */ @Prop() translucent = false; diff --git a/core/src/components/card-header/readme.md b/core/src/components/card-header/readme.md index dc3f3fb52e..d8c11f4750 100644 --- a/core/src/components/card-header/readme.md +++ b/core/src/components/card-header/readme.md @@ -8,11 +8,11 @@ ## Properties -| Property | Attribute | Description | Type | -| ------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | -| `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` | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` | -| `translucent` | `translucent` | If `true`, the card header will be translucent. Defaults to `false`. | `boolean` | +| 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` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `translucent` | `translucent` | If `true`, the card header will be translucent. | `boolean` | `false` | ---------------------------------------------- diff --git a/core/src/components/card-subtitle/card-subtitle.tsx b/core/src/components/card-subtitle/card-subtitle.tsx index 8dcd31513e..37b29d71af 100644 --- a/core/src/components/card-subtitle/card-subtitle.tsx +++ b/core/src/components/card-subtitle/card-subtitle.tsx @@ -21,7 +21,6 @@ export class CardSubtitle implements ComponentInterface { /** * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; diff --git a/core/src/components/card-subtitle/readme.md b/core/src/components/card-subtitle/readme.md index d936e11666..d39509c07d 100644 --- a/core/src/components/card-subtitle/readme.md +++ b/core/src/components/card-subtitle/readme.md @@ -7,10 +7,10 @@ ## Properties -| Property | Attribute | Description | Type | -| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | -| `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` | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` | +| 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` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | ## CSS Custom Properties diff --git a/core/src/components/card-title/card-title.tsx b/core/src/components/card-title/card-title.tsx index d2e2798931..1fea16eaa0 100644 --- a/core/src/components/card-title/card-title.tsx +++ b/core/src/components/card-title/card-title.tsx @@ -21,7 +21,6 @@ export class CardTitle implements ComponentInterface { /** * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; diff --git a/core/src/components/card-title/readme.md b/core/src/components/card-title/readme.md index 388b48bb3b..715832ca2f 100644 --- a/core/src/components/card-title/readme.md +++ b/core/src/components/card-title/readme.md @@ -8,10 +8,10 @@ ## Properties -| Property | Attribute | Description | Type | -| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | -| `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` | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` | +| 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` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | ## CSS Custom Properties diff --git a/core/src/components/card/card.tsx b/core/src/components/card/card.tsx index 58dad1bfdc..759e17eb44 100644 --- a/core/src/components/card/card.tsx +++ b/core/src/components/card/card.tsx @@ -22,7 +22,6 @@ export class Card implements ComponentInterface { /** * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; diff --git a/core/src/components/card/readme.md b/core/src/components/card/readme.md index b7391e1b9d..5e76ea220f 100644 --- a/core/src/components/card/readme.md +++ b/core/src/components/card/readme.md @@ -11,10 +11,10 @@ sub-components to reflect this. Please see `ion-card-content`, ## Properties -| Property | Attribute | Description | Type | -| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | -| `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` | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` | +| 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` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | ## CSS Custom Properties diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx index 5183bf6413..3ed060802b 100644 --- a/core/src/components/checkbox/checkbox.tsx +++ b/core/src/components/checkbox/checkbox.tsx @@ -30,7 +30,6 @@ export class Checkbox implements ComponentInterface { /** * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; @@ -40,12 +39,12 @@ export class Checkbox implements ComponentInterface { @Prop() name: string = this.inputId; /** - * If `true`, the checkbox is selected. Defaults to `false`. + * If `true`, the checkbox is selected. */ @Prop({ mutable: true }) checked = false; /** - * If `true`, the user cannot interact with the checkbox. Defaults to `false`. + * If `true`, the user cannot interact with the checkbox. */ @Prop() disabled = false; @@ -55,7 +54,6 @@ export class Checkbox implements ComponentInterface { * * The value of a toggle is analogous to the value of a ``, * it's only used when the toggle participates in a native ``. - * Defaults to `on`. */ @Prop() value = 'on'; diff --git a/core/src/components/checkbox/readme.md b/core/src/components/checkbox/readme.md index 293faa164a..66c872bba2 100644 --- a/core/src/components/checkbox/readme.md +++ b/core/src/components/checkbox/readme.md @@ -10,24 +10,24 @@ Checkboxes allow the selection of multiple options from a set of options. They a ## Properties -| Property | Attribute | Description | Type | -| ---------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | -| `checked` | `checked` | If `true`, the checkbox is selected. Defaults to `false`. | `boolean` | -| `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` | -| `disabled` | `disabled` | If `true`, the user cannot interact with the checkbox. Defaults to `false`. | `boolean` | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` | -| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | -| `value` | `value` | 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 ``, it's only used when the toggle participates in a native ``. Defaults to `on`. | `string` | +| Property | Attribute | Description | Type | Default | +| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | -------------- | +| `checked` | `checked` | If `true`, the checkbox is selected. | `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` | +| `disabled` | `disabled` | If `true`, the user cannot interact with the checkbox. | `boolean` | `false` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` | +| `value` | `value` | 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 ``, it's only used when the toggle participates in a native ``. | `string` | `'on'` | ## Events -| Event | Detail | Description | -| ----------- | ----------------------- | ---------------------------------------------- | -| `ionBlur` | | Emitted when the toggle loses focus. | -| `ionChange` | CheckedInputChangeEvent | Emitted when the checked property has changed. | -| `ionFocus` | | Emitted when the toggle has focus. | -| `ionStyle` | StyleEvent | Emitted when the styles change. | +| Event | Description | Detail | +| ----------- | ---------------------------------------------- | ----------------------- | +| `ionBlur` | Emitted when the toggle loses focus. | void | +| `ionChange` | Emitted when the checked property has changed. | CheckedInputChangeEvent | +| `ionFocus` | Emitted when the toggle has focus. | void | +| `ionStyle` | Emitted when the styles change. | StyleEvent | ## CSS Custom Properties diff --git a/core/src/components/chip-button/chip-button.tsx b/core/src/components/chip-button/chip-button.tsx index f527986649..28f3e17603 100644 --- a/core/src/components/chip-button/chip-button.tsx +++ b/core/src/components/chip-button/chip-button.tsx @@ -20,18 +20,16 @@ export class ChipButton implements ComponentInterface { /** * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; /** - * If `true`, the user cannot interact with the chip button. Defaults to `false`. + * If `true`, the user cannot interact with the chip button. */ @Prop() disabled = false; /** * Set to `"clear"` for a transparent button or to `"solid"` for a filled background. - * Defaults to `"clear"`. */ @Prop() fill: 'clear' | 'solid' = 'clear'; diff --git a/core/src/components/chip-button/readme.md b/core/src/components/chip-button/readme.md index c9ad5e669b..8971d787ac 100644 --- a/core/src/components/chip-button/readme.md +++ b/core/src/components/chip-button/readme.md @@ -7,13 +7,13 @@ A ChipButton is an inset button that is placed inside of a Chip. For more inform ## Properties -| Property | Attribute | Description | Type | -| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | -| `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` | -| `disabled` | `disabled` | If `true`, the user cannot interact with the chip button. Defaults to `false`. | `boolean` | -| `fill` | `fill` | Set to `"clear"` for a transparent button or to `"solid"` for a filled background. Defaults to `"clear"`. | `"clear" \| "solid"` | -| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` | +| 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` | +| `disabled` | `disabled` | If `true`, the user cannot interact with the chip button. | `boolean` | `false` | +| `fill` | `fill` | Set to `"clear"` for a transparent button or to `"solid"` for a filled background. | `"clear" \| "solid"` | `'clear'` | +| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | ## CSS Custom Properties diff --git a/core/src/components/chip-icon/chip-icon.tsx b/core/src/components/chip-icon/chip-icon.tsx index 2a9daa1cb8..3d05e6db21 100644 --- a/core/src/components/chip-icon/chip-icon.tsx +++ b/core/src/components/chip-icon/chip-icon.tsx @@ -18,13 +18,11 @@ export class ChipIcon implements ComponentInterface { /** * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; /** * Set to `"clear"` for a transparent icon or to `"solid"` for a filled background. - * Defaults to `"clear"`. */ @Prop() fill: 'clear' | 'solid' = 'clear'; diff --git a/core/src/components/chip-icon/readme.md b/core/src/components/chip-icon/readme.md index 3352617e93..3521bc34a5 100644 --- a/core/src/components/chip-icon/readme.md +++ b/core/src/components/chip-icon/readme.md @@ -7,13 +7,13 @@ ## Properties -| Property | Attribute | Description | Type | -| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | -| `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` | -| `fill` | `fill` | Set to `"clear"` for a transparent icon or to `"solid"` for a filled background. Defaults to `"clear"`. | `"clear" \| "solid"` | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` | -| `name` | `name` | The icon to use. Possible values are the same as `"ion-icon"`. | `string \| undefined` | -| `src` | `src` | The icon src to use. Possible values are the same as `"ion-icon"`. | `string \| undefined` | +| 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` | +| `fill` | `fill` | Set to `"clear"` for a transparent icon or to `"solid"` for a filled background. | `"clear" \| "solid"` | `'clear'` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `name` | `name` | The icon to use. Possible values are the same as `"ion-icon"`. | `string \| undefined` | `undefined` | +| `src` | `src` | The icon src to use. Possible values are the same as `"ion-icon"`. | `string \| undefined` | `undefined` | ## CSS Custom Properties diff --git a/core/src/components/chip/chip.tsx b/core/src/components/chip/chip.tsx index 1a0bb1f734..929b5437d7 100644 --- a/core/src/components/chip/chip.tsx +++ b/core/src/components/chip/chip.tsx @@ -21,7 +21,6 @@ export class Chip implements ComponentInterface { /** * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; diff --git a/core/src/components/chip/readme.md b/core/src/components/chip/readme.md index e2b4d80fe8..6b27cd7c45 100644 --- a/core/src/components/chip/readme.md +++ b/core/src/components/chip/readme.md @@ -7,10 +7,10 @@ Chips represent complex entities in small blocks, such as a contact. A chip can ## Properties -| Property | Attribute | Description | Type | -| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | -| `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` | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` | +| 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` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | ## CSS Custom Properties diff --git a/core/src/components/col/readme.md b/core/src/components/col/readme.md index 5a9189beab..7ec759dac7 100644 --- a/core/src/components/col/readme.md +++ b/core/src/components/col/readme.md @@ -26,32 +26,32 @@ There are several attributes that can be added to a column to customize this beh ## Properties -| Property | Attribute | Description | Type | -| ---------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------- | -| `offsetLg` | `offset-lg` | The amount to offset the column for lg screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | -| `offsetMd` | `offset-md` | The amount to offset the column for md screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | -| `offsetSm` | `offset-sm` | The amount to offset the column for sm screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | -| `offsetXl` | `offset-xl` | The amount to offset the column for xl screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | -| `offsetXs` | `offset-xs` | The amount to offset the column for xs screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | -| `offset` | `offset` | The amount to offset the column, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | -| `pullLg` | `pull-lg` | The amount to pull the column for lg screens, in terms of how many columns it should shift to the left of the total available. | `string \| undefined` | -| `pullMd` | `pull-md` | The amount to pull the column for md screens, in terms of how many columns it should shift to the left of the total available. | `string \| undefined` | -| `pullSm` | `pull-sm` | The amount to pull the column for sm screens, in terms of how many columns it should shift to the left of the total available. | `string \| undefined` | -| `pullXl` | `pull-xl` | The amount to pull the column for xl screens, in terms of how many columns it should shift to the left of the total available. | `string \| undefined` | -| `pullXs` | `pull-xs` | The amount to pull the column for xs screens, in terms of how many columns it should shift to the left of the total available. | `string \| undefined` | -| `pull` | `pull` | The amount to pull the column, in terms of how many columns it should shift to the left of the total available. | `string \| undefined` | -| `pushLg` | `push-lg` | The amount to push the column for lg screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | -| `pushMd` | `push-md` | The amount to push the column for md screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | -| `pushSm` | `push-sm` | The amount to push the column for sm screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | -| `pushXl` | `push-xl` | The amount to push the column for xl screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | -| `pushXs` | `push-xs` | The amount to push the column for xs screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | -| `push` | `push` | The amount to push the column, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | -| `sizeLg` | `size-lg` | The size of the column for lg screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. | `string \| undefined` | -| `sizeMd` | `size-md` | The size of the column for md screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. | `string \| undefined` | -| `sizeSm` | `size-sm` | The size of the column for sm screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. | `string \| undefined` | -| `sizeXl` | `size-xl` | The size of the column for xl screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. | `string \| undefined` | -| `sizeXs` | `size-xs` | The size of the column for xs screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. | `string \| undefined` | -| `size` | `size` | The size of the column, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. | `string \| undefined` | +| Property | Attribute | Description | Type | Default | +| ---------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------- | ----------- | +| `offsetLg` | `offset-lg` | The amount to offset the column for lg screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | `undefined` | +| `offsetMd` | `offset-md` | The amount to offset the column for md screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | `undefined` | +| `offsetSm` | `offset-sm` | The amount to offset the column for sm screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | `undefined` | +| `offsetXl` | `offset-xl` | The amount to offset the column for xl screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | `undefined` | +| `offsetXs` | `offset-xs` | The amount to offset the column for xs screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | `undefined` | +| `offset` | `offset` | The amount to offset the column, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | `undefined` | +| `pullLg` | `pull-lg` | The amount to pull the column for lg screens, in terms of how many columns it should shift to the left of the total available. | `string \| undefined` | `undefined` | +| `pullMd` | `pull-md` | The amount to pull the column for md screens, in terms of how many columns it should shift to the left of the total available. | `string \| undefined` | `undefined` | +| `pullSm` | `pull-sm` | The amount to pull the column for sm screens, in terms of how many columns it should shift to the left of the total available. | `string \| undefined` | `undefined` | +| `pullXl` | `pull-xl` | The amount to pull the column for xl screens, in terms of how many columns it should shift to the left of the total available. | `string \| undefined` | `undefined` | +| `pullXs` | `pull-xs` | The amount to pull the column for xs screens, in terms of how many columns it should shift to the left of the total available. | `string \| undefined` | `undefined` | +| `pull` | `pull` | The amount to pull the column, in terms of how many columns it should shift to the left of the total available. | `string \| undefined` | `undefined` | +| `pushLg` | `push-lg` | The amount to push the column for lg screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | `undefined` | +| `pushMd` | `push-md` | The amount to push the column for md screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | `undefined` | +| `pushSm` | `push-sm` | The amount to push the column for sm screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | `undefined` | +| `pushXl` | `push-xl` | The amount to push the column for xl screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | `undefined` | +| `pushXs` | `push-xs` | The amount to push the column for xs screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | `undefined` | +| `push` | `push` | The amount to push the column, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | `undefined` | +| `sizeLg` | `size-lg` | The size of the column for lg screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. | `string \| undefined` | `undefined` | +| `sizeMd` | `size-md` | The size of the column for md screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. | `string \| undefined` | `undefined` | +| `sizeSm` | `size-sm` | The size of the column for sm screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. | `string \| undefined` | `undefined` | +| `sizeXl` | `size-xl` | The size of the column for xl screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. | `string \| undefined` | `undefined` | +| `sizeXs` | `size-xs` | The size of the column for xs screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. | `string \| undefined` | `undefined` | +| `size` | `size` | The size of the column, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. | `string \| undefined` | `undefined` | ## CSS Custom Properties diff --git a/core/src/components/content/readme.md b/core/src/components/content/readme.md index b2150518a3..57c09a0119 100644 --- a/core/src/components/content/readme.md +++ b/core/src/components/content/readme.md @@ -9,23 +9,23 @@ view component. ## Properties -| Property | Attribute | Description | Type | -| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | -| `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` | -| `forceOverscroll` | `force-overscroll` | If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, the does not disable the system bounce on iOS. That is an OS level setting. | `boolean \| undefined` | -| `fullscreen` | `fullscreen` | If `true`, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent. | `boolean` | -| `scrollEvents` | `scroll-events` | Because of performance reasons, ionScroll events are disabled by default, in order to enable them and start listening from (ionScroll), set this property to `true`. | `boolean` | -| `scrollX` | `scroll-x` | If you want to enable the content scrolling in the X axis, set this property to `true`. | `boolean` | -| `scrollY` | `scroll-y` | If you want to disable the content scrolling in the Y axis, set this property to `false`. | `boolean` | +| 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` | +| `forceOverscroll` | `force-overscroll` | If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, the does not disable the system bounce on iOS. That is an OS level setting. | `boolean \| undefined` | `undefined` | +| `fullscreen` | `fullscreen` | If `true`, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent. | `boolean` | `false` | +| `scrollEvents` | `scroll-events` | Because of performance reasons, ionScroll events are disabled by default, in order to enable them and start listening from (ionScroll), set this property to `true`. | `boolean` | `false` | +| `scrollX` | `scroll-x` | If you want to enable the content scrolling in the X axis, set this property to `true`. | `boolean` | `false` | +| `scrollY` | `scroll-y` | If you want to disable the content scrolling in the Y axis, set this property to `false`. | `boolean` | `true` | ## Events -| Event | Detail | Description | -| ---------------- | ---------------- | ------------------------------------------------------------------------------------------------ | -| `ionScroll` | ScrollDetail | Emitted while scrolling. This event is disabled by default. Look at the property: `scrollEvents` | -| `ionScrollEnd` | ScrollBaseDetail | Emitted when the scroll has ended. | -| `ionScrollStart` | ScrollBaseDetail | Emitted when the scroll has started. | +| Event | Description | Detail | +| ---------------- | ------------------------------------------------------------------------------------------------ | ---------------- | +| `ionScroll` | Emitted while scrolling. This event is disabled by default. Look at the property: `scrollEvents` | ScrollDetail | +| `ionScrollEnd` | Emitted when the scroll has ended. | ScrollBaseDetail | +| `ionScrollStart` | Emitted when the scroll has started. | ScrollBaseDetail | ## Methods diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index 37416c72df..b63baeb959 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -31,7 +31,6 @@ export class Datetime implements ComponentInterface { /** * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; @@ -41,7 +40,7 @@ export class Datetime implements ComponentInterface { @Prop() name: string = this.inputId; /** - * If `true`, the user cannot interact with the datetime. Defaults to `false`. + * If `true`, the user cannot interact with the datetime. */ @Prop() disabled = false; @@ -90,12 +89,12 @@ export class Datetime implements ComponentInterface { @Prop() pickerFormat?: string; /** - * The text to display on the picker's cancel button. Default: `Cancel`. + * The text to display on the picker's cancel button. */ @Prop() cancelText = 'Cancel'; /** - * The text to display on the picker's "Done" button. Default: `Done`. + * The text to display on the picker's "Done" button. */ @Prop() doneText = 'Done'; diff --git a/core/src/components/datetime/readme.md b/core/src/components/datetime/readme.md index bef017b850..040fe5b3ca 100644 --- a/core/src/components/datetime/readme.md +++ b/core/src/components/datetime/readme.md @@ -204,38 +204,38 @@ dates in JavaScript. ## Properties -| Property | Attribute | Description | Type | -| ----------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | -| `cancelText` | `cancel-text` | The text to display on the picker's cancel button. Default: `Cancel`. | `string` | -| `dayNames` | `day-names` | Full day of the week names. This can be used to provide locale names for each day in the week. Defaults to English. | `string \| string[] \| undefined` | -| `dayShortNames` | `day-short-names` | Short abbreviated day of the week names. This can be used to provide locale names for each day in the week. Defaults to English. | `string \| string[] \| undefined` | -| `dayValues` | -- | Values used to create the list of selectable days. By default every day is shown for the given month. However, to control exactly which days of the month to display, the `dayValues` input can take a number, an array of numbers, or a string of comma separated numbers. Note that even if the array days have an invalid number for the selected month, like `31` in February, it will correctly not show days which are not valid for the selected month. | `number \| number[] \| string \| undefined` | -| `disabled` | `disabled` | If `true`, the user cannot interact with the datetime. Defaults to `false`. | `boolean` | -| `displayFormat` | `display-format` | The display format of the date and time as text that shows within the item. When the `pickerFormat` input is not used, then the `displayFormat` is used for both display the formatted text, and determining the datetime picker's columns. See the `pickerFormat` input description for more info. Defaults to `MMM D, YYYY`. | `string` | -| `doneText` | `done-text` | The text to display on the picker's "Done" button. Default: `Done`. | `string` | -| `hourValues` | -- | Values used to create the list of selectable hours. By default the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, to control exactly which hours to display, the `hourValues` input can take a number, an array of numbers, or a string of comma separated numbers. | `number \| number[] \| string \| undefined` | -| `max` | `max` | The maximum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the maximum could just be the year, such as `1994`. Defaults to the end of this year. | `string \| undefined` | -| `min` | `min` | The minimum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), such as `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the minimum could just be the year, such as `1994`. Defaults to the beginning of the year, 100 years ago from today. | `string \| undefined` | -| `minuteValues` | -- | Values used to create the list of selectable minutes. By default the minutes range from `0` to `59`. However, to control exactly which minutes to display, the `minuteValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if the minute selections should only be every 15 minutes, then this input value would be `minuteValues="0,15,30,45"`. | `number \| number[] \| string \| undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` | -| `monthNames` | `month-names` | Full names for each month name. This can be used to provide locale month names. Defaults to English. | `string \| string[] \| undefined` | -| `monthShortNames` | `month-short-names` | Short abbreviated names for each month name. This can be used to provide locale month names. Defaults to English. | `string \| string[] \| undefined` | -| `monthValues` | -- | Values used to create the list of selectable months. By default the month values range from `1` to `12`. However, to control exactly which months to display, the `monthValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a zero-based index, meaning January's value is `1`, and December's is `12`. | `number \| number[] \| string \| undefined` | -| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | -| `pickerFormat` | `picker-format` | The format of the date and time picker columns the user selects. A datetime input can have one or many datetime parts, each getting their own column which allow individual selection of that particular datetime part. For example, year and month columns are two individually selectable columns which help choose an exact date from the datetime picker. Each column follows the string parse format. Defaults to use `displayFormat`. | `string \| undefined` | -| `pickerOptions` | -- | Any additional options that the picker interface can accept. See the [Picker API docs](../../picker/Picker) for the picker options. | `Partial \| undefined` | -| `placeholder` | `placeholder` | The text to display when there's no date selected yet. Using lowercase to match the input attribute | `null \| string \| undefined` | -| `value` | `value` | The value of the datetime as a valid ISO 8601 datetime string. | `null \| string \| undefined` | -| `yearValues` | -- | Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`. | `number \| number[] \| string \| undefined` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | --------------- | +| `cancelText` | `cancel-text` | The text to display on the picker's cancel button. | `string` | `'Cancel'` | +| `dayNames` | `day-names` | Full day of the week names. This can be used to provide locale names for each day in the week. Defaults to English. | `string \| string[] \| undefined` | `undefined` | +| `dayShortNames` | `day-short-names` | Short abbreviated day of the week names. This can be used to provide locale names for each day in the week. Defaults to English. | `string \| string[] \| undefined` | `undefined` | +| `dayValues` | -- | Values used to create the list of selectable days. By default every day is shown for the given month. However, to control exactly which days of the month to display, the `dayValues` input can take a number, an array of numbers, or a string of comma separated numbers. Note that even if the array days have an invalid number for the selected month, like `31` in February, it will correctly not show days which are not valid for the selected month. | `number \| number[] \| string \| undefined` | `undefined` | +| `disabled` | `disabled` | If `true`, the user cannot interact with the datetime. | `boolean` | `false` | +| `displayFormat` | `display-format` | The display format of the date and time as text that shows within the item. When the `pickerFormat` input is not used, then the `displayFormat` is used for both display the formatted text, and determining the datetime picker's columns. See the `pickerFormat` input description for more info. Defaults to `MMM D, YYYY`. | `string` | `'MMM D, YYYY'` | +| `doneText` | `done-text` | The text to display on the picker's "Done" button. | `string` | `'Done'` | +| `hourValues` | -- | Values used to create the list of selectable hours. By default the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, to control exactly which hours to display, the `hourValues` input can take a number, an array of numbers, or a string of comma separated numbers. | `number \| number[] \| string \| undefined` | `undefined` | +| `max` | `max` | The maximum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the maximum could just be the year, such as `1994`. Defaults to the end of this year. | `string \| undefined` | `undefined` | +| `min` | `min` | The minimum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), such as `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the minimum could just be the year, such as `1994`. Defaults to the beginning of the year, 100 years ago from today. | `string \| undefined` | `undefined` | +| `minuteValues` | -- | Values used to create the list of selectable minutes. By default the minutes range from `0` to `59`. However, to control exactly which minutes to display, the `minuteValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if the minute selections should only be every 15 minutes, then this input value would be `minuteValues="0,15,30,45"`. | `number \| number[] \| string \| undefined` | `undefined` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `monthNames` | `month-names` | Full names for each month name. This can be used to provide locale month names. Defaults to English. | `string \| string[] \| undefined` | `undefined` | +| `monthShortNames` | `month-short-names` | Short abbreviated names for each month name. This can be used to provide locale month names. Defaults to English. | `string \| string[] \| undefined` | `undefined` | +| `monthValues` | -- | Values used to create the list of selectable months. By default the month values range from `1` to `12`. However, to control exactly which months to display, the `monthValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a zero-based index, meaning January's value is `1`, and December's is `12`. | `number \| number[] \| string \| undefined` | `undefined` | +| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` | +| `pickerFormat` | `picker-format` | The format of the date and time picker columns the user selects. A datetime input can have one or many datetime parts, each getting their own column which allow individual selection of that particular datetime part. For example, year and month columns are two individually selectable columns which help choose an exact date from the datetime picker. Each column follows the string parse format. Defaults to use `displayFormat`. | `string \| undefined` | `undefined` | +| `pickerOptions` | -- | Any additional options that the picker interface can accept. See the [Picker API docs](../../picker/Picker) for the picker options. | `Partial \| undefined` | `undefined` | +| `placeholder` | `placeholder` | The text to display when there's no date selected yet. Using lowercase to match the input attribute | `null \| string \| undefined` | `undefined` | +| `value` | `value` | The value of the datetime as a valid ISO 8601 datetime string. | `null \| string \| undefined` | `undefined` | +| `yearValues` | -- | Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`. | `number \| number[] \| string \| undefined` | `undefined` | ## Events -| Event | Detail | Description | -| ----------- | ---------------- | --------------------------------------------------- | -| `ionCancel` | | Emitted when the datetime selection was cancelled. | -| `ionChange` | InputChangeEvent | Emitted when the value (selected date) has changed. | -| `ionStyle` | StyleEvent | Emitted when the styles change. | +| Event | Description | Detail | +| ----------- | --------------------------------------------------- | ---------------- | +| `ionCancel` | Emitted when the datetime selection was cancelled. | void | +| `ionChange` | Emitted when the value (selected date) has changed. | InputChangeEvent | +| `ionStyle` | Emitted when the styles change. | StyleEvent | ## Methods diff --git a/core/src/components/fab-button/fab-button.tsx b/core/src/components/fab-button/fab-button.tsx index 61246ee98a..410bfcc5b2 100755 --- a/core/src/components/fab-button/fab-button.tsx +++ b/core/src/components/fab-button/fab-button.tsx @@ -20,7 +20,6 @@ export class FabButton implements ComponentInterface { /** * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; @@ -32,12 +31,12 @@ export class FabButton implements ComponentInterface { @Prop() color?: Color; /** - * If `true`, the fab button will be show a close icon. Defaults to `false`. + * If `true`, the fab button will be show a close icon. */ @Prop() activated = false; /** - * If `true`, the user cannot interact with the fab button. Defaults to `false`. + * If `true`, the user cannot interact with the fab button. */ @Prop() disabled = false; @@ -59,14 +58,12 @@ export class FabButton implements ComponentInterface { @Prop() show = false; /** - * If `true`, the fab button will be translucent. Defaults to `false`. + * If `true`, the fab button will be translucent. */ @Prop() translucent = false; /** * The type of the button. - * Possible values are: `"submit"`, `"reset"` and `"button"`. - * Default value is: `"button"` */ @Prop() type: 'submit' | 'reset' | 'button' = 'button'; diff --git a/core/src/components/fab-button/readme.md b/core/src/components/fab-button/readme.md index d00a0f0605..8a79cda44c 100644 --- a/core/src/components/fab-button/readme.md +++ b/core/src/components/fab-button/readme.md @@ -9,25 +9,25 @@ If the FAB button is not wrapped with ``, it will scroll with the conte ## Properties -| Property | Attribute | Description | Type | -| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -| `activated` | `activated` | If `true`, the fab button will be show a close icon. Defaults to `false`. | `boolean` | -| `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` | -| `disabled` | `disabled` | If `true`, the user cannot interact with the fab button. Defaults to `false`. | `boolean` | -| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` | -| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root" \| undefined` | -| `show` | `show` | If `true`, the fab button will show when in a fab-list. | `boolean` | -| `translucent` | `translucent` | If `true`, the fab button will be translucent. Defaults to `false`. | `boolean` | -| `type` | `type` | The type of the button. Possible values are: `"submit"`, `"reset"` and `"button"`. Default value is: `"button"` | `"button" \| "reset" \| "submit"` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ----------- | +| `activated` | `activated` | If `true`, the fab button will be show a close icon. | `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` | +| `disabled` | `disabled` | If `true`, the user cannot interact with the fab button. | `boolean` | `false` | +| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root" \| undefined` | `undefined` | +| `show` | `show` | If `true`, the fab button will show when in a fab-list. | `boolean` | `false` | +| `translucent` | `translucent` | If `true`, the fab button will be translucent. | `boolean` | `false` | +| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` | ## Events -| Event | Detail | Description | -| ---------- | ------ | ------------------------------------ | -| `ionBlur` | | Emitted when the button loses focus. | -| `ionFocus` | | Emitted when the button has focus. | +| Event | Description | Detail | +| ---------- | ------------------------------------ | ------ | +| `ionBlur` | Emitted when the button loses focus. | void | +| `ionFocus` | Emitted when the button has focus. | void | ## CSS Custom Properties diff --git a/core/src/components/fab-list/fab-list.tsx b/core/src/components/fab-list/fab-list.tsx index 648e0c5f10..961c310723 100644 --- a/core/src/components/fab-list/fab-list.tsx +++ b/core/src/components/fab-list/fab-list.tsx @@ -9,7 +9,7 @@ export class FabList implements ComponentInterface { @Element() el!: HTMLIonFabElement; /** - * If `true`, the fab list will be show all fab buttons in the list. Defaults to `false`. + * If `true`, the fab list will be show all fab buttons in the list. */ @Prop() activated = false; @@ -25,7 +25,7 @@ export class FabList implements ComponentInterface { } /** - * The side the fab list will show on relative to the main fab button. Defaults to `'bottom'`. + * The side the fab list will show on relative to the main fab button. */ @Prop() side: 'start' | 'end' | 'top' | 'bottom' = 'bottom'; diff --git a/core/src/components/fab-list/readme.md b/core/src/components/fab-list/readme.md index a2ee6812f5..069718ed98 100644 --- a/core/src/components/fab-list/readme.md +++ b/core/src/components/fab-list/readme.md @@ -7,10 +7,10 @@ The `ion-fab-list` element is a container for multiple fab buttons. This collect ## Properties -| Property | Attribute | Description | Type | -| ----------- | ----------- | ------------------------------------------------------------------------------------------- | --------------------------------------- | -| `activated` | `activated` | If `true`, the fab list will be show all fab buttons in the list. Defaults to `false`. | `boolean` | -| `side` | `side` | The side the fab list will show on relative to the main fab button. Defaults to `'bottom'`. | `"bottom" \| "end" \| "start" \| "top"` | +| Property | Attribute | Description | Type | Default | +| ----------- | ----------- | ------------------------------------------------------------------- | --------------------------------------- | ---------- | +| `activated` | `activated` | If `true`, the fab list will be show all fab buttons in the list. | `boolean` | `false` | +| `side` | `side` | The side the fab list will show on relative to the main fab button. | `"bottom" \| "end" \| "start" \| "top"` | `'bottom'` | ---------------------------------------------- diff --git a/core/src/components/fab/fab.tsx b/core/src/components/fab/fab.tsx index 2fc5cd78cc..f61ed6e342 100644 --- a/core/src/components/fab/fab.tsx +++ b/core/src/components/fab/fab.tsx @@ -11,13 +11,11 @@ export class Fab implements ComponentInterface { /** * Where to align the fab horizontally in the viewport. - * Possible values are: `"center"`, `"start"`, `"end"`. */ @Prop() horizontal?: 'start' | 'end' | 'center'; /** * Where to align the fab vertically in the viewport. - * Possible values are: `"top"`, `"center"`, `"bottom"`. */ @Prop() vertical?: 'top' | 'bottom' | 'center'; diff --git a/core/src/components/fab/readme.md b/core/src/components/fab/readme.md index 79bf42d64b..be51a3c36b 100644 --- a/core/src/components/fab/readme.md +++ b/core/src/components/fab/readme.md @@ -7,12 +7,12 @@ Fabs are container elements that contain one or more fab buttons. They should be ## Properties -| Property | Attribute | Description | Type | -| ------------ | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -| `activated` | `activated` | If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active. That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible. | `boolean` | -| `edge` | `edge` | If `true`, the fab will display on the edge of the header if `vertical` is `"top"`, and on the edge of the footer if it is `"bottom"`. Should be used with a `fixed` slot. | `boolean` | -| `horizontal` | `horizontal` | Where to align the fab horizontally in the viewport. Possible values are: `"center"`, `"start"`, `"end"`. | `"center" \| "end" \| "start" \| undefined` | -| `vertical` | `vertical` | Where to align the fab vertically in the viewport. Possible values are: `"top"`, `"center"`, `"bottom"`. | `"bottom" \| "center" \| "top" \| undefined` | +| Property | Attribute | Description | Type | Default | +| ------------ | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ----------- | +| `activated` | `activated` | If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active. That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible. | `boolean` | `false` | +| `edge` | `edge` | If `true`, the fab will display on the edge of the header if `vertical` is `"top"`, and on the edge of the footer if it is `"bottom"`. Should be used with a `fixed` slot. | `boolean` | `false` | +| `horizontal` | `horizontal` | Where to align the fab horizontally in the viewport. | `"center" \| "end" \| "start" \| undefined` | `undefined` | +| `vertical` | `vertical` | Where to align the fab vertically in the viewport. | `"bottom" \| "center" \| "top" \| undefined` | `undefined` | ## Methods diff --git a/core/src/components/footer/footer.tsx b/core/src/components/footer/footer.tsx index fefbf121df..0a05abbb64 100644 --- a/core/src/components/footer/footer.tsx +++ b/core/src/components/footer/footer.tsx @@ -14,7 +14,6 @@ export class Footer implements ComponentInterface { /** * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; @@ -22,7 +21,6 @@ export class Footer implements ComponentInterface { * If `true`, the footer will be translucent. * Note: In order to scroll content behind the footer, the `fullscreen` * attribute needs to be set on the content. - * Defaults to `false`. */ @Prop() translucent = false; diff --git a/core/src/components/footer/readme.md b/core/src/components/footer/readme.md index f56a2bba83..e410837e70 100644 --- a/core/src/components/footer/readme.md +++ b/core/src/components/footer/readme.md @@ -8,10 +8,10 @@ Footer can be a wrapper for ion-toolbar to make sure the content area is sized c ## Properties -| Property | Attribute | Description | Type | -| ------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------- | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` | -| `translucent` | `translucent` | If `true`, the footer will be translucent. Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content. Defaults to `false`. | `boolean` | +| Property | Attribute | Description | Type | Default | +| ------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | ----------- | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `translucent` | `translucent` | If `true`, the footer will be translucent. Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content. | `boolean` | `false` | ---------------------------------------------- diff --git a/core/src/components/grid/grid.tsx b/core/src/components/grid/grid.tsx index 1e1e091c26..30ee66ac44 100644 --- a/core/src/components/grid/grid.tsx +++ b/core/src/components/grid/grid.tsx @@ -8,7 +8,7 @@ import { Component, ComponentInterface, Prop } from '@stencil/core'; export class Grid implements ComponentInterface { /** - * If `true`, the grid will have a fixed width based on the screen size. Defaults to `false`. + * If `true`, the grid will have a fixed width based on the screen size. */ @Prop() fixed = false; diff --git a/core/src/components/grid/readme.md b/core/src/components/grid/readme.md index 3ed98e0156..dff2cbc996 100644 --- a/core/src/components/grid/readme.md +++ b/core/src/components/grid/readme.md @@ -12,9 +12,9 @@ See [Grid Layout](/docs/layout/grid) for more information. ## Properties -| Property | Attribute | Description | Type | -| -------- | --------- | ------------------------------------------------------------------------------------------ | --------- | -| `fixed` | `fixed` | If `true`, the grid will have a fixed width based on the screen size. Defaults to `false`. | `boolean` | +| Property | Attribute | Description | Type | Default | +| -------- | --------- | --------------------------------------------------------------------- | --------- | ------- | +| `fixed` | `fixed` | If `true`, the grid will have a fixed width based on the screen size. | `boolean` | `false` | ## CSS Custom Properties diff --git a/core/src/components/header/header.tsx b/core/src/components/header/header.tsx index dda6113a3b..dc0de9f6fa 100644 --- a/core/src/components/header/header.tsx +++ b/core/src/components/header/header.tsx @@ -14,7 +14,6 @@ export class Header implements ComponentInterface { /** * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; @@ -22,7 +21,6 @@ export class Header implements ComponentInterface { * If `true`, the header will be translucent. * Note: In order to scroll content behind the header, the `fullscreen` * attribute needs to be set on the content. - * Defaults to `false`. */ @Prop() translucent = false; diff --git a/core/src/components/header/readme.md b/core/src/components/header/readme.md index 15e6c6b3c4..03c6fdee8e 100644 --- a/core/src/components/header/readme.md +++ b/core/src/components/header/readme.md @@ -10,10 +10,10 @@ It's important to note that ion-header needs to be the one of the three root ele ## Properties -| Property | Attribute | Description | Type | -| ------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------- | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` | -| `translucent` | `translucent` | If `true`, the header will be translucent. Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content. Defaults to `false`. | `boolean` | +| Property | Attribute | Description | Type | Default | +| ------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | ----------- | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `translucent` | `translucent` | If `true`, the header will be translucent. Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content. | `boolean` | `false` | ---------------------------------------------- diff --git a/core/src/components/img/readme.md b/core/src/components/img/readme.md index ab41019a72..ee249b4cc3 100644 --- a/core/src/components/img/readme.md +++ b/core/src/components/img/readme.md @@ -8,17 +8,17 @@ Img is a tag that will lazily load an image when ever the tag is in the viewport ## Properties -| Property | Attribute | Description | Type | -| -------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------- | -| `alt` | `alt` | This attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, the image is not in one of the supported formats, or if the image is not yet downloaded. | `string \| undefined` | -| `src` | `src` | The image URL. This attribute is mandatory for the element. | `string \| undefined` | +| Property | Attribute | Description | Type | Default | +| -------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------- | ----------- | +| `alt` | `alt` | This attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, the image is not in one of the supported formats, or if the image is not yet downloaded. | `string \| undefined` | `undefined` | +| `src` | `src` | The image URL. This attribute is mandatory for the element. | `string \| undefined` | `undefined` | ## Events -| Event | Detail | Description | -| --------------- | ------ | ---------------------------------- | -| `ionImgDidLoad` | | Emitted when the img src is loaded | +| Event | Description | Detail | +| --------------- | ---------------------------------- | ------ | +| `ionImgDidLoad` | Emitted when the img src is loaded | void | ---------------------------------------------- diff --git a/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx b/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx index 46d33228d5..2573c11248 100644 --- a/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx +++ b/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx @@ -1,6 +1,6 @@ import { Component, ComponentInterface, Prop } from '@stencil/core'; -import { Config, Mode } from '../../interface'; +import { Config, Mode, SpinnerTypes } from '../../interface'; import { createThemedClasses } from '../../utils/theme'; @Component({ @@ -19,7 +19,7 @@ export class InfiniteScrollContent implements ComponentInterface { /** * An animated SVG spinner that shows while loading. */ - @Prop({ mutable: true }) loadingSpinner?: string; + @Prop({ mutable: true }) loadingSpinner?: SpinnerTypes; /** * Optional text to display while loading. diff --git a/core/src/components/infinite-scroll-content/readme.md b/core/src/components/infinite-scroll-content/readme.md index a6bc291e73..e6139b8e17 100644 --- a/core/src/components/infinite-scroll-content/readme.md +++ b/core/src/components/infinite-scroll-content/readme.md @@ -7,10 +7,10 @@ The `ion-infinite-scroll-content` component is the default child used by the `io ## Properties -| Property | Attribute | Description | Type | -| ---------------- | ----------------- | ------------------------------------------------- | --------------------- | -| `loadingSpinner` | `loading-spinner` | An animated SVG spinner that shows while loading. | `string \| undefined` | -| `loadingText` | `loading-text` | Optional text to display while loading. | `string \| undefined` | +| Property | Attribute | Description | Type | Default | +| ---------------- | ----------------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------- | ----------- | +| `loadingSpinner` | `loading-spinner` | An animated SVG spinner that shows while loading. | `"bubbles" \| "circles" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| undefined` | `undefined` | +| `loadingText` | `loading-text` | Optional text to display while loading. | `string \| undefined` | `undefined` | ---------------------------------------------- diff --git a/core/src/components/infinite-scroll/infinite-scroll.tsx b/core/src/components/infinite-scroll/infinite-scroll.tsx index 1846f89d46..15534487e6 100644 --- a/core/src/components/infinite-scroll/infinite-scroll.tsx +++ b/core/src/components/infinite-scroll/infinite-scroll.tsx @@ -26,7 +26,6 @@ export class InfiniteScroll implements ComponentInterface { * output event to get called when the user has scrolled 10% * from the bottom of the page. Use the value `100px` when the * scroll is within 100 pixels from the bottom of the page. - * Defaults to `15%`. */ @Prop() threshold = '15%'; @@ -65,7 +64,6 @@ export class InfiniteScroll implements ComponentInterface { /** * The position of the infinite scroll element. * The value can be either `top` or `bottom`. - * Defaults to `bottom`. */ @Prop() position: 'top' | 'bottom' = 'bottom'; diff --git a/core/src/components/infinite-scroll/readme.md b/core/src/components/infinite-scroll/readme.md index e573e85806..354e880c11 100644 --- a/core/src/components/infinite-scroll/readme.md +++ b/core/src/components/infinite-scroll/readme.md @@ -17,18 +17,18 @@ Separating the `ion-infinite-scroll` and `ion-infinite-scroll-content` component ## Properties -| Property | Attribute | Description | Type | -| ----------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | -| `disabled` | `disabled` | If `true`, the infinite scroll will be hidden and scroll event listeners will be removed. Set this to true to disable the infinite scroll from actively trying to receive new data while scrolling. This is useful when it is known that there is no more data that can be added, and the infinite scroll is no longer needed. | `boolean` | -| `position` | `position` | The position of the infinite scroll element. The value can be either `top` or `bottom`. Defaults to `bottom`. | `"bottom" \| "top"` | -| `threshold` | `threshold` | The threshold distance from the bottom of the content to call the `infinite` output event when scrolled. The threshold value can be either a percent, or in pixels. For example, use the value of `10%` for the `infinite` output event to get called when the user has scrolled 10% from the bottom of the page. Use the value `100px` when the scroll is within 100 pixels from the bottom of the page. Defaults to `15%`. | `string` | +| Property | Attribute | Description | Type | Default | +| ----------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ---------- | +| `disabled` | `disabled` | If `true`, the infinite scroll will be hidden and scroll event listeners will be removed. Set this to true to disable the infinite scroll from actively trying to receive new data while scrolling. This is useful when it is known that there is no more data that can be added, and the infinite scroll is no longer needed. | `boolean` | `false` | +| `position` | `position` | The position of the infinite scroll element. The value can be either `top` or `bottom`. | `"bottom" \| "top"` | `'bottom'` | +| `threshold` | `threshold` | The threshold distance from the bottom of the content to call the `infinite` output event when scrolled. The threshold value can be either a percent, or in pixels. For example, use the value of `10%` for the `infinite` output event to get called when the user has scrolled 10% from the bottom of the page. Use the value `100px` when the scroll is within 100 pixels from the bottom of the page. | `string` | `'15%'` | ## Events -| Event | Detail | Description | -| ------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `ionInfinite` | | Emitted when the scroll reaches the threshold distance. From within your infinite handler, you must call the infinite scroll's `complete()` method when your async operation has completed. | +| Event | Description | Detail | +| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | +| `ionInfinite` | Emitted when the scroll reaches the threshold distance. From within your infinite handler, you must call the infinite scroll's `complete()` method when your async operation has completed. | void | ## Methods diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index ee1ab0c044..bb8ff38d92 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -31,7 +31,6 @@ export class Input implements ComponentInterface { /** * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; @@ -41,27 +40,27 @@ export class Input implements ComponentInterface { @Prop() accept?: string; /** - * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Defaults to `"none"`. + * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. */ - @Prop() autocapitalize = 'none'; + @Prop() autocapitalize: 'on' | 'off' | 'words' | 'characters' = 'off'; /** - * Indicates whether the value of the control can be automatically completed by the browser. Defaults to `"off"`. + * Indicates whether the value of the control can be automatically completed by the browser. */ - @Prop() autocomplete = 'off'; + @Prop() autocomplete: 'on' | 'off' = 'off'; /** - * Whether autocorrection should be enabled when the user is entering/editing the text value. Defaults to `"off"`. + * Whether autocorrection should be enabled when the user is entering/editing the text value. */ - @Prop() autocorrect = 'off'; + @Prop() autocorrect: 'on' | 'off' = 'off'; /** - * This Boolean attribute lets you specify that a form control should have input focus when the page loads. Defaults to `false`. + * This Boolean attribute lets you specify that a form control should have input focus when the page loads. */ @Prop() autofocus = false; /** - * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input. Defaults to `false`. + * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input. */ @Prop() clearInput = false; @@ -71,7 +70,7 @@ export class Input implements ComponentInterface { @Prop({ mutable: true }) clearOnEdit?: boolean; /** - * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `0`. + * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. */ @Prop() debounce = 0; @@ -81,7 +80,7 @@ export class Input implements ComponentInterface { } /** - * If `true`, the user cannot interact with the input. Defaults to `false`. + * If `true`, the user cannot interact with the input. */ @Prop() disabled = false; @@ -91,7 +90,8 @@ export class Input implements ComponentInterface { } /** - * A hint to the browser for which keyboard to display. This attribute applies when the value of the type attribute is `"text"`, `"password"`, `"email"`, or `"url"`. Possible values are: `"verbatim"`, `"latin"`, `"latin-name"`, `"latin-prose"`, `"full-width-latin"`, `"kana"`, `"katakana"`, `"numeric"`, `"tel"`, `"email"`, `"url"`. + * A hint to the browser for which keyboard to display. + * This attribute applies when the value of the type attribute is `"text"`, `"password"`, `"email"`, or `"url"`. Possible values are: `"verbatim"`, `"latin"`, `"latin-name"`, `"latin-prose"`, `"full-width-latin"`, `"kana"`, `"katakana"`, `"numeric"`, `"tel"`, `"email"`, `"url"`. */ @Prop() inputmode?: string; @@ -136,7 +136,7 @@ export class Input implements ComponentInterface { @Prop() placeholder?: string; /** - * If `true`, the user cannot modify the value. Defaults to `false`. + * If `true`, the user cannot modify the value. */ @Prop() readonly = false; @@ -151,12 +151,13 @@ export class Input implements ComponentInterface { @Prop() results?: number; /** - * If `true`, the element will have its spelling and grammar checked. Defaults to `false`. + * If `true`, the element will have its spelling and grammar checked. */ @Prop() spellcheck = false; /** - * Works with the min and max attributes to limit the increments at which a value can be set. Possible values are: `"any"` or a positive floating point number. + * Works with the min and max attributes to limit the increments at which a value can be set. + * Possible values are: `"any"` or a positive floating point number. */ @Prop() step?: string; @@ -166,7 +167,7 @@ export class Input implements ComponentInterface { @Prop() size?: number; /** - * The type of control to display. The default type is text. Possible values are: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, or `"url"`. + * The type of control to display. The default type is text. */ @Prop() type: TextFieldTypes = 'text'; diff --git a/core/src/components/input/readme.md b/core/src/components/input/readme.md index 0890229322..ae91419743 100644 --- a/core/src/components/input/readme.md +++ b/core/src/components/input/readme.md @@ -10,49 +10,49 @@ It is meant for text `type` inputs only, such as `"text"`, `"password"`, `"email ## Properties -| Property | Attribute | Description | Type | -| ---------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | -| `accept` | `accept` | If the value of the type attribute is `"file"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers. | `string \| undefined` | -| `autocapitalize` | `autocapitalize` | Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Defaults to `"none"`. | `string` | -| `autocomplete` | `autocomplete` | Indicates whether the value of the control can be automatically completed by the browser. Defaults to `"off"`. | `string` | -| `autocorrect` | `autocorrect` | Whether autocorrection should be enabled when the user is entering/editing the text value. Defaults to `"off"`. | `string` | -| `autofocus` | `autofocus` | This Boolean attribute lets you specify that a form control should have input focus when the page loads. Defaults to `false`. | `boolean` | -| `clearInput` | `clear-input` | If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input. Defaults to `false`. | `boolean` | -| `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` | -| `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` | -| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `0`. | `number` | -| `disabled` | `disabled` | If `true`, the user cannot interact with the input. Defaults to `false`. | `boolean` | -| `inputmode` | `inputmode` | A hint to the browser for which keyboard to display. This attribute applies when the value of the type attribute is `"text"`, `"password"`, `"email"`, or `"url"`. Possible values are: `"verbatim"`, `"latin"`, `"latin-name"`, `"latin-prose"`, `"full-width-latin"`, `"kana"`, `"katakana"`, `"numeric"`, `"tel"`, `"email"`, `"url"`. | `string \| undefined` | -| `max` | `max` | The maximum value, which must not be less than its minimum (min attribute) value. | `string \| undefined` | -| `maxlength` | `maxlength` | If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter. | `number \| undefined` | -| `min` | `min` | The minimum value, which must not be greater than its maximum (max attribute) value. | `string \| undefined` | -| `minlength` | `minlength` | If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter. | `number \| undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` | -| `multiple` | `multiple` | If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"` or `"file"`, otherwise it is ignored. | `boolean \| undefined` | -| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | -| `pattern` | `pattern` | A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored. | `string \| undefined` | -| `placeholder` | `placeholder` | Instructional text that shows before the input has a value. | `string \| undefined` | -| `readonly` | `readonly` | If `true`, the user cannot modify the value. Defaults to `false`. | `boolean` | -| `required` | `required` | If `true`, the user must fill in a value before submitting a form. | `boolean` | -| `results` | `results` | This is a nonstandard attribute supported by Safari that only applies when the type is `"search"`. Its value should be a nonnegative decimal integer. | `number \| undefined` | -| `size` | `size` | The initial size of the control. This value is in pixels unless the value of the type attribute is `"text"` or `"password"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored. | `number \| undefined` | -| `spellcheck` | `spellcheck` | If `true`, the element will have its spelling and grammar checked. Defaults to `false`. | `boolean` | -| `step` | `step` | Works with the min and max attributes to limit the increments at which a value can be set. Possible values are: `"any"` or a positive floating point number. | `string \| undefined` | -| `type` | `type` | The type of control to display. The default type is text. Possible values are: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, or `"url"`. | `"date" \| "email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "url"` | -| `value` | `value` | The value of the input. | `null \| string \| undefined` | +| Property | Attribute | Description | Type | Default | +| ---------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | -------------- | +| `accept` | `accept` | If the value of the type attribute is `"file"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers. | `string \| undefined` | `undefined` | +| `autocapitalize` | `autocapitalize` | Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. | `"characters" \| "off" \| "on" \| "words"` | `'off'` | +| `autocomplete` | `autocomplete` | Indicates whether the value of the control can be automatically completed by the browser. | `"off" \| "on"` | `'off'` | +| `autocorrect` | `autocorrect` | Whether autocorrection should be enabled when the user is entering/editing the text value. | `"off" \| "on"` | `'off'` | +| `autofocus` | `autofocus` | This Boolean attribute lets you specify that a form control should have input focus when the page loads. | `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` | +| `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` | +| `disabled` | `disabled` | If `true`, the user cannot interact with the input. | `boolean` | `false` | +| `inputmode` | `inputmode` | A hint to the browser for which keyboard to display. This attribute applies when the value of the type attribute is `"text"`, `"password"`, `"email"`, or `"url"`. Possible values are: `"verbatim"`, `"latin"`, `"latin-name"`, `"latin-prose"`, `"full-width-latin"`, `"kana"`, `"katakana"`, `"numeric"`, `"tel"`, `"email"`, `"url"`. | `string \| undefined` | `undefined` | +| `max` | `max` | The maximum value, which must not be less than its minimum (min attribute) value. | `string \| undefined` | `undefined` | +| `maxlength` | `maxlength` | If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter. | `number \| undefined` | `undefined` | +| `min` | `min` | The minimum value, which must not be greater than its maximum (max attribute) value. | `string \| undefined` | `undefined` | +| `minlength` | `minlength` | If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter. | `number \| undefined` | `undefined` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `multiple` | `multiple` | If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"` or `"file"`, otherwise it is ignored. | `boolean \| undefined` | `undefined` | +| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` | +| `pattern` | `pattern` | A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored. | `string \| undefined` | `undefined` | +| `placeholder` | `placeholder` | Instructional text that shows before the input has a value. | `string \| undefined` | `undefined` | +| `readonly` | `readonly` | If `true`, the user cannot modify the value. | `boolean` | `false` | +| `required` | `required` | If `true`, the user must fill in a value before submitting a form. | `boolean` | `false` | +| `results` | `results` | This is a nonstandard attribute supported by Safari that only applies when the type is `"search"`. Its value should be a nonnegative decimal integer. | `number \| undefined` | `undefined` | +| `size` | `size` | The initial size of the control. This value is in pixels unless the value of the type attribute is `"text"` or `"password"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored. | `number \| undefined` | `undefined` | +| `spellcheck` | `spellcheck` | If `true`, the element will have its spelling and grammar checked. | `boolean` | `false` | +| `step` | `step` | Works with the min and max attributes to limit the increments at which a value can be set. Possible values are: `"any"` or a positive floating point number. | `string \| undefined` | `undefined` | +| `type` | `type` | The type of control to display. The default type is text. | `"date" \| "email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "url"` | `'text'` | +| `value` | `value` | The value of the input. | `null \| string \| undefined` | `''` | ## Events -| Event | Detail | Description | -| ------------------- | -------------------- | ---------------------------------------- | -| `ionBlur` | | Emitted when the input loses focus. | -| `ionChange` | TextInputChangeEvent | Emitted when the value has changed. | -| `ionFocus` | | Emitted when the input has focus. | -| `ionInput` | KeyboardEvent | Emitted when a keyboard input ocurred. | -| `ionInputDidLoad` | | Emitted when the input has been created. | -| `ionInputDidUnload` | | Emitted when the input has been removed. | -| `ionStyle` | StyleEvent | Emitted when the styles change. | +| Event | Description | Detail | +| ------------------- | ---------------------------------------- | -------------------- | +| `ionBlur` | Emitted when the input loses focus. | void | +| `ionChange` | Emitted when the value has changed. | TextInputChangeEvent | +| `ionFocus` | Emitted when the input has focus. | void | +| `ionInput` | Emitted when a keyboard input ocurred. | KeyboardEvent | +| `ionInputDidLoad` | Emitted when the input has been created. | void | +| `ionInputDidUnload` | Emitted when the input has been removed. | void | +| `ionStyle` | Emitted when the styles change. | StyleEvent | ## Methods diff --git a/core/src/components/item-divider/item-divider.tsx b/core/src/components/item-divider/item-divider.tsx index 0903396e27..67d7f1aa54 100644 --- a/core/src/components/item-divider/item-divider.tsx +++ b/core/src/components/item-divider/item-divider.tsx @@ -24,7 +24,6 @@ export class ItemDivider implements ComponentInterface { /** * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; diff --git a/core/src/components/item-divider/readme.md b/core/src/components/item-divider/readme.md index 20f2977f00..185f69a211 100644 --- a/core/src/components/item-divider/readme.md +++ b/core/src/components/item-divider/readme.md @@ -7,10 +7,10 @@ Item Dividers are block elements that can be used to separate items in a list. T ## Properties -| Property | Attribute | Description | Type | -| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | -| `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` | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` | +| 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` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | ## CSS Custom Properties diff --git a/core/src/components/item-option/item-option.tsx b/core/src/components/item-option/item-option.tsx index 9dbdf83a20..7662b20bf5 100644 --- a/core/src/components/item-option/item-option.tsx +++ b/core/src/components/item-option/item-option.tsx @@ -24,17 +24,16 @@ export class ItemOption implements ComponentInterface { /** * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; /** - * If `true`, the user cannot interact with the item option. Defaults to `false`. + * If `true`, the user cannot interact with the item option. */ @Prop() disabled = false; /** - * If `true`, the option will expand to take up the available width and cover any other options. Defaults to `false`. + * If `true`, the option will expand to take up the available width and cover any other options. */ @Prop() expandable = false; diff --git a/core/src/components/item-option/readme.md b/core/src/components/item-option/readme.md index 7f6b7acdc7..8b6c37ab21 100644 --- a/core/src/components/item-option/readme.md +++ b/core/src/components/item-option/readme.md @@ -9,13 +9,13 @@ action for the item. ## Properties -| Property | Attribute | Description | Type | -| ------------ | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | -| `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` | -| `disabled` | `disabled` | If `true`, the user cannot interact with the item option. Defaults to `false`. | `boolean` | -| `expandable` | `expandable` | If `true`, the option will expand to take up the available width and cover any other options. Defaults to `false`. | `boolean` | -| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` | +| 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` | +| `disabled` | `disabled` | If `true`, the user cannot interact with the item option. | `boolean` | `false` | +| `expandable` | `expandable` | If `true`, the option will expand to take up the available width and cover any other options. | `boolean` | `false` | +| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | ## CSS Custom Properties diff --git a/core/src/components/item-options/item-options.tsx b/core/src/components/item-options/item-options.tsx index 9467b28228..289091b8d2 100644 --- a/core/src/components/item-options/item-options.tsx +++ b/core/src/components/item-options/item-options.tsx @@ -16,7 +16,7 @@ export class ItemOptions implements ComponentInterface { @Prop({ context: 'window' }) win!: Window; /** - * The side the option button should be on. Possible values: `"start"` and `"end"`. Defaults to `"end"`. If you have multiple `ion-item-options`, a side must be provided for each. + * The side the option button should be on. Possible values: `"start"` and `"end"`. If you have multiple `ion-item-options`, a side must be provided for each. * */ @Prop() side: Side = 'end'; diff --git a/core/src/components/item-options/readme.md b/core/src/components/item-options/readme.md index 3fcb3c07b3..625abe63de 100644 --- a/core/src/components/item-options/readme.md +++ b/core/src/components/item-options/readme.md @@ -17,16 +17,16 @@ You can combine the `ionSwipe` event plus the `expandable` directive to create a ## Properties -| Property | Attribute | Description | Type | -| -------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | -| `side` | `side` | The side the option button should be on. Possible values: `"start"` and `"end"`. Defaults to `"end"`. If you have multiple `ion-item-options`, a side must be provided for each. | `"end" \| "start"` | +| Property | Attribute | Description | Type | Default | +| -------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------- | +| `side` | `side` | The side the option button should be on. Possible values: `"start"` and `"end"`. If you have multiple `ion-item-options`, a side must be provided for each. | `"end" \| "start"` | `'end'` | ## Events -| Event | Detail | Description | -| ---------- | ------ | -------------------------------------------- | -| `ionSwipe` | any | Emitted when the item has been fully swiped. | +| Event | Description | Detail | +| ---------- | -------------------------------------------- | ------ | +| `ionSwipe` | Emitted when the item has been fully swiped. | any | ## Methods diff --git a/core/src/components/item-sliding/item-sliding.tsx b/core/src/components/item-sliding/item-sliding.tsx index 85ac856271..9ac116258b 100644 --- a/core/src/components/item-sliding/item-sliding.tsx +++ b/core/src/components/item-sliding/item-sliding.tsx @@ -49,7 +49,7 @@ export class ItemSliding implements ComponentInterface { @Prop({ context: 'queue' }) queue!: QueueApi; /** - * If `true`, the user cannot interact with the sliding-item. Defaults to `false`. + * If `true`, the user cannot interact with the sliding-item. */ @Prop() disabled = false; @Watch('disabled') diff --git a/core/src/components/item-sliding/readme.md b/core/src/components/item-sliding/readme.md index f775e7c5f0..d75d575759 100644 --- a/core/src/components/item-sliding/readme.md +++ b/core/src/components/item-sliding/readme.md @@ -31,16 +31,16 @@ Options can be expanded to take up the full width of the item if you swipe past ## Properties -| Property | Attribute | Description | Type | -| ---------- | ---------- | ------------------------------------------------------------------------------- | --------- | -| `disabled` | `disabled` | If `true`, the user cannot interact with the sliding-item. Defaults to `false`. | `boolean` | +| Property | Attribute | Description | Type | Default | +| ---------- | ---------- | ---------------------------------------------------------- | --------- | ------- | +| `disabled` | `disabled` | If `true`, the user cannot interact with the sliding-item. | `boolean` | `false` | ## Events -| Event | Detail | Description | -| --------- | ------ | ------------------------------------------ | -| `ionDrag` | | Emitted when the sliding position changes. | +| Event | Description | Detail | +| --------- | ------------------------------------------ | ------ | +| `ionDrag` | Emitted when the sliding position changes. | void | ## Methods diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx index 506e5d9018..40a6bf4d42 100644 --- a/core/src/components/item/item.tsx +++ b/core/src/components/item/item.tsx @@ -29,12 +29,11 @@ export class Item implements ComponentInterface { /** * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; /** - * If `true`, a button tag will be rendered and the item will be tappable. Defaults to `false`. + * If `true`, a button tag will be rendered and the item will be tappable. */ @Prop() button = false; @@ -45,12 +44,12 @@ export class Item implements ComponentInterface { @Prop() detail?: boolean; /** - * The icon to use when `detail` is set to `true`. Defaults to `"ios-arrow-forward"`. + * The icon to use when `detail` is set to `true`. */ @Prop() detailIcon = 'ios-arrow-forward'; /** - * If `true`, the user cannot interact with the item. Defaults to `false`. + * If `true`, the user cannot interact with the item. */ @Prop() disabled = false; @@ -62,7 +61,6 @@ export class Item implements ComponentInterface { /** * How the bottom border should be displayed on the item. - * Available options: `"full"`, `"inset"`, `"none"`. */ @Prop() lines?: 'full' | 'inset' | 'none'; @@ -74,8 +72,6 @@ export class Item implements ComponentInterface { /** * The type of the button. Only used when an `onclick` or `button` property is present. - * Possible values are: `"submit"`, `"reset"` and `"button"`. - * Default value is: `"button"` */ @Prop() type: 'submit' | 'reset' | 'button' = 'button'; diff --git a/core/src/components/item/readme.md b/core/src/components/item/readme.md index ee945d2bdb..d635ce880e 100644 --- a/core/src/components/item/readme.md +++ b/core/src/components/item/readme.md @@ -56,18 +56,18 @@ The highlight color changes based on the item state, but all of the states use I ## Properties -| Property | Attribute | Description | Type | -| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -| `button` | `button` | If `true`, a button tag will be rendered and the item will be tappable. Defaults to `false`. | `boolean` | -| `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` | -| `detailIcon` | `detail-icon` | The icon to use when `detail` is set to `true`. Defaults to `"ios-arrow-forward"`. | `string` | -| `detail` | `detail` | If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `button` property is present. | `boolean \| undefined` | -| `disabled` | `disabled` | If `true`, the user cannot interact with the item. Defaults to `false`. | `boolean` | -| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | -| `lines` | `lines` | How the bottom border should be displayed on the item. Available options: `"full"`, `"inset"`, `"none"`. | `"full" \| "inset" \| "none" \| undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` | -| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root" \| undefined` | -| `type` | `type` | The type of the button. Only used when an `onclick` or `button` property is present. Possible values are: `"submit"`, `"reset"` and `"button"`. Default value is: `"button"` | `"button" \| "reset" \| "submit"` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | --------------------- | +| `button` | `button` | If `true`, a button tag will be rendered and the item will be tappable. | `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` | +| `detailIcon` | `detail-icon` | The icon to use when `detail` is set to `true`. | `string` | `'ios-arrow-forward'` | +| `detail` | `detail` | If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `button` property is present. | `boolean \| undefined` | `undefined` | +| `disabled` | `disabled` | If `true`, the user cannot interact with the item. | `boolean` | `false` | +| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` | +| `lines` | `lines` | How the bottom border should be displayed on the item. | `"full" \| "inset" \| "none" \| undefined` | `undefined` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root" \| undefined` | `undefined` | +| `type` | `type` | The type of the button. Only used when an `onclick` or `button` property is present. | `"button" \| "reset" \| "submit"` | `'button'` | ## CSS Custom Properties diff --git a/core/src/components/label/label.tsx b/core/src/components/label/label.tsx index 839bc0a5a1..da3335e12b 100644 --- a/core/src/components/label/label.tsx +++ b/core/src/components/label/label.tsx @@ -23,7 +23,6 @@ export class Label implements ComponentInterface { /** * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; diff --git a/core/src/components/label/readme.md b/core/src/components/label/readme.md index d99d0c003c..340eb40bb9 100644 --- a/core/src/components/label/readme.md +++ b/core/src/components/label/readme.md @@ -8,18 +8,18 @@ Label is a wrapper element that can be used in combination with `ion-item`, `ion ## Properties -| Property | Attribute | Description | Type | -| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- | -| `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` | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` | -| `position` | `position` | The position determines where and how the label behaves inside an item. | `"fixed" \| "floating" \| "stacked" \| undefined` | +| 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` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `position` | `position` | The position determines where and how the label behaves inside an item. | `"fixed" \| "floating" \| "stacked" \| undefined` | `undefined` | ## Events -| Event | Detail | Description | -| ---------- | ---------- | ------------------------------- | -| `ionStyle` | StyleEvent | Emitted when the styles change. | +| Event | Description | Detail | +| ---------- | ------------------------------- | ---------- | +| `ionStyle` | Emitted when the styles change. | StyleEvent | ## CSS Custom Properties diff --git a/core/src/components/list-header/list-header.tsx b/core/src/components/list-header/list-header.tsx index 82c046624e..b9b8b60651 100644 --- a/core/src/components/list-header/list-header.tsx +++ b/core/src/components/list-header/list-header.tsx @@ -15,7 +15,6 @@ export class ListHeader implements ComponentInterface { /** * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; diff --git a/core/src/components/list-header/readme.md b/core/src/components/list-header/readme.md index 71eb7ba081..c88157e6d5 100644 --- a/core/src/components/list-header/readme.md +++ b/core/src/components/list-header/readme.md @@ -9,10 +9,10 @@ Unlike ItemDivider, ListHeaders are styled to be stand-out from the rest of the ## Properties -| Property | Attribute | Description | Type | -| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | -| `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` | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` | +| 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` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | ## CSS Custom Properties diff --git a/core/src/components/list/list.tsx b/core/src/components/list/list.tsx index 4dce58062b..00919a8036 100644 --- a/core/src/components/list/list.tsx +++ b/core/src/components/list/list.tsx @@ -16,18 +16,16 @@ export class List implements ComponentInterface { /** * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; /** * How the bottom border should be displayed on all items. - * Available options: `"full"`, `"inset"`, `"none"`. */ @Prop() lines?: 'full' | 'inset' | 'none'; /** - * If `true`, the list will have margin around it and rounded corners. Defaults to `false`. + * If `true`, the list will have margin around it and rounded corners. */ @Prop() inset = false; diff --git a/core/src/components/list/readme.md b/core/src/components/list/readme.md index f687fefbe7..4f622a1fd2 100644 --- a/core/src/components/list/readme.md +++ b/core/src/components/list/readme.md @@ -11,11 +11,11 @@ Lists support several interactions including swiping items to reveal options, dr ## Properties -| Property | Attribute | Description | Type | -| -------- | --------- | --------------------------------------------------------------------------------------------------------- | ------------------------------------------ | -| `inset` | `inset` | If `true`, the list will have margin around it and rounded corners. Defaults to `false`. | `boolean` | -| `lines` | `lines` | How the bottom border should be displayed on all items. Available options: `"full"`, `"inset"`, `"none"`. | `"full" \| "inset" \| "none" \| undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` | +| Property | Attribute | Description | Type | Default | +| -------- | --------- | ------------------------------------------------------------------- | ------------------------------------------ | ----------- | +| `inset` | `inset` | If `true`, the list will have margin around it and rounded corners. | `boolean` | `false` | +| `lines` | `lines` | How the bottom border should be displayed on all items. | `"full" \| "inset" \| "none" \| undefined` | `undefined` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | ## Methods diff --git a/core/src/components/loading/loading-interface.ts b/core/src/components/loading/loading-interface.ts index 90496df825..af3934a78b 100644 --- a/core/src/components/loading/loading-interface.ts +++ b/core/src/components/loading/loading-interface.ts @@ -1,7 +1,7 @@ import { AnimationBuilder, Mode, SpinnerTypes } from '../../interface'; export interface LoadingOptions { - spinner?: SpinnerTypes; + spinner?: SpinnerTypes | 'hide'; message?: string; cssClass?: string | string[]; showBackdrop?: boolean; diff --git a/core/src/components/loading/loading.tsx b/core/src/components/loading/loading.tsx index 96eb4d5062..d651700f3f 100644 --- a/core/src/components/loading/loading.tsx +++ b/core/src/components/loading/loading.tsx @@ -1,6 +1,6 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core'; -import { Animation, AnimationBuilder, Config, Mode, OverlayEventDetail, OverlayInterface } from '../../interface'; +import { Animation, AnimationBuilder, Config, Mode, OverlayEventDetail, OverlayInterface, SpinnerTypes } from '../../interface'; import { BACKDROP, dismiss, eventMethod, present } from '../../utils/overlays'; import { createThemedClasses, getClassMap } from '../../utils/theme'; @@ -32,7 +32,6 @@ export class Loading implements ComponentInterface, OverlayInterface { /** * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; @@ -68,28 +67,27 @@ export class Loading implements ComponentInterface, OverlayInterface { @Prop() duration = 0; /** - * If `true`, the loading indicator will be dismissed when the backdrop is clicked. Defaults to `false`. + * If `true`, the loading indicator will be dismissed when the backdrop is clicked. */ @Prop() backdropDismiss = false; /** - * If `true`, a backdrop will be displayed behind the loading indicator. Defaults to `true`. + * If `true`, a backdrop will be displayed behind the loading indicator. */ @Prop() showBackdrop = true; /** - * The name of the spinner to display. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, - * `"bubbles"`, `"circles"`, `"crescent"`. + * The name of the spinner to display. */ - @Prop({ mutable: true }) spinner?: string; + @Prop({ mutable: true }) spinner?: SpinnerTypes | 'hide'; /** - * If `true`, the loading indicator will be translucent. Defaults to `false`. + * If `true`, the loading indicator will be translucent. */ @Prop() translucent = false; /** - * If `true`, the loading indicator will animate. Defaults to `true`. + * If `true`, the loading indicator will animate. */ @Prop() animated = true; diff --git a/core/src/components/loading/readme.md b/core/src/components/loading/readme.md index bd60fd4797..28752e6557 100644 --- a/core/src/components/loading/readme.md +++ b/core/src/components/loading/readme.md @@ -18,33 +18,33 @@ The loading indicator can be dismissed automatically after a specific amount of ## Properties -| Property | Attribute | Description | Type | -| ----------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | -| `animated` | `animated` | If `true`, the loading indicator will animate. Defaults to `true`. | `boolean` | -| `backdropDismiss` | `backdrop-dismiss` | If `true`, the loading indicator will be dismissed when the backdrop is clicked. Defaults to `false`. | `boolean` | -| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | -| `duration` | `duration` | Number of milliseconds to wait before dismissing the loading indicator. | `number` | -| `enterAnimation` | -- | Animation to use when the loading indicator is presented. | `AnimationBuilder \| undefined` | -| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | -| `leaveAnimation` | -- | Animation to use when the loading indicator is dismissed. | `AnimationBuilder \| undefined` | -| `message` | `message` | Optional text content to display in the loading indicator. | `string \| undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` | -| `overlayIndex` | `overlay-index` | | `number` | -| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the loading indicator. Defaults to `true`. | `boolean` | -| `spinner` | `spinner` | The name of the spinner to display. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, `"bubbles"`, `"circles"`, `"crescent"`. | `string \| undefined` | -| `translucent` | `translucent` | If `true`, the loading indicator will be translucent. Defaults to `false`. | `boolean` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | ----------- | +| `animated` | `animated` | If `true`, the loading indicator will animate. | `boolean` | `true` | +| `backdropDismiss` | `backdrop-dismiss` | If `true`, the loading indicator will be dismissed when the backdrop is clicked. | `boolean` | `false` | +| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | +| `duration` | `duration` | Number of milliseconds to wait before dismissing the loading indicator. | `number` | `0` | +| `enterAnimation` | -- | Animation to use when the loading indicator is presented. | `AnimationBuilder \| undefined` | `undefined` | +| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | +| `leaveAnimation` | -- | Animation to use when the loading indicator is dismissed. | `AnimationBuilder \| undefined` | `undefined` | +| `message` | `message` | Optional text content to display in the loading indicator. | `string \| undefined` | `undefined` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `overlayIndex` | `overlay-index` | | `number` | `undefined` | +| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the loading indicator. | `boolean` | `true` | +| `spinner` | `spinner` | The name of the spinner to display. | `"bubbles" \| "circles" \| "crescent" \| "dots" \| "hide" \| "lines" \| "lines-small" \| undefined` | `undefined` | +| `translucent` | `translucent` | If `true`, the loading indicator will be translucent. | `boolean` | `false` | ## Events -| Event | Detail | Description | -| ----------------------- | ------------------ | ----------------------------------------- | -| `ionLoadingDidDismiss` | OverlayEventDetail | Emitted after the loading has dismissed. | -| `ionLoadingDidLoad` | | Emitted after the loading has loaded. | -| `ionLoadingDidPresent` | | Emitted after the loading has presented. | -| `ionLoadingDidUnload` | | Emitted after the loading has unloaded. | -| `ionLoadingWillDismiss` | OverlayEventDetail | Emitted before the loading has dismissed. | -| `ionLoadingWillPresent` | | Emitted before the loading has presented. | +| Event | Description | Detail | +| ----------------------- | ----------------------------------------- | ------------------ | +| `ionLoadingDidDismiss` | Emitted after the loading has dismissed. | OverlayEventDetail | +| `ionLoadingDidLoad` | Emitted after the loading has loaded. | void | +| `ionLoadingDidPresent` | Emitted after the loading has presented. | void | +| `ionLoadingDidUnload` | Emitted after the loading has unloaded. | void | +| `ionLoadingWillDismiss` | Emitted before the loading has dismissed. | OverlayEventDetail | +| `ionLoadingWillPresent` | Emitted before the loading has presented. | void | ## Methods diff --git a/core/src/components/menu-button/menu-button.tsx b/core/src/components/menu-button/menu-button.tsx index b407cc04f1..d09d9b3581 100644 --- a/core/src/components/menu-button/menu-button.tsx +++ b/core/src/components/menu-button/menu-button.tsx @@ -23,7 +23,6 @@ export class MenuButton implements ComponentInterface { /** * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; diff --git a/core/src/components/menu-button/readme.md b/core/src/components/menu-button/readme.md index 540f232cdd..6364598954 100644 --- a/core/src/components/menu-button/readme.md +++ b/core/src/components/menu-button/readme.md @@ -8,12 +8,12 @@ Menu Button is component that automatically creates the icon and functionality t ## Properties -| Property | Attribute | Description | Type | -| ---------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | -| `autoHide` | `auto-hide` | Automatically hides the menu button when the corresponding menu is not active | `boolean` | -| `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` | -| `menu` | `menu` | Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle | `string \| undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` | +| Property | Attribute | Description | Type | Default | +| ---------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- | +| `autoHide` | `auto-hide` | Automatically hides the menu button when the corresponding menu is not active | `boolean` | `true` | +| `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` | +| `menu` | `menu` | Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle | `string \| undefined` | `undefined` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | ---------------------------------------------- diff --git a/core/src/components/menu-toggle/readme.md b/core/src/components/menu-toggle/readme.md index 2bee415462..2824f4b2de 100644 --- a/core/src/components/menu-toggle/readme.md +++ b/core/src/components/menu-toggle/readme.md @@ -11,10 +11,10 @@ In case it's desired to keep `ion-menu-toggle` always visible, the `autoHide` pr ## Properties -| Property | Attribute | Description | Type | -| ---------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | -| `autoHide` | `auto-hide` | Automatically hides the content when the corresponding menu is not active. By default, it's `true`. Change it to `false` in order to keep `ion-menu-toggle` always visible regardless the state of the menu. | `boolean` | -| `menu` | `menu` | Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle. If this property is not used, `ion-menu-toggle` will toggle the first menu that is active. | `string \| undefined` | +| Property | Attribute | Description | Type | Default | +| ---------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- | +| `autoHide` | `auto-hide` | Automatically hides the content when the corresponding menu is not active. By default, it's `true`. Change it to `false` in order to keep `ion-menu-toggle` always visible regardless the state of the menu. | `boolean` | `true` | +| `menu` | `menu` | Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle. If this property is not used, `ion-menu-toggle` will toggle the first menu that is active. | `string \| undefined` | `undefined` | ---------------------------------------------- diff --git a/core/src/components/menu/menu.tsx b/core/src/components/menu/menu.tsx index e708fa23c6..50d6671061 100644 --- a/core/src/components/menu/menu.tsx +++ b/core/src/components/menu/menu.tsx @@ -77,7 +77,7 @@ export class Menu implements ComponentInterface, MenuI { } /** - * If `true`, the menu is disabled. Defaults to `false`. + * If `true`, the menu is disabled. */ @Prop({ mutable: true }) disabled = false; @@ -92,7 +92,7 @@ export class Menu implements ComponentInterface, MenuI { } /** - * Which side of the view the menu should be placed. Default `"start"`. + * Which side of the view the menu should be placed. */ @Prop({ reflectToAttr: true }) side: Side = 'start'; @@ -102,7 +102,7 @@ export class Menu implements ComponentInterface, MenuI { } /** - * If `true`, swiping the menu is enabled. Defaults to `true`. + * If `true`, swiping the menu is enabled. */ @Prop() swipeGesture = true; diff --git a/core/src/components/menu/readme.md b/core/src/components/menu/readme.md index 46a11553bc..68925e1e9c 100644 --- a/core/src/components/menu/readme.md +++ b/core/src/components/menu/readme.md @@ -13,25 +13,25 @@ These can be controlled from the templates, or programmatically using the MenuCo ## Properties -| Property | Attribute | Description | Type | -| -------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------ | --------------------- | -| `contentId` | `content-id` | The content's id the menu should use. | `string \| undefined` | -| `disabled` | `disabled` | If `true`, the menu is disabled. Defaults to `false`. | `boolean` | -| `maxEdgeStart` | `max-edge-start` | The edge threshold for dragging the menu open. If a drag/swipe happens over this value, the menu is not triggered. | `number` | -| `menuId` | `menu-id` | An id for the menu. | `string \| undefined` | -| `side` | `side` | Which side of the view the menu should be placed. Default `"start"`. | `"end" \| "start"` | -| `swipeGesture` | `swipe-gesture` | If `true`, swiping the menu is enabled. Defaults to `true`. | `boolean` | -| `type` | `type` | The display type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`. | `string` | +| Property | Attribute | Description | Type | Default | +| -------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------ | --------------------- | ----------- | +| `contentId` | `content-id` | The content's id the menu should use. | `string \| undefined` | `undefined` | +| `disabled` | `disabled` | If `true`, the menu is disabled. | `boolean` | `false` | +| `maxEdgeStart` | `max-edge-start` | The edge threshold for dragging the menu open. If a drag/swipe happens over this value, the menu is not triggered. | `number` | `50` | +| `menuId` | `menu-id` | An id for the menu. | `string \| undefined` | `undefined` | +| `side` | `side` | Which side of the view the menu should be placed. | `"end" \| "start"` | `'start'` | +| `swipeGesture` | `swipe-gesture` | If `true`, swiping the menu is enabled. | `boolean` | `true` | +| `type` | `type` | The display type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`. | `string` | `undefined` | ## Events -| Event | Detail | Description | -| -------------- | ------ | -------------------------------------------- | -| `ionDidClose` | | Emitted when the menu is closed. | -| `ionDidOpen` | | Emitted when the menu is open. | -| `ionWillClose` | | Emitted when the menu is about to be closed. | -| `ionWillOpen` | | Emitted when the menu is about to be opened. | +| Event | Description | Detail | +| -------------- | -------------------------------------------- | ------ | +| `ionDidClose` | Emitted when the menu is closed. | void | +| `ionDidOpen` | Emitted when the menu is open. | void | +| `ionWillClose` | Emitted when the menu is about to be closed. | void | +| `ionWillOpen` | Emitted when the menu is about to be opened. | void | ## Methods diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx index 1da0d9eaa3..c9309e1021 100644 --- a/core/src/components/modal/modal.tsx +++ b/core/src/components/modal/modal.tsx @@ -37,7 +37,6 @@ export class Modal implements ComponentInterface, OverlayInterface { /** * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; @@ -73,17 +72,17 @@ export class Modal implements ComponentInterface, OverlayInterface { @Prop() cssClass?: string | string[]; /** - * If `true`, the modal will be dismissed when the backdrop is clicked. Defaults to `true`. + * If `true`, the modal will be dismissed when the backdrop is clicked. */ @Prop() backdropDismiss = true; /** - * If `true`, a backdrop will be displayed behind the modal. Defaults to `true`. + * If `true`, a backdrop will be displayed behind the modal. */ @Prop() showBackdrop = true; /** - * If `true`, the modal will animate. Defaults to `true`. + * If `true`, the modal will animate. */ @Prop() animated = true; diff --git a/core/src/components/modal/readme.md b/core/src/components/modal/readme.md index 86a50f33d6..0b4e379bb3 100644 --- a/core/src/components/modal/readme.md +++ b/core/src/components/modal/readme.md @@ -14,32 +14,32 @@ Modals can be created using a [Modal Controller](../../modal-controller/ModalCon ## Properties -| Property | Attribute | Description | Type | -| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | -| `animated` | `animated` | If `true`, the modal will animate. Defaults to `true`. | `boolean` | -| `backdropDismiss` | `backdrop-dismiss` | If `true`, the modal will be dismissed when the backdrop is clicked. Defaults to `true`. | `boolean` | -| `componentProps` | -- | The data to pass to the modal component. | `undefined \| { [key: string]: any; }` | -| `component` | `component` | The component to display inside of the modal. | `Function \| HTMLElement \| null \| string` | -| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | -| `delegate` | -- | | `FrameworkDelegate \| undefined` | -| `enterAnimation` | -- | Animation to use when the modal is presented. | `AnimationBuilder \| undefined` | -| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | -| `leaveAnimation` | -- | Animation to use when the modal is dismissed. | `AnimationBuilder \| undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` | -| `overlayIndex` | `overlay-index` | | `number` | -| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the modal. Defaults to `true`. | `boolean` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | ----------- | +| `animated` | `animated` | If `true`, the modal will animate. | `boolean` | `true` | +| `backdropDismiss` | `backdrop-dismiss` | If `true`, the modal will be dismissed when the backdrop is clicked. | `boolean` | `true` | +| `componentProps` | -- | The data to pass to the modal component. | `undefined \| { [key: string]: any; }` | `undefined` | +| `component` | `component` | The component to display inside of the modal. | `Function \| HTMLElement \| null \| string` | `undefined` | +| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | +| `delegate` | -- | | `FrameworkDelegate \| undefined` | `undefined` | +| `enterAnimation` | -- | Animation to use when the modal is presented. | `AnimationBuilder \| undefined` | `undefined` | +| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | +| `leaveAnimation` | -- | Animation to use when the modal is dismissed. | `AnimationBuilder \| undefined` | `undefined` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `overlayIndex` | `overlay-index` | | `number` | `undefined` | +| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the modal. | `boolean` | `true` | ## Events -| Event | Detail | Description | -| --------------------- | ------------------ | --------------------------------------- | -| `ionModalDidDismiss` | OverlayEventDetail | Emitted after the modal has dismissed. | -| `ionModalDidLoad` | | Emitted after the modal has loaded. | -| `ionModalDidPresent` | | Emitted after the modal has presented. | -| `ionModalDidUnload` | | Emitted after the modal has unloaded. | -| `ionModalWillDismiss` | OverlayEventDetail | Emitted before the modal has dismissed. | -| `ionModalWillPresent` | | Emitted before the modal has presented. | +| Event | Description | Detail | +| --------------------- | --------------------------------------- | ------------------ | +| `ionModalDidDismiss` | Emitted after the modal has dismissed. | OverlayEventDetail | +| `ionModalDidLoad` | Emitted after the modal has loaded. | void | +| `ionModalDidPresent` | Emitted after the modal has presented. | void | +| `ionModalDidUnload` | Emitted after the modal has unloaded. | void | +| `ionModalWillDismiss` | Emitted before the modal has dismissed. | OverlayEventDetail | +| `ionModalWillPresent` | Emitted before the modal has presented. | void | ## Methods diff --git a/core/src/components/nav-push/readme.md b/core/src/components/nav-push/readme.md index ece14a12b1..413424f460 100644 --- a/core/src/components/nav-push/readme.md +++ b/core/src/components/nav-push/readme.md @@ -9,10 +9,10 @@ It is the element form of `NavController.push()` ## Properties -| Property | Attribute | Description | Type | -| ---------------- | ----------- | ----------------------------------------------- | -------------------------------------------------------------------------- | -| `componentProps` | -- | Data you want to pass to the component as props | `undefined \| { [key: string]: any; }` | -| `component` | `component` | Component to navigate to | `Function \| HTMLElement \| ViewController \| null \| string \| undefined` | +| Property | Attribute | Description | Type | Default | +| ---------------- | ----------- | ----------------------------------------------- | -------------------------------------------------------------------------- | ----------- | +| `componentProps` | -- | Data you want to pass to the component as props | `undefined \| { [key: string]: any; }` | `undefined` | +| `component` | `component` | Component to navigate to | `Function \| HTMLElement \| ViewController \| null \| string \| undefined` | `undefined` | ---------------------------------------------- diff --git a/core/src/components/nav-set-root/readme.md b/core/src/components/nav-set-root/readme.md index 532d61d762..2b460455b3 100644 --- a/core/src/components/nav-set-root/readme.md +++ b/core/src/components/nav-set-root/readme.md @@ -9,10 +9,10 @@ It is the element form a calling `NavController.setRoot()` ## Properties -| Property | Attribute | Description | Type | -| ---------------- | ----------- | -------------------------------------------------------- | -------------------------------------------------------------------------- | -| `componentProps` | -- | Data you want to pass to the component as props | `undefined \| { [key: string]: any; }` | -| `component` | `component` | Component you want to make root for the navigation stack | `Function \| HTMLElement \| ViewController \| null \| string \| undefined` | +| Property | Attribute | Description | Type | Default | +| ---------------- | ----------- | -------------------------------------------------------- | -------------------------------------------------------------------------- | ----------- | +| `componentProps` | -- | Data you want to pass to the component as props | `undefined \| { [key: string]: any; }` | `undefined` | +| `component` | `component` | Component you want to make root for the navigation stack | `Function \| HTMLElement \| ViewController \| null \| string \| undefined` | `undefined` | ---------------------------------------------- diff --git a/core/src/components/nav/nav.tsx b/core/src/components/nav/nav.tsx index 9ac9577393..b7280e4ca7 100644 --- a/core/src/components/nav/nav.tsx +++ b/core/src/components/nav/nav.tsx @@ -46,7 +46,7 @@ export class Nav implements NavOutlet { } /** - * If `true`, the nav should animate the transition of components. Default to `true`. + * If `true`, the nav should animate the transition of components. */ @Prop() animated = true; diff --git a/core/src/components/nav/readme.md b/core/src/components/nav/readme.md index a3cd6caf24..6176db9993 100644 --- a/core/src/components/nav/readme.md +++ b/core/src/components/nav/readme.md @@ -9,23 +9,23 @@ Unlike RouterOutlet, Nav is not tied to a particular router. Meaning that if we ## Properties -| Property | Attribute | Description | Type | -| -------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | -| `animated` | `animated` | If `true`, the nav should animate the transition of components. Default to `true`. | `boolean` | -| `animation` | -- | By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimateBuilder` functions. | `AnimationBuilder \| undefined` | -| `delegate` | -- | | `FrameworkDelegate \| undefined` | -| `rootParams` | -- | Any parameters for the root component | `undefined \| { [key: string]: any; }` | -| `root` | `root` | Root NavComponent to load | `Function \| HTMLElement \| ViewController \| null \| string \| undefined` | -| `swipeGesture` | `swipe-gesture` | If the nav component should allow for swipe-to-go-back. | `boolean \| undefined` | +| Property | Attribute | Description | Type | Default | +| -------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ----------- | +| `animated` | `animated` | If `true`, the nav should animate the transition of components. | `boolean` | `true` | +| `animation` | -- | By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimateBuilder` functions. | `AnimationBuilder \| undefined` | `undefined` | +| `delegate` | -- | | `FrameworkDelegate \| undefined` | `undefined` | +| `rootParams` | -- | Any parameters for the root component | `undefined \| { [key: string]: any; }` | `undefined` | +| `root` | `root` | Root NavComponent to load | `Function \| HTMLElement \| ViewController \| null \| string \| undefined` | `undefined` | +| `swipeGesture` | `swipe-gesture` | If the nav component should allow for swipe-to-go-back. | `boolean \| undefined` | `undefined` | ## Events -| Event | Detail | Description | -| ------------------ | ------ | ----------------------------------------------- | -| `ionNavDidChange` | | Event fired when the nav has changed components | -| `ionNavWillChange` | | Event fired when the nav will components | -| `ionNavWillLoad` | | Event fired when Nav will load a component | +| Event | Description | Detail | +| ------------------ | ----------------------------------------------- | ------ | +| `ionNavDidChange` | Event fired when the nav has changed components | void | +| `ionNavWillChange` | Event fired when the nav will components | void | +| `ionNavWillLoad` | Event fired when Nav will load a component | void | ## Methods diff --git a/core/src/components/note/note.tsx b/core/src/components/note/note.tsx index 89a8807e9d..7fa26be73b 100644 --- a/core/src/components/note/note.tsx +++ b/core/src/components/note/note.tsx @@ -21,7 +21,6 @@ export class Note implements ComponentInterface { /** * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; diff --git a/core/src/components/note/readme.md b/core/src/components/note/readme.md index 20d00d8ab5..50295a9153 100644 --- a/core/src/components/note/readme.md +++ b/core/src/components/note/readme.md @@ -8,10 +8,10 @@ Notes are text elements generally used as subtitles that provide more informatio ## Properties -| Property | Attribute | Description | Type | -| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | -| `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` | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` | +| 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` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | ## CSS Custom Properties diff --git a/core/src/components/picker-column/readme.md b/core/src/components/picker-column/readme.md index 5443576706..4ee1bd9a7e 100644 --- a/core/src/components/picker-column/readme.md +++ b/core/src/components/picker-column/readme.md @@ -7,9 +7,9 @@ ## Properties -| Property | Attribute | Description | Type | -| -------- | --------- | ----------- | -------------- | -| `col` | -- | | `PickerColumn` | +| Property | Attribute | Description | Type | Default | +| -------- | --------- | ----------- | -------------- | ----------- | +| `col` | -- | | `PickerColumn` | `undefined` | ---------------------------------------------- diff --git a/core/src/components/picker/picker.tsx b/core/src/components/picker/picker.tsx index 9fe104a3c1..d8f742face 100644 --- a/core/src/components/picker/picker.tsx +++ b/core/src/components/picker/picker.tsx @@ -30,7 +30,6 @@ export class Picker implements ComponentInterface, OverlayInterface { /** * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; @@ -71,17 +70,17 @@ export class Picker implements ComponentInterface, OverlayInterface { @Prop() duration = 0; /** - * If `true`, a backdrop will be displayed behind the picker. Defaults to `true`. + * If `true`, a backdrop will be displayed behind the picker. */ @Prop() showBackdrop = true; /** - * If `true`, the picker will be dismissed when the backdrop is clicked. Defaults to `true`. + * If `true`, the picker will be dismissed when the backdrop is clicked. */ @Prop() backdropDismiss = true; /** - * If `true`, the picker will animate. Defaults to `true`. + * If `true`, the picker will animate. */ @Prop() animated = true; diff --git a/core/src/components/picker/readme.md b/core/src/components/picker/readme.md index 20057a4341..bb7292b61c 100644 --- a/core/src/components/picker/readme.md +++ b/core/src/components/picker/readme.md @@ -9,32 +9,32 @@ A Picker is a dialog that displays a row of buttons and columns underneath. It a ## Properties -| Property | Attribute | Description | Type | -| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | --------------------------------- | -| `animated` | `animated` | If `true`, the picker will animate. Defaults to `true`. | `boolean` | -| `backdropDismiss` | `backdrop-dismiss` | If `true`, the picker will be dismissed when the backdrop is clicked. Defaults to `true`. | `boolean` | -| `buttons` | -- | Array of buttons to be displayed at the top of the picker. | `PickerButton[]` | -| `columns` | -- | Array of columns to be displayed in the picker. | `PickerColumn[]` | -| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | -| `duration` | `duration` | Number of milliseconds to wait before dismissing the picker. | `number` | -| `enterAnimation` | -- | Animation to use when the picker is presented. | `AnimationBuilder \| undefined` | -| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | -| `leaveAnimation` | -- | Animation to use when the picker is dismissed. | `AnimationBuilder \| undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` | -| `overlayIndex` | `overlay-index` | | `number` | -| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the picker. Defaults to `true`. | `boolean` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- | +| `animated` | `animated` | If `true`, the picker will animate. | `boolean` | `true` | +| `backdropDismiss` | `backdrop-dismiss` | If `true`, the picker will be dismissed when the backdrop is clicked. | `boolean` | `true` | +| `buttons` | -- | Array of buttons to be displayed at the top of the picker. | `PickerButton[]` | `[]` | +| `columns` | -- | Array of columns to be displayed in the picker. | `PickerColumn[]` | `[]` | +| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | +| `duration` | `duration` | Number of milliseconds to wait before dismissing the picker. | `number` | `0` | +| `enterAnimation` | -- | Animation to use when the picker is presented. | `AnimationBuilder \| undefined` | `undefined` | +| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | +| `leaveAnimation` | -- | Animation to use when the picker is dismissed. | `AnimationBuilder \| undefined` | `undefined` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `overlayIndex` | `overlay-index` | | `number` | `undefined` | +| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the picker. | `boolean` | `true` | ## Events -| Event | Detail | Description | -| ---------------------- | ------------------ | ---------------------------------------- | -| `ionPickerDidDismiss` | OverlayEventDetail | Emitted after the picker has dismissed. | -| `ionPickerDidLoad` | | Emitted after the picker has loaded. | -| `ionPickerDidPresent` | | Emitted after the picker has presented. | -| `ionPickerDidUnload` | | Emitted after the picker has unloaded. | -| `ionPickerWillDismiss` | OverlayEventDetail | Emitted before the picker has dismissed. | -| `ionPickerWillPresent` | | Emitted before the picker has presented. | +| Event | Description | Detail | +| ---------------------- | ---------------------------------------- | ------------------ | +| `ionPickerDidDismiss` | Emitted after the picker has dismissed. | OverlayEventDetail | +| `ionPickerDidLoad` | Emitted after the picker has loaded. | void | +| `ionPickerDidPresent` | Emitted after the picker has presented. | void | +| `ionPickerDidUnload` | Emitted after the picker has unloaded. | void | +| `ionPickerWillDismiss` | Emitted before the picker has dismissed. | OverlayEventDetail | +| `ionPickerWillPresent` | Emitted before the picker has presented. | void | ## Methods diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx index 2ac14b6d05..bef3a3d6c9 100644 --- a/core/src/components/popover/popover.tsx +++ b/core/src/components/popover/popover.tsx @@ -39,7 +39,6 @@ export class Popover implements ComponentInterface, OverlayInterface { /** * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; @@ -75,7 +74,7 @@ export class Popover implements ComponentInterface, OverlayInterface { @Prop() cssClass?: string | string[]; /** - * If `true`, the popover will be dismissed when the backdrop is clicked. Defaults to `true`. + * If `true`, the popover will be dismissed when the backdrop is clicked. */ @Prop() backdropDismiss = true; @@ -85,17 +84,17 @@ export class Popover implements ComponentInterface, OverlayInterface { @Prop() event: any; /** - * If `true`, a backdrop will be displayed behind the popover. Defaults to `true`. + * If `true`, a backdrop will be displayed behind the popover. */ @Prop() showBackdrop = true; /** - * If `true`, the popover will be translucent. Defaults to `false`. + * If `true`, the popover will be translucent. */ @Prop() translucent = false; /** - * If `true`, the popover will animate. Defaults to `true`. + * If `true`, the popover will animate. */ @Prop() animated = true; diff --git a/core/src/components/popover/readme.md b/core/src/components/popover/readme.md index 932b65b98d..21a322f0c1 100644 --- a/core/src/components/popover/readme.md +++ b/core/src/components/popover/readme.md @@ -16,34 +16,34 @@ To present a popover, call the `present` method on a popover instance. In order ## Properties -| Property | Attribute | Description | Type | -| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | -| `animated` | `animated` | If `true`, the popover will animate. Defaults to `true`. | `boolean` | -| `backdropDismiss` | `backdrop-dismiss` | If `true`, the popover will be dismissed when the backdrop is clicked. Defaults to `true`. | `boolean` | -| `componentProps` | -- | The data to pass to the popover component. | `undefined \| { [key: string]: any; }` | -| `component` | `component` | The component to display inside of the popover. | `Function \| HTMLElement \| null \| string` | -| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | -| `delegate` | -- | | `FrameworkDelegate \| undefined` | -| `enterAnimation` | -- | Animation to use when the popover is presented. | `AnimationBuilder \| undefined` | -| `event` | -- | The event to pass to the popover animation. | `any` | -| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | -| `leaveAnimation` | -- | Animation to use when the popover is dismissed. | `AnimationBuilder \| undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` | -| `overlayIndex` | `overlay-index` | | `number` | -| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the popover. Defaults to `true`. | `boolean` | -| `translucent` | `translucent` | If `true`, the popover will be translucent. Defaults to `false`. | `boolean` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | ----------- | +| `animated` | `animated` | If `true`, the popover will animate. | `boolean` | `true` | +| `backdropDismiss` | `backdrop-dismiss` | If `true`, the popover will be dismissed when the backdrop is clicked. | `boolean` | `true` | +| `componentProps` | -- | The data to pass to the popover component. | `undefined \| { [key: string]: any; }` | `undefined` | +| `component` | `component` | The component to display inside of the popover. | `Function \| HTMLElement \| null \| string` | `undefined` | +| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | +| `delegate` | -- | | `FrameworkDelegate \| undefined` | `undefined` | +| `enterAnimation` | -- | Animation to use when the popover is presented. | `AnimationBuilder \| undefined` | `undefined` | +| `event` | -- | The event to pass to the popover animation. | `any` | `undefined` | +| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | +| `leaveAnimation` | -- | Animation to use when the popover is dismissed. | `AnimationBuilder \| undefined` | `undefined` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `overlayIndex` | `overlay-index` | | `number` | `undefined` | +| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the popover. | `boolean` | `true` | +| `translucent` | `translucent` | If `true`, the popover will be translucent. | `boolean` | `false` | ## Events -| Event | Detail | Description | -| ----------------------- | ------------------ | ----------------------------------------- | -| `ionPopoverDidDismiss` | OverlayEventDetail | Emitted after the popover has dismissed. | -| `ionPopoverDidLoad` | | Emitted after the popover has loaded. | -| `ionPopoverDidPresent` | | Emitted after the popover has presented. | -| `ionPopoverDidUnload` | | Emitted after the popover has unloaded. | -| `ionPopoverWillDismiss` | OverlayEventDetail | Emitted before the popover has dismissed. | -| `ionPopoverWillPresent` | | Emitted before the popover has presented. | +| Event | Description | Detail | +| ----------------------- | ----------------------------------------- | ------------------ | +| `ionPopoverDidDismiss` | Emitted after the popover has dismissed. | OverlayEventDetail | +| `ionPopoverDidLoad` | Emitted after the popover has loaded. | void | +| `ionPopoverDidPresent` | Emitted after the popover has presented. | void | +| `ionPopoverDidUnload` | Emitted after the popover has unloaded. | void | +| `ionPopoverWillDismiss` | Emitted before the popover has dismissed. | OverlayEventDetail | +| `ionPopoverWillPresent` | Emitted before the popover has presented. | void | ## Methods diff --git a/core/src/components/radio-group/radio-group.tsx b/core/src/components/radio-group/radio-group.tsx index 8e082ca45b..c6401b57d5 100644 --- a/core/src/components/radio-group/radio-group.tsx +++ b/core/src/components/radio-group/radio-group.tsx @@ -14,7 +14,7 @@ export class RadioGroup implements ComponentInterface { @Element() el!: HTMLElement; /** - * If `true`, the radios can be deselected. Defaults to `false`. + * If `true`, the radios can be deselected. */ @Prop() allowEmptySelection = false; diff --git a/core/src/components/radio-group/readme.md b/core/src/components/radio-group/readme.md index 0d86aed0b7..60bf4c3b75 100644 --- a/core/src/components/radio-group/readme.md +++ b/core/src/components/radio-group/readme.md @@ -13,18 +13,18 @@ radio button within the same group. ## Properties -| Property | Attribute | Description | Type | -| --------------------- | ----------------------- | --------------------------------------------------------------- | --------- | -| `allowEmptySelection` | `allow-empty-selection` | If `true`, the radios can be deselected. Defaults to `false`. | `boolean` | -| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | -| `value` | -- | the value of the radio group. | `any` | +| Property | Attribute | Description | Type | Default | +| --------------------- | ----------------------- | --------------------------------------------------------------- | --------- | -------------- | +| `allowEmptySelection` | `allow-empty-selection` | If `true`, the radios can be deselected. | `boolean` | `false` | +| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` | +| `value` | -- | the value of the radio group. | `any` | `undefined` | ## Events -| Event | Detail | Description | -| ----------- | ---------------- | ----------------------------------- | -| `ionChange` | InputChangeEvent | Emitted when the value has changed. | +| Event | Description | Detail | +| ----------- | ----------------------------------- | ---------------- | +| `ionChange` | Emitted when the value has changed. | InputChangeEvent | ---------------------------------------------- diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx index 10620c541d..808531793c 100644 --- a/core/src/components/radio/radio.tsx +++ b/core/src/components/radio/radio.tsx @@ -29,7 +29,6 @@ export class Radio implements ComponentInterface { /** * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; @@ -39,12 +38,12 @@ export class Radio implements ComponentInterface { @Prop() name: string = this.inputId; /** - * If `true`, the user cannot interact with the radio. Defaults to `false`. + * If `true`, the user cannot interact with the radio. */ @Prop() disabled = false; /** - * If `true`, the radio is selected. Defaults to `false`. + * If `true`, the radio is selected. */ @Prop({ mutable: true }) checked = false; diff --git a/core/src/components/radio/readme.md b/core/src/components/radio/readme.md index dcdc4417a9..6a9a127402 100644 --- a/core/src/components/radio/readme.md +++ b/core/src/components/radio/readme.md @@ -12,26 +12,26 @@ An `ion-radio-group` can be used to group a set of radios. When radios are insid ## Properties -| Property | Attribute | Description | Type | -| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | -| `checked` | `checked` | If `true`, the radio is selected. Defaults to `false`. | `boolean` | -| `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` | -| `disabled` | `disabled` | If `true`, the user cannot interact with the radio. Defaults to `false`. | `boolean` | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` | -| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | -| `value` | -- | the value of the radio. | `any` | +| Property | Attribute | Description | Type | Default | +| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | -------------- | +| `checked` | `checked` | If `true`, the radio is selected. | `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` | +| `disabled` | `disabled` | If `true`, the user cannot interact with the radio. | `boolean` | `false` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` | +| `value` | -- | the value of the radio. | `any` | `undefined` | ## Events -| Event | Detail | Description | -| ------------------- | ----------------------- | ------------------------------------------ | -| `ionBlur` | | Emitted when the radio button loses focus. | -| `ionFocus` | | Emitted when the radio button has focus. | -| `ionRadioDidLoad` | | Emitted when the radio loads. | -| `ionRadioDidUnload` | | Emitted when the radio unloads. | -| `ionSelect` | CheckedInputChangeEvent | Emitted when the radio button is selected. | -| `ionStyle` | StyleEvent | Emitted when the styles change. | +| Event | Description | Detail | +| ------------------- | ------------------------------------------ | ----------------------- | +| `ionBlur` | Emitted when the radio button loses focus. | void | +| `ionFocus` | Emitted when the radio button has focus. | void | +| `ionRadioDidLoad` | Emitted when the radio loads. | void | +| `ionRadioDidUnload` | Emitted when the radio unloads. | void | +| `ionSelect` | Emitted when the radio button is selected. | CheckedInputChangeEvent | +| `ionStyle` | Emitted when the styles change. | StyleEvent | ## CSS Custom Properties diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx index abca2053d1..f7265af2b2 100644 --- a/core/src/components/range/range.tsx +++ b/core/src/components/range/range.tsx @@ -39,13 +39,12 @@ export class Range implements ComponentInterface { /** * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; /** * How long, in milliseconds, to wait to trigger the - * `ionChange` event after each change in the range value. Default `0`. + * `ionChange` event after each change in the range value. */ @Prop() debounce = 0; @@ -60,12 +59,12 @@ export class Range implements ComponentInterface { @Prop() name = ''; /** - * Show two knobs. Defaults to `false`. + * Show two knobs. */ @Prop() dualKnobs = false; /** - * Minimum integer value of the range. Defaults to `0`. + * Minimum integer value of the range. */ @Prop() min = 0; @Watch('min') @@ -76,7 +75,7 @@ export class Range implements ComponentInterface { } /** - * Maximum integer value of the range. Defaults to `100`. + * Maximum integer value of the range. */ @Prop() max = 100; @Watch('max') @@ -88,23 +87,23 @@ export class Range implements ComponentInterface { /** * If `true`, a pin with integer value is shown when the knob - * is pressed. Defaults to `false`. + * is pressed. */ @Prop() pin = false; /** * If `true`, the knob snaps to tick marks evenly spaced based - * on the step property value. Defaults to `false`. + * on the step property value. */ @Prop() snaps = false; /** - * Specifies the value granularity. Defaults to `1`. + * Specifies the value granularity. */ @Prop() step = 1; /** - * If `true`, the user cannot interact with the range. Defaults to `false`. + * If `true`, the user cannot interact with the range. */ @Prop() disabled = false; @Watch('disabled') diff --git a/core/src/components/range/readme.md b/core/src/components/range/readme.md index 2e40b6ec58..7d5d1271cd 100644 --- a/core/src/components/range/readme.md +++ b/core/src/components/range/readme.md @@ -17,30 +17,30 @@ left or right of the range. ## Properties -| Property | Attribute | Description | Type | -| ----------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | -| `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` | -| `debounce` | `debounce` | How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value. Default `0`. | `number` | -| `disabled` | `disabled` | If `true`, the user cannot interact with the range. Defaults to `false`. | `boolean` | -| `dualKnobs` | `dual-knobs` | Show two knobs. Defaults to `false`. | `boolean` | -| `max` | `max` | Maximum integer value of the range. Defaults to `100`. | `number` | -| `min` | `min` | Minimum integer value of the range. Defaults to `0`. | `number` | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` | -| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | -| `pin` | `pin` | If `true`, a pin with integer value is shown when the knob is pressed. Defaults to `false`. | `boolean` | -| `snaps` | `snaps` | If `true`, the knob snaps to tick marks evenly spaced based on the step property value. Defaults to `false`. | `boolean` | -| `step` | `step` | Specifies the value granularity. Defaults to `1`. | `number` | -| `value` | `value` | the value of the range. | `number \| { lower: number; upper: number; }` | +| 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` | +| `debounce` | `debounce` | How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value. | `number` | `0` | +| `disabled` | `disabled` | If `true`, the user cannot interact with the range. | `boolean` | `false` | +| `dualKnobs` | `dual-knobs` | Show two knobs. | `boolean` | `false` | +| `max` | `max` | Maximum integer value of the range. | `number` | `100` | +| `min` | `min` | Minimum integer value of the range. | `number` | `0` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `''` | +| `pin` | `pin` | If `true`, a pin with integer value is shown when the knob is pressed. | `boolean` | `false` | +| `snaps` | `snaps` | If `true`, the knob snaps to tick marks evenly spaced based on the step property value. | `boolean` | `false` | +| `step` | `step` | Specifies the value granularity. | `number` | `1` | +| `value` | `value` | the value of the range. | `number \| { lower: number; upper: number; }` | `0` | ## Events -| Event | Detail | Description | -| ----------- | ---------------- | -------------------------------------------- | -| `ionBlur` | | Emitted when the range loses focus. | -| `ionChange` | InputChangeEvent | Emitted when the value property has changed. | -| `ionFocus` | | Emitted when the range has focus. | -| `ionStyle` | StyleEvent | Emitted when the styles change. | +| Event | Description | Detail | +| ----------- | -------------------------------------------- | ---------------- | +| `ionBlur` | Emitted when the range loses focus. | void | +| `ionChange` | Emitted when the value property has changed. | InputChangeEvent | +| `ionFocus` | Emitted when the range has focus. | void | +| `ionStyle` | Emitted when the styles change. | StyleEvent | ## CSS Custom Properties diff --git a/core/src/components/refresher-content/readme.md b/core/src/components/refresher-content/readme.md index 44f50d5521..62e5782071 100644 --- a/core/src/components/refresher-content/readme.md +++ b/core/src/components/refresher-content/readme.md @@ -9,12 +9,12 @@ The refresher content contains the text, icon and spinner to display during a pu ## Properties -| Property | Attribute | Description | Type | -| ------------------- | -------------------- | --------------------------------------------------------- | --------------------- | -| `pullingIcon` | `pulling-icon` | A static icon to display when you begin to pull down | `string \| undefined` | -| `pullingText` | `pulling-text` | The text you want to display when you begin to pull down | `string \| undefined` | -| `refreshingSpinner` | `refreshing-spinner` | An animated SVG spinner that shows when refreshing begins | `string \| undefined` | -| `refreshingText` | `refreshing-text` | The text you want to display when performing a refresh | `string \| undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------- | -------------------- | --------------------------------------------------------- | ----------------------------------------------------------------------------------------- | ----------- | +| `pullingIcon` | `pulling-icon` | A static icon to display when you begin to pull down | `string \| undefined` | `undefined` | +| `pullingText` | `pulling-text` | The text you want to display when you begin to pull down | `string \| undefined` | `undefined` | +| `refreshingSpinner` | `refreshing-spinner` | An animated SVG spinner that shows when refreshing begins | `"bubbles" \| "circles" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| undefined` | `undefined` | +| `refreshingText` | `refreshing-text` | The text you want to display when performing a refresh | `string \| undefined` | `undefined` | ---------------------------------------------- diff --git a/core/src/components/refresher-content/refresher-content.tsx b/core/src/components/refresher-content/refresher-content.tsx index a78f69f33a..dc3e595818 100644 --- a/core/src/components/refresher-content/refresher-content.tsx +++ b/core/src/components/refresher-content/refresher-content.tsx @@ -1,6 +1,6 @@ import { Component, ComponentInterface, Prop } from '@stencil/core'; -import { Config } from '../../interface'; +import { Config, SpinnerTypes } from '../../interface'; @Component({ tag: 'ion-refresher-content' @@ -22,7 +22,7 @@ export class RefresherContent implements ComponentInterface { /** * An animated SVG spinner that shows when refreshing begins */ - @Prop({ mutable: true }) refreshingSpinner?: string; + @Prop({ mutable: true }) refreshingSpinner?: SpinnerTypes; /** * The text you want to display when performing a refresh diff --git a/core/src/components/refresher/readme.md b/core/src/components/refresher/readme.md index 13f447e31e..e648dc0859 100644 --- a/core/src/components/refresher/readme.md +++ b/core/src/components/refresher/readme.md @@ -15,22 +15,22 @@ refresher. ## Properties -| Property | Attribute | Description | Type | -| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | -| `closeDuration` | `close-duration` | Time it takes to close the refresher. Defaults to `280ms`. | `string` | -| `disabled` | `disabled` | If `true`, the refresher will be hidden. Defaults to `false`. | `boolean` | -| `pullMax` | `pull-max` | The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`. | `number` | -| `pullMin` | `pull-min` | The minimum distance the user must pull down until the refresher will go into the `refreshing` state. Defaults to `60`. | `number` | -| `snapbackDuration` | `snapback-duration` | Time it takes the refresher to to snap back to the `refreshing` state. Defaults to `280ms`. | `string` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------------------- | +| `closeDuration` | `close-duration` | Time it takes to close the refresher. | `string` | `'280ms'` | +| `disabled` | `disabled` | If `true`, the refresher will be hidden. | `boolean` | `false` | +| `pullMax` | `pull-max` | The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`. | `number` | `this.pullMin + 60` | +| `pullMin` | `pull-min` | The minimum distance the user must pull down until the refresher will go into the `refreshing` state. | `number` | `60` | +| `snapbackDuration` | `snapback-duration` | Time it takes the refresher to to snap back to the `refreshing` state. | `string` | `'280ms'` | ## Events -| Event | Detail | Description | -| ------------ | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `ionPull` | | Emitted while the user is pulling down the content and exposing the refresher. | -| `ionRefresh` | RefresherEventDetail | Emitted when the user lets go of the content and has pulled down further than the `pullMin` or pulls the content down and exceeds the pullMax. Updates the refresher state to `refreshing`. The `complete()` method should be called when the async operation has completed. | -| `ionStart` | | Emitted when the user begins to start pulling down. | +| Event | Description | Detail | +| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | +| `ionPull` | Emitted while the user is pulling down the content and exposing the refresher. | void | +| `ionRefresh` | Emitted when the user lets go of the content and has pulled down further than the `pullMin` or pulls the content down and exceeds the pullMax. Updates the refresher state to `refreshing`. The `complete()` method should be called when the async operation has completed. | RefresherEventDetail | +| `ionStart` | Emitted when the user begins to start pulling down. | void | ## Methods diff --git a/core/src/components/refresher/refresher.tsx b/core/src/components/refresher/refresher.tsx index cffcc0e585..b8c034692b 100644 --- a/core/src/components/refresher/refresher.tsx +++ b/core/src/components/refresher/refresher.tsx @@ -38,7 +38,7 @@ export class Refresher implements ComponentInterface { /** * The minimum distance the user must pull down until the - * refresher will go into the `refreshing` state. Defaults to `60`. + * refresher will go into the `refreshing` state. */ @Prop() pullMin = 60; @@ -51,17 +51,17 @@ export class Refresher implements ComponentInterface { // TODO: NEVER USED /** - * Time it takes to close the refresher. Defaults to `280ms`. + * Time it takes to close the refresher. */ @Prop() closeDuration = '280ms'; /** - * Time it takes the refresher to to snap back to the `refreshing` state. Defaults to `280ms`. + * Time it takes the refresher to to snap back to the `refreshing` state. */ @Prop() snapbackDuration = '280ms'; /** - * If `true`, the refresher will be hidden. Defaults to `false`. + * If `true`, the refresher will be hidden. */ @Prop() disabled = false; @Watch('disabled') diff --git a/core/src/components/reorder-group/readme.md b/core/src/components/reorder-group/readme.md index 19479b447f..2e8ba5584f 100644 --- a/core/src/components/reorder-group/readme.md +++ b/core/src/components/reorder-group/readme.md @@ -51,16 +51,16 @@ This utility is really handy when ## Properties -| Property | Attribute | Description | Type | -| ---------- | ---------- | ---------------------------------------------------------- | --------- | -| `disabled` | `disabled` | If `true`, the reorder will be hidden. Defaults to `true`. | `boolean` | +| Property | Attribute | Description | Type | Default | +| ---------- | ---------- | -------------------------------------- | --------- | ------- | +| `disabled` | `disabled` | If `true`, the reorder will be hidden. | `boolean` | `true` | ## Events -| Event | Detail | Description | -| ---------------- | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `ionItemReorder` | ItemReorderDetail | Event that needs to be listen to in order to respond to reorder action. `ion-reorder-group` uses this event to delegate to the user the reordering of data array. The complete() method exposed as | +| Event | Description | Detail | +| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | +| `ionItemReorder` | Event that needs to be listen to in order to respond to reorder action. `ion-reorder-group` uses this event to delegate to the user the reordering of data array. The complete() method exposed as | ItemReorderDetail | ## Methods diff --git a/core/src/components/reorder-group/reorder-group.tsx b/core/src/components/reorder-group/reorder-group.tsx index 015c3722dd..e3d212055b 100644 --- a/core/src/components/reorder-group/reorder-group.tsx +++ b/core/src/components/reorder-group/reorder-group.tsx @@ -37,7 +37,7 @@ export class ReorderGroup implements ComponentInterface { @Prop({ context: 'document' }) doc!: Document; /** - * If `true`, the reorder will be hidden. Defaults to `true`. + * If `true`, the reorder will be hidden. */ @Prop() disabled = true; @Watch('disabled') diff --git a/core/src/components/route-redirect/readme.md b/core/src/components/route-redirect/readme.md index 373ec4a317..fb6a0897d2 100644 --- a/core/src/components/route-redirect/readme.md +++ b/core/src/components/route-redirect/readme.md @@ -71,17 +71,17 @@ Another approach is to modify the value of `to`, since given `to` the value of ` ## Properties -| Property | Attribute | Description | Type | -| -------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | -| `from` | `from` | A redirect route, redirects "from" a URL "to" another URL. This property is that "from" URL. It needs to be an exact match of the navigated URL in order to apply. The path specified in this value is always an absolute path, even if the initial `/` slash is not specified. | `string` | -| `to` | `to` | A redirect route, redirects "from" a URL "to" another URL. This property is that "to" URL. When the defined `ion-route-redirect` rule matches, the router will redirect to the path specified in this property. The value of this property is always an absolute path inside the scope of routes defined in `ion-router` it can't be used with another router or to perfom a redirection to a different domain. Note that this is a virtual redirect, it will not cause a real browser refresh, again, it's a redirect inside the context of ion-router. When this property is not specified or his value is `undefined` the whole redirect route is noop, even if the "from" value matches. | `string \| undefined` | +| Property | Attribute | Description | Type | Default | +| -------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- | +| `from` | `from` | A redirect route, redirects "from" a URL "to" another URL. This property is that "from" URL. It needs to be an exact match of the navigated URL in order to apply. The path specified in this value is always an absolute path, even if the initial `/` slash is not specified. | `string` | `''` | +| `to` | `to` | A redirect route, redirects "from" a URL "to" another URL. This property is that "to" URL. When the defined `ion-route-redirect` rule matches, the router will redirect to the path specified in this property. The value of this property is always an absolute path inside the scope of routes defined in `ion-router` it can't be used with another router or to perfom a redirection to a different domain. Note that this is a virtual redirect, it will not cause a real browser refresh, again, it's a redirect inside the context of ion-router. When this property is not specified or his value is `undefined` the whole redirect route is noop, even if the "from" value matches. | `string \| undefined` | `undefined` | ## Events -| Event | Detail | Description | -| ------------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `ionRouteRedirectChanged` | | Internal event that fires when any value of this rule is added/removed from the DOM, or any of his public properties changes. `ion-router` captures this event in order to update his internal registry of router rules. | +| Event | Description | Detail | +| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | +| `ionRouteRedirectChanged` | Internal event that fires when any value of this rule is added/removed from the DOM, or any of his public properties changes. `ion-router` captures this event in order to update his internal registry of router rules. | void | ---------------------------------------------- diff --git a/core/src/components/route/readme.md b/core/src/components/route/readme.md index 865d6bfbf4..715476c299 100644 --- a/core/src/components/route/readme.md +++ b/core/src/components/route/readme.md @@ -9,18 +9,18 @@ Router is a component that can take a component, and render it when the Browser ## Properties -| Property | Attribute | Description | Type | -| ---------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | -| `componentProps` | -- | A key value `{ 'red': true, 'blue': 'white'}` containing props that should be passed to the defined component when rendered. | `undefined \| { [key: string]: any; }` | -| `component` | `component` | Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-nav`) when the route matches. The value of this property is not always the tagname of the component to load, in `ion-tabs` it actually refers to the name of the `ion-tab` to select. | `string` | -| `url` | `url` | Relative path that needs to match in order for this route to apply. Accepts paths similar to expressjs so that you can define parameters in the url /foo/:bar where bar would be available in incoming props. | `string` | +| Property | Attribute | Description | Type | Default | +| ---------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ----------- | +| `componentProps` | -- | A key value `{ 'red': true, 'blue': 'white'}` containing props that should be passed to the defined component when rendered. | `undefined \| { [key: string]: any; }` | `undefined` | +| `component` | `component` | Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-nav`) when the route matches. The value of this property is not always the tagname of the component to load, in `ion-tabs` it actually refers to the name of the `ion-tab` to select. | `string` | `undefined` | +| `url` | `url` | Relative path that needs to match in order for this route to apply. Accepts paths similar to expressjs so that you can define parameters in the url /foo/:bar where bar would be available in incoming props. | `string` | `''` | ## Events -| Event | Detail | Description | -| --------------------- | ------ | ------------------------------------------------------------------- | -| `ionRouteDataChanged` | any | Used internally by `ion-router` to know when this route did change. | +| Event | Description | Detail | +| --------------------- | ------------------------------------------------------------------- | ------ | +| `ionRouteDataChanged` | Used internally by `ion-router` to know when this route did change. | any | ---------------------------------------------- diff --git a/core/src/components/router-outlet/readme.md b/core/src/components/router-outlet/readme.md index c4875170da..40f29b8749 100644 --- a/core/src/components/router-outlet/readme.md +++ b/core/src/components/router-outlet/readme.md @@ -13,11 +13,11 @@ While RouterOutlet has methods for navigating around, it's recommended to use th ## Properties -| Property | Attribute | Description | Type | -| ----------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -| `animated` | `animated` | If `true`, the router-outlet should animate the transition of components. Default to `true`. | `boolean` | -| `animation` | -- | By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimateBuilder` functions. | `AnimationBuilder \| undefined` | -| `delegate` | -- | | `FrameworkDelegate \| undefined` | +| Property | Attribute | Description | Type | Default | +| ----------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| `animated` | `animated` | If `true`, the router-outlet should animate the transition of components. | `boolean` | `true` | +| `animation` | -- | By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimateBuilder` functions. | `AnimationBuilder \| undefined` | `undefined` | +| `delegate` | -- | | `FrameworkDelegate \| undefined` | `undefined` | ## Methods diff --git a/core/src/components/router-outlet/route-outlet.tsx b/core/src/components/router-outlet/route-outlet.tsx index d89eb6a011..9e83021a77 100644 --- a/core/src/components/router-outlet/route-outlet.tsx +++ b/core/src/components/router-outlet/route-outlet.tsx @@ -28,7 +28,7 @@ export class RouterOutlet implements ComponentInterface, NavOutlet { @Prop() delegate?: FrameworkDelegate; /** - * If `true`, the router-outlet should animate the transition of components. Default to `true`. + * If `true`, the router-outlet should animate the transition of components. */ @Prop() animated = true; diff --git a/core/src/components/router/readme.md b/core/src/components/router/readme.md index 1c8d65b870..259516b788 100644 --- a/core/src/components/router/readme.md +++ b/core/src/components/router/readme.md @@ -20,18 +20,18 @@ If you're using Angular, please see [ion-router-outlet](../router-outlet) instea ## Properties -| Property | Attribute | Description | Type | -| --------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | -| `root` | `root` | By default `ion-router` will match the routes at the root path ("/"). That can be changed when | `string` | -| `useHash` | `use-hash` | The router can work in two "modes": - With hash: `/index.html#/path/to/page` - Without hash: `/path/to/page` Using one or another might depend in the requirements of your app and/or where it's deployed. Usually "hash-less" navigation works better for SEO and it's more user friendly too, but it might requires additional server-side configuration in order to properly work. On the otherside hash-navigation is much easier to deploy, it even works over the file protocol. By default, this property is `true`, change to `false` to allow hash-less URLs. | `boolean` | +| Property | Attribute | Description | Type | Default | +| --------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- | +| `root` | `root` | By default `ion-router` will match the routes at the root path ("/"). That can be changed when | `string` | `'/'` | +| `useHash` | `use-hash` | The router can work in two "modes": - With hash: `/index.html#/path/to/page` - Without hash: `/path/to/page` Using one or another might depend in the requirements of your app and/or where it's deployed. Usually "hash-less" navigation works better for SEO and it's more user friendly too, but it might requires additional server-side configuration in order to properly work. On the otherside hash-navigation is much easier to deploy, it even works over the file protocol. By default, this property is `true`, change to `false` to allow hash-less URLs. | `boolean` | `true` | ## Events -| Event | Detail | Description | -| -------------------- | ----------------- | ----------------------------------------------- | -| `ionRouteDidChange` | RouterEventDetail | Emitted when the route had changed | -| `ionRouteWillChange` | RouterEventDetail | Event emitted when the route is about to change | +| Event | Description | Detail | +| -------------------- | ----------------------------------------------- | ----------------- | +| `ionRouteDidChange` | Emitted when the route had changed | RouterEventDetail | +| `ionRouteWillChange` | Event emitted when the route is about to change | RouterEventDetail | ## Methods diff --git a/core/src/components/searchbar/readme.md b/core/src/components/searchbar/readme.md index 38bafcecfa..bd57f70d6b 100644 --- a/core/src/components/searchbar/readme.md +++ b/core/src/components/searchbar/readme.md @@ -11,35 +11,35 @@ A Searchbar should be used instead of an input to search lists. A clear button i ## Properties -| Property | Attribute | Description | Type | -| ------------------ | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | -| `animated` | `animated` | If `true`, enable searchbar animation. Defaults to `false`. | `boolean` | -| `autocomplete` | `autocomplete` | Set the input's autocomplete property. Default `"off"`. | `"off" \| "on"` | -| `autocorrect` | `autocorrect` | Set the input's autocorrect property. Default `"off"`. | `"off" \| "on"` | -| `cancelButtonIcon` | `cancel-button-icon` | Set the cancel button icon. Only applies to `md` mode. Defaults to `"md-arrow-back"`. | `string` | -| `cancelButtonText` | `cancel-button-text` | Set the the cancel button text. Only applies to `ios` mode. Default: `"Cancel"`. | `string` | -| `clearIcon` | `clear-icon` | Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close"` for `md`. | `string \| 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` | -| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `250`. | `number` | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` | -| `placeholder` | `placeholder` | Set the input's placeholder. Default `"Search"`. | `string` | -| `searchIcon` | `search-icon` | The icon to use as the search icon. Defaults to `"search"`. | `string \| undefined` | -| `showCancelButton` | `show-cancel-button` | If `true`, show the cancel button. Defaults to `false`. | `boolean` | -| `spellcheck` | `spellcheck` | If `true`, enable spellcheck on the input. Defaults to `false`. | `boolean` | -| `type` | `type` | Set the type of the input. Values: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, `"url"`. Default `"search"`. | `string` | -| `value` | `value` | the value of the searchbar. | `null \| string \| undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------ | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | ----------------- | +| `animated` | `animated` | If `true`, enable searchbar animation. | `boolean` | `false` | +| `autocomplete` | `autocomplete` | Set the input's autocomplete property. | `"off" \| "on"` | `'off'` | +| `autocorrect` | `autocorrect` | Set the input's autocorrect property. | `"off" \| "on"` | `'off'` | +| `cancelButtonIcon` | `cancel-button-icon` | Set the cancel button icon. Only applies to `md` mode. | `string` | `'md-arrow-back'` | +| `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"` 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` | +| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. | `number` | `250` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `placeholder` | `placeholder` | Set the input's placeholder. | `string` | `'Search'` | +| `searchIcon` | `search-icon` | The icon to use as the search icon. | `string` | `'search'` | +| `showCancelButton` | `show-cancel-button` | If `true`, show the cancel button. | `boolean` | `false` | +| `spellcheck` | `spellcheck` | If `true`, enable spellcheck on the input. | `boolean` | `false` | +| `type` | `type` | Set the type of the input. | `"email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "url"` | `'search'` | +| `value` | `value` | the value of the searchbar. | `null \| string \| undefined` | `''` | ## Events -| Event | Detail | Description | -| ----------- | -------------------- | ----------------------------------------------- | -| `ionBlur` | | Emitted when the input loses focus. | -| `ionCancel` | | Emitted when the cancel button is clicked. | -| `ionChange` | TextInputChangeEvent | Emitted when the value has changed. | -| `ionClear` | | Emitted when the clear input button is clicked. | -| `ionFocus` | | Emitted when the input has focus. | -| `ionInput` | KeyboardEvent | Emitted when a keyboard input ocurred. | +| Event | Description | Detail | +| ----------- | ----------------------------------------------- | -------------------- | +| `ionBlur` | Emitted when the input loses focus. | void | +| `ionCancel` | Emitted when the cancel button is clicked. | void | +| `ionChange` | Emitted when the value has changed. | TextInputChangeEvent | +| `ionClear` | Emitted when the clear input button is clicked. | void | +| `ionFocus` | Emitted when the input has focus. | void | +| `ionInput` | Emitted when a keyboard input ocurred. | KeyboardEvent | ## Methods diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx index 72ed48883e..e317db86ab 100644 --- a/core/src/components/searchbar/searchbar.tsx +++ b/core/src/components/searchbar/searchbar.tsx @@ -35,32 +35,31 @@ export class Searchbar implements ComponentInterface { /** * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. */ @Prop() mode!: Mode; /** - * If `true`, enable searchbar animation. Defaults to `false`. + * If `true`, enable searchbar animation. */ @Prop() animated = false; /** - * Set the input's autocomplete property. Default `"off"`. + * Set the input's autocomplete property. */ @Prop() autocomplete: 'on' | 'off' = 'off'; /** - * Set the input's autocorrect property. Default `"off"`. + * Set the input's autocorrect property. */ @Prop() autocorrect: 'on' | 'off' = 'off'; /** - * Set the cancel button icon. Only applies to `md` mode. Defaults to `"md-arrow-back"`. + * Set the cancel button icon. Only applies to `md` mode. */ @Prop() cancelButtonIcon = 'md-arrow-back'; /** - * Set the the cancel button text. Only applies to `ios` mode. Default: `"Cancel"`. + * Set the the cancel button text. Only applies to `ios` mode. */ @Prop() cancelButtonText = 'Cancel'; @@ -70,7 +69,7 @@ export class Searchbar implements ComponentInterface { @Prop() clearIcon?: string; /** - * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `250`. + * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. */ @Prop() debounce = 250; @@ -80,29 +79,29 @@ export class Searchbar implements ComponentInterface { } /** - * Set the input's placeholder. Default `"Search"`. + * Set the input's placeholder. */ @Prop() placeholder = 'Search'; /** - * The icon to use as the search icon. Defaults to `"search"`. + * The icon to use as the search icon. */ - @Prop() searchIcon?: string; + @Prop() searchIcon = 'search'; /** - * If `true`, show the cancel button. Defaults to `false`. + * If `true`, show the cancel button. */ @Prop() showCancelButton = false; /** - * If `true`, enable spellcheck on the input. Defaults to `false`. + * If `true`, enable spellcheck on the input. */ @Prop() spellcheck = false; /** - * Set the type of the input. Values: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, `"url"`. Default `"search"`. + * Set the type of the input. */ - @Prop() type = 'search'; + @Prop() type: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url' = 'search'; /** * the value of the searchbar. @@ -357,7 +356,7 @@ export class Searchbar implements ComponentInterface { render() { const clearIcon = this.clearIcon || (this.mode === 'ios' ? 'ios-close-circle' : 'md-close'); - const searchIcon = this.searchIcon || 'search'; + const searchIcon = this.searchIcon; const cancelButton = this.showCancelButton && (