From a72fced6fe2c765f39b0b9c52b6858d6f64f2916 Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Thu, 11 Oct 2018 16:02:15 -0500 Subject: [PATCH] fix(all): docs for all missing props --- angular/src/directives/proxies.ts | 8 +- core/src/components.d.ts | 627 +++++++++++------- .../components/action-sheet/action-sheet.tsx | 9 +- core/src/components/action-sheet/readme.md | 8 +- core/src/components/alert/alert.tsx | 9 +- core/src/components/alert/readme.md | 8 +- core/src/components/backdrop/backdrop.tsx | 6 +- core/src/components/backdrop/readme.md | 10 +- core/src/components/button/button.tsx | 4 +- core/src/components/button/readme.md | 4 +- .../components/card-header/card-header.tsx | 2 +- core/src/components/card-header/readme.md | 2 +- core/src/components/checkbox/checkbox.tsx | 4 +- core/src/components/checkbox/readme.md | 4 +- .../components/chip-button/chip-button.tsx | 2 +- core/src/components/chip-button/readme.md | 2 +- core/src/components/content/content.tsx | 20 +- core/src/components/content/readme.md | 21 +- core/src/components/datetime/datetime.tsx | 5 +- core/src/components/datetime/readme.md | 4 +- core/src/components/fab-button/fab-button.tsx | 8 +- core/src/components/fab-button/readme.md | 8 +- core/src/components/fab-list/fab-list.tsx | 2 +- core/src/components/fab-list/readme.md | 2 +- core/src/components/fab/fab.tsx | 6 +- core/src/components/fab/readme.md | 12 +- core/src/components/footer/footer.tsx | 2 +- core/src/components/footer/readme.md | 8 +- core/src/components/grid/grid.tsx | 2 +- core/src/components/grid/readme.md | 6 +- core/src/components/header/header.tsx | 2 +- core/src/components/header/readme.md | 8 +- core/src/components/hide-when/hide-when.tsx | 4 +- core/src/components/hide-when/readme.md | 16 +- .../infinite-scroll/infinite-scroll.tsx | 2 +- core/src/components/infinite-scroll/readme.md | 2 +- core/src/components/input/input.tsx | 18 +- core/src/components/input/readme.md | 17 +- .../components/item-option/item-option.tsx | 4 +- core/src/components/item-option/readme.md | 4 +- .../components/item-options/item-options.tsx | 1 + .../components/item-sliding/item-sliding.tsx | 2 +- core/src/components/item-sliding/readme.md | 6 +- core/src/components/item/item.tsx | 6 +- core/src/components/item/readme.md | 6 +- core/src/components/list/list.tsx | 8 +- core/src/components/list/readme.md | 5 +- core/src/components/loading/loading.tsx | 12 +- core/src/components/loading/readme.md | 10 +- .../menu-controller/animations/overlay.ts | 1 - .../menu-controller/animations/push.ts | 1 - .../menu-controller/animations/reveal.ts | 1 - .../menu-controller/menu-controller.ts | 13 +- core/src/components/menu-controller/readme.md | 10 +- core/src/components/menu/menu.tsx | 35 +- core/src/components/menu/readme.md | 34 +- core/src/components/modal/modal.tsx | 11 +- core/src/components/modal/readme.md | 8 +- core/src/components/nav/nav.tsx | 23 +- core/src/components/nav/readme.md | 18 +- core/src/components/nav/view-controller.ts | 4 - .../picker-column/picker-column.tsx | 1 + .../picker-controller/picker-controller.tsx | 6 +- .../components/picker-controller/readme.md | 6 +- core/src/components/picker/picker.tsx | 10 +- core/src/components/picker/readme.md | 8 +- core/src/components/platform/readme.md | 6 +- core/src/components/popover/popover.tsx | 14 +- core/src/components/popover/readme.md | 10 +- .../components/radio-group/radio-group.tsx | 8 +- core/src/components/radio-group/readme.md | 12 +- core/src/components/radio/radio.tsx | 6 +- core/src/components/radio/readme.md | 4 +- core/src/components/range/range.tsx | 8 +- core/src/components/range/readme.md | 6 +- core/src/components/refresher/readme.md | 2 +- core/src/components/refresher/refresher.tsx | 2 +- core/src/components/reorder-group/readme.md | 9 +- .../reorder-group/reorder-group.tsx | 6 +- core/src/components/router-outlet/readme.md | 21 +- .../components/router-outlet/route-outlet.tsx | 31 +- core/src/components/router/readme.md | 4 +- core/src/components/router/router.tsx | 13 +- core/src/components/searchbar/readme.md | 37 +- core/src/components/searchbar/searchbar.tsx | 18 +- core/src/components/segment-button/readme.md | 4 +- .../segment-button/segment-button.tsx | 6 +- core/src/components/segment/readme.md | 2 +- core/src/components/segment/segment.tsx | 4 +- core/src/components/select-option/readme.md | 10 +- .../select-option/select-option.tsx | 4 +- core/src/components/select/readme.md | 7 +- core/src/components/select/select.tsx | 8 +- core/src/components/show-when/readme.md | 16 +- core/src/components/show-when/show-when.tsx | 4 +- core/src/components/slide/readme.md | 7 - core/src/components/slide/slide.tsx | 1 + core/src/components/slides/readme.md | 4 +- core/src/components/slides/slides.tsx | 4 +- core/src/components/spinner/readme.md | 2 +- core/src/components/spinner/spinner.tsx | 2 +- core/src/components/split-pane/readme.md | 2 +- core/src/components/split-pane/split-pane.tsx | 2 +- core/src/components/tab/readme.md | 32 +- core/src/components/tab/tab.tsx | 10 +- core/src/components/tabbar/readme.md | 20 +- core/src/components/tabbar/tabbar.tsx | 14 +- core/src/components/tabs/readme.md | 10 +- core/src/components/tabs/tabs.tsx | 8 +- core/src/components/textarea/readme.md | 13 +- core/src/components/textarea/textarea.tsx | 14 +- core/src/components/toast/readme.md | 8 +- core/src/components/toast/toast.tsx | 10 +- core/src/components/toggle/readme.md | 4 +- core/src/components/toggle/toggle.tsx | 18 +- core/src/components/virtual-scroll/readme.md | 21 +- .../virtual-scroll/virtual-scroll.tsx | 51 +- core/src/utils/haptic.ts | 2 +- core/stencil.config.ts | 4 + 119 files changed, 1026 insertions(+), 657 deletions(-) diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts index a6a97b7b00..215b3544cc 100644 --- a/angular/src/directives/proxies.ts +++ b/angular/src/directives/proxies.ts @@ -497,7 +497,7 @@ export class MenuToggle { } export declare interface Nav extends StencilComponents<'IonNav'> {} -@Component({ selector: 'ion-nav', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['swipeGesture', 'animated', 'animation', 'delegate', 'rootParams', 'root'] }) +@Component({ selector: 'ion-nav', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['delegate', 'swipeGesture', 'animated', 'animation', 'rootParams', 'root'] }) export class Nav { ionNavWillLoad: EventEmitter; ionNavWillChange: EventEmitter; @@ -506,7 +506,7 @@ export class Nav { constructor(r: ElementRef) { const el = r.nativeElement; proxyMethods(this, el, ['push', 'insert', 'insertPages', 'pop', 'popTo', 'popToRoot', 'removeIndex', 'setRoot', 'setPages', 'setRouteId', 'getRouteId', 'getActive', 'getByIndex', 'canGoBack', 'getPrevious']); - proxyInputs(this, el, ['swipeGesture', 'animated', 'animation', 'delegate', 'rootParams', 'root']); + proxyInputs(this, el, ['delegate', 'swipeGesture', 'animated', 'animation', 'rootParams', 'root']); proxyOutputs(this, el, ['ionNavWillLoad', 'ionNavWillChange', 'ionNavDidChange']); } } @@ -875,7 +875,7 @@ export class Thumbnail { } export declare interface Toggle extends StencilComponents<'IonToggle'> {} -@Component({ selector: 'ion-toggle', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['color', 'mode', 'name', 'checked', 'disabled', 'value'] }) +@Component({ selector: 'ion-toggle', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['mode', 'color', 'name', 'checked', 'disabled', 'value'] }) export class Toggle { ionChange: EventEmitter; ionFocus: EventEmitter; @@ -884,7 +884,7 @@ export class Toggle { constructor(r: ElementRef) { const el = r.nativeElement; - proxyInputs(this, el, ['color', 'mode', 'name', 'checked', 'disabled', 'value']); + proxyInputs(this, el, ['mode', 'color', 'name', 'checked', 'disabled', 'value']); proxyOutputs(this, el, ['ionChange', 'ionFocus', 'ionBlur', 'ionStyle']); } } diff --git a/core/src/components.d.ts b/core/src/components.d.ts index a07308d27e..a246068fe4 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -89,11 +89,11 @@ export namespace Components { interface IonActionSheet { /** - * If true, the action sheet will animate. Defaults to `true`. + * If `true`, the action sheet will animate. Defaults to `true`. */ '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. Defaults to `true`. */ 'backdropDismiss': boolean; /** @@ -117,7 +117,7 @@ export namespace Components { */ 'header'?: string; /** - * If true, the keyboard will be automatically dismissed when the overlay is presented. + * If `true`, the keyboard will be automatically dismissed when the overlay is presented. */ 'keyboardClose': boolean; /** @@ -146,17 +146,17 @@ export namespace Components { */ 'subHeader'?: string; /** - * If true, the action sheet will be translucent. Defaults to `false`. + * If `true`, the action sheet will be translucent. Defaults to `false`. */ 'translucent': boolean; } interface IonActionSheetAttributes extends StencilHTMLAttributes { /** - * If true, the action sheet will animate. Defaults to `true`. + * If `true`, the action sheet will animate. Defaults to `true`. */ '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. Defaults to `true`. */ 'backdropDismiss'?: boolean; /** @@ -176,7 +176,7 @@ export namespace Components { */ 'header'?: string; /** - * If true, the keyboard will be automatically dismissed when the overlay is presented. + * If `true`, the keyboard will be automatically dismissed when the overlay is presented. */ 'keyboardClose'?: boolean; /** @@ -217,7 +217,7 @@ export namespace Components { */ 'subHeader'?: string; /** - * If true, the action sheet will be translucent. Defaults to `false`. + * If `true`, the action sheet will be translucent. Defaults to `false`. */ 'translucent'?: boolean; } @@ -240,11 +240,11 @@ export namespace Components { interface IonAlert { /** - * If true, the alert will animate. Defaults to `true`. + * If `true`, the alert will animate. Defaults to `true`. */ '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. Defaults to `true`. */ 'backdropDismiss': boolean; /** @@ -272,7 +272,7 @@ export namespace Components { */ 'inputs': AlertInput[]; /** - * If true, the keyboard will be automatically dismissed when the overlay is presented. + * If `true`, the keyboard will be automatically dismissed when the overlay is presented. */ 'keyboardClose': boolean; /** @@ -305,17 +305,17 @@ export namespace Components { */ 'subHeader'?: string; /** - * If true, the alert will be translucent. Defaults to `false`. + * If `true`, the alert will be translucent. Defaults to `false`. */ 'translucent': boolean; } interface IonAlertAttributes extends StencilHTMLAttributes { /** - * If true, the alert will animate. Defaults to `true`. + * If `true`, the alert will animate. Defaults to `true`. */ '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. Defaults to `true`. */ 'backdropDismiss'?: boolean; /** @@ -339,7 +339,7 @@ export namespace Components { */ 'inputs'?: AlertInput[]; /** - * If true, the keyboard will be automatically dismissed when the overlay is presented. + * If `true`, the keyboard will be automatically dismissed when the overlay is presented. */ 'keyboardClose'?: boolean; /** @@ -384,7 +384,7 @@ export namespace Components { */ 'subHeader'?: string; /** - * If true, the alert will be translucent. Defaults to `false`. + * If `true`, the alert will be translucent. Defaults to `false`. */ 'translucent'?: boolean; } @@ -479,15 +479,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. Defaults to `true`. */ '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. Defaults to `true`. */ 'tappable': boolean; /** - * If true, the backdrop will be visible. Defaults to `true`. + * If `true`, the backdrop will be visible. Defaults to `true`. */ 'visible': boolean; } @@ -497,15 +497,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. Defaults to `true`. */ '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. Defaults to `true`. */ 'tappable'?: boolean; /** - * If true, the backdrop will be visible. Defaults to `true`. + * If `true`, the backdrop will be visible. Defaults to `true`. */ 'visible'?: boolean; } @@ -541,7 +541,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. Defaults to `false`. */ 'disabled': boolean; /** @@ -573,7 +573,7 @@ export namespace Components { */ 'size'?: 'small' | 'default' | 'large'; /** - * If true, activates a button with a heavier font weight. + * If `true`, activates a button with a heavier font weight. */ 'strong': boolean; /** @@ -591,7 +591,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. Defaults to `false`. */ 'disabled'?: boolean; /** @@ -631,7 +631,7 @@ export namespace Components { */ 'size'?: 'small' | 'default' | 'large'; /** - * If true, activates a button with a heavier font weight. + * If `true`, activates a button with a heavier font weight. */ 'strong'?: boolean; /** @@ -666,7 +666,7 @@ export namespace Components { */ 'mode': Mode; /** - * If true, the card header will be translucent. Defaults to `false`. + * If `true`, the card header will be translucent. Defaults to `false`. */ 'translucent': boolean; } @@ -680,7 +680,7 @@ export namespace Components { */ 'mode'?: Mode; /** - * If true, the card header will be translucent. Defaults to `false`. + * If `true`, the card header will be translucent. Defaults to `false`. */ 'translucent'?: boolean; } @@ -750,7 +750,7 @@ export namespace Components { interface IonCheckbox { /** - * If true, the checkbox is selected. Defaults to `false`. + * If `true`, the checkbox is selected. Defaults to `false`. */ 'checked': boolean; /** @@ -758,7 +758,7 @@ 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. Defaults to `false`. */ 'disabled': boolean; /** @@ -776,7 +776,7 @@ export namespace Components { } interface IonCheckboxAttributes extends StencilHTMLAttributes { /** - * If true, the checkbox is selected. Defaults to `false`. + * If `true`, the checkbox is selected. Defaults to `false`. */ 'checked'?: boolean; /** @@ -784,7 +784,7 @@ 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. Defaults to `false`. */ 'disabled'?: boolean; /** @@ -823,7 +823,7 @@ 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. Defaults to `false`. */ 'disabled': boolean; /** @@ -845,7 +845,7 @@ 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. Defaults to `false`. */ 'disabled'?: boolean; /** @@ -1126,15 +1126,21 @@ export namespace Components { } interface IonContent { + /** + * 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). + */ 'color'?: Color; /** - * 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. + * 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. */ 'forceOverscroll'?: boolean; /** - * If true, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent. + * If `true`, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent. */ 'fullscreen': boolean; + /** + * Returns the element where the actual scrolling takes places. This element is the one you could subscribe to `scroll` events or manually modify `scrollTop`, however, it's recommended to use the API provided by `ion-content`: Ie. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events and scrollToPoint() to scroll the content into a certain point. + */ 'getScrollElement': () => Promise; /** * Scroll by a specified X/Y distance in the component @@ -1166,13 +1172,16 @@ export namespace Components { 'scrollY': boolean; } interface IonContentAttributes extends StencilHTMLAttributes { + /** + * 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). + */ 'color'?: Color; /** - * 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. + * 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. */ 'forceOverscroll'?: boolean; /** - * If true, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent. + * If `true`, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent. */ 'fullscreen'?: boolean; /** @@ -1219,7 +1228,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. Defaults to `false`. */ 'disabled': boolean; /** @@ -1262,6 +1271,9 @@ export namespace Components { * 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`. */ 'monthValues'?: number[] | number | string; + /** + * Opens the datetime overlay. + */ 'open': () => Promise; /** * 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`. @@ -1302,7 +1314,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. Defaults to `false`. */ 'disabled'?: boolean; /** @@ -1381,7 +1393,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. Defaults to `false`. */ 'activated': boolean; /** @@ -1389,7 +1401,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. Defaults to `false`. */ 'disabled': boolean; /** @@ -1405,11 +1417,11 @@ export namespace Components { */ 'routerDirection'?: RouterDirection; /** - * If true, the fab button will show when in a fab-list. + * If `true`, the fab button will show when in a fab-list. */ 'show': boolean; /** - * If true, the fab button will be translucent. Defaults to `false`. + * If `true`, the fab button will be translucent. Defaults to `false`. */ 'translucent': boolean; /** @@ -1419,7 +1431,7 @@ export namespace Components { } 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. Defaults to `false`. */ 'activated'?: boolean; /** @@ -1427,7 +1439,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. Defaults to `false`. */ 'disabled'?: boolean; /** @@ -1451,11 +1463,11 @@ export namespace Components { */ 'routerDirection'?: RouterDirection; /** - * If true, the fab button will show when in a fab-list. + * If `true`, the fab button will show when in a fab-list. */ 'show'?: boolean; /** - * If true, the fab button will be translucent. Defaults to `false`. + * If `true`, the fab button will be translucent. Defaults to `false`. */ 'translucent'?: boolean; /** @@ -1466,7 +1478,7 @@ export namespace Components { 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. Defaults to `false`. */ 'activated': boolean; /** @@ -1476,7 +1488,7 @@ export namespace Components { } 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. Defaults to `false`. */ 'activated'?: boolean; /** @@ -1486,13 +1498,16 @@ export namespace Components { } interface IonFab { + /** + * 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. + */ 'activated': boolean; /** * Close an active FAB list container */ 'close': () => void; /** - * 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. + * 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. */ 'edge': boolean; /** @@ -1505,9 +1520,12 @@ export namespace Components { 'vertical'?: 'top' | 'bottom' | 'center'; } interface IonFabAttributes extends StencilHTMLAttributes { + /** + * 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. + */ 'activated'?: boolean; /** - * 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. + * 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. */ 'edge'?: boolean; /** @@ -1526,7 +1544,7 @@ export namespace Components { */ '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. Defaults to `false`. */ 'translucent': boolean; } @@ -1536,20 +1554,20 @@ export namespace Components { */ '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. Defaults to `false`. */ '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. Defaults to `false`. */ '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. Defaults to `false`. */ 'fixed'?: boolean; } @@ -1560,7 +1578,7 @@ export namespace Components { */ '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. Defaults to `false`. */ 'translucent': boolean; } @@ -1570,7 +1588,7 @@ export namespace Components { */ '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. Defaults to `false`. */ 'translucent'?: boolean; } @@ -1585,7 +1603,7 @@ export namespace Components { */ 'modes': string; /** - * If false, and two or more conditions are set, the element will hide when all are true. If true, and two or more conditions are set, the element will hide when at least one is true. + * If `false`, and two or more conditions are set, the element will hide when all are true. If `true`, and two or more conditions are set, the element will hide when at least one is true. */ 'or': boolean; /** @@ -1611,7 +1629,7 @@ export namespace Components { */ 'modes'?: string; /** - * If false, and two or more conditions are set, the element will hide when all are true. If true, and two or more conditions are set, the element will hide when at least one is true. + * If `false`, and two or more conditions are set, the element will hide when all are true. If `true`, and two or more conditions are set, the element will hide when at least one is true. */ 'or'?: boolean; /** @@ -1680,7 +1698,7 @@ export namespace Components { */ 'complete': () => void; /** - * 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. + * 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. */ 'disabled': boolean; /** @@ -1694,7 +1712,7 @@ export namespace Components { } interface IonInfiniteScrollAttributes extends StencilHTMLAttributes { /** - * 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. + * 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. */ 'disabled'?: boolean; /** @@ -1733,11 +1751,11 @@ export namespace Components { */ '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. Defaults to `false`. */ 'clearInput': boolean; /** - * If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. + * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. */ 'clearOnEdit'?: boolean; /** @@ -1749,7 +1767,7 @@ export namespace Components { */ 'debounce': number; /** - * If true, the user cannot interact with the input. Defaults to `false`. + * If `true`, the user cannot interact with the input. Defaults to `false`. */ 'disabled': boolean; /** @@ -1777,7 +1795,7 @@ export namespace Components { */ 'mode': Mode; /** - * 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. + * 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. */ 'multiple'?: boolean; /** @@ -1793,24 +1811,27 @@ export namespace Components { */ 'placeholder'?: string; /** - * If true, the user cannot modify the value. Defaults to `false`. + * If `true`, the user cannot modify the value. Defaults to `false`. */ 'readonly': boolean; /** - * If true, the user must fill in a value before submitting a form. + * If `true`, the user must fill in a value before submitting a form. */ 'required': boolean; /** * This is a nonstandard attribute supported by Safari that only applies when the type is `"search"`. Its value should be a nonnegative decimal integer. */ 'results'?: number; + /** + * Sets focus on the specified `ion-input`. Use this method instead of the global `input.focus()`. + */ 'setFocus': () => void; /** * 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. */ '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. Defaults to `false`. */ 'spellcheck': boolean; /** @@ -1848,11 +1869,11 @@ export namespace Components { */ '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. Defaults to `false`. */ 'clearInput'?: boolean; /** - * If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. + * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. */ 'clearOnEdit'?: boolean; /** @@ -1864,7 +1885,7 @@ export namespace Components { */ 'debounce'?: number; /** - * If true, the user cannot interact with the input. Defaults to `false`. + * If `true`, the user cannot interact with the input. Defaults to `false`. */ 'disabled'?: boolean; /** @@ -1892,7 +1913,7 @@ export namespace Components { */ 'mode'?: Mode; /** - * 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. + * 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. */ 'multiple'?: boolean; /** @@ -1936,11 +1957,11 @@ export namespace Components { */ 'placeholder'?: string; /** - * If true, the user cannot modify the value. Defaults to `false`. + * If `true`, the user cannot modify the value. Defaults to `false`. */ 'readonly'?: boolean; /** - * If true, the user must fill in a value before submitting a form. + * If `true`, the user must fill in a value before submitting a form. */ 'required'?: boolean; /** @@ -1952,7 +1973,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. Defaults to `false`. */ 'spellcheck'?: boolean; /** @@ -1999,11 +2020,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. Defaults to `false`. */ '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. Defaults to `false`. */ 'expandable': boolean; /** @@ -2021,11 +2042,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. Defaults to `false`. */ '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. Defaults to `false`. */ 'expandable'?: boolean; /** @@ -2066,7 +2087,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. Defaults to `false`. */ 'disabled': boolean; /** @@ -2080,7 +2101,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. Defaults to `false`. */ 'disabled'?: boolean; /** @@ -2091,7 +2112,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. Defaults to `false`. */ 'button': boolean; /** @@ -2099,7 +2120,7 @@ export namespace Components { */ 'color'?: Color; /** - * 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. + * 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. */ 'detail'?: boolean; /** @@ -2107,7 +2128,7 @@ export namespace Components { */ 'detailIcon': string; /** - * If true, the user cannot interact with the item. Defaults to `false`. + * If `true`, the user cannot interact with the item. Defaults to `false`. */ 'disabled': boolean; /** @@ -2133,7 +2154,7 @@ export namespace Components { } 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. Defaults to `false`. */ 'button'?: boolean; /** @@ -2141,7 +2162,7 @@ export namespace Components { */ 'color'?: Color; /** - * 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. + * 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. */ 'detail'?: boolean; /** @@ -2149,7 +2170,7 @@ export namespace Components { */ 'detailIcon'?: string; /** - * If true, the user cannot interact with the item. Defaults to `false`. + * If `true`, the user cannot interact with the item. Defaults to `false`. */ 'disabled'?: boolean; /** @@ -2229,9 +2250,12 @@ export namespace Components { } interface IonList { + /** + * If `ion-item-sliding` are used inside the list, this method closes any open sliding item. Returns `true` if an actual `ion-item-sliding` is closed. + */ '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. Defaults to `false`. */ 'inset': boolean; /** @@ -2245,7 +2269,7 @@ export namespace Components { } 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. Defaults to `false`. */ 'inset'?: boolean; /** @@ -2276,11 +2300,11 @@ export namespace Components { interface IonLoading { /** - * If true, the loading indicator will animate. Defaults to `true`. + * If `true`, the loading indicator will animate. Defaults to `true`. */ '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. Defaults to `false`. */ 'backdropDismiss': boolean; /** @@ -2300,7 +2324,7 @@ export namespace Components { */ 'enterAnimation'?: AnimationBuilder; /** - * If true, the keyboard will be automatically dismissed when the overlay is presented. + * If `true`, the keyboard will be automatically dismissed when the overlay is presented. */ 'keyboardClose': boolean; /** @@ -2329,7 +2353,7 @@ 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. Defaults to `true`. */ 'showBackdrop': boolean; /** @@ -2337,17 +2361,17 @@ export namespace Components { */ 'spinner'?: string; /** - * If true, the loading indicator will be translucent. Defaults to `false`. + * If `true`, the loading indicator will be translucent. Defaults to `false`. */ 'translucent': boolean; } interface IonLoadingAttributes extends StencilHTMLAttributes { /** - * If true, the loading indicator will animate. Defaults to `true`. + * If `true`, the loading indicator will animate. Defaults to `true`. */ '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. Defaults to `false`. */ 'backdropDismiss'?: boolean; /** @@ -2363,7 +2387,7 @@ export namespace Components { */ 'enterAnimation'?: AnimationBuilder; /** - * If true, the keyboard will be automatically dismissed when the overlay is presented. + * If `true`, the keyboard will be automatically dismissed when the overlay is presented. */ 'keyboardClose'?: boolean; /** @@ -2404,7 +2428,7 @@ export namespace Components { 'onIonLoadingWillPresent'?: (event: CustomEvent) => void; '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. Defaults to `true`. */ 'showBackdrop'?: boolean; /** @@ -2412,7 +2436,7 @@ export namespace Components { */ 'spinner'?: string; /** - * If true, the loading indicator will be translucent. Defaults to `false`. + * If `true`, the loading indicator will be translucent. Defaults to `false`. */ 'translucent'?: boolean; } @@ -2477,21 +2501,24 @@ export namespace Components { */ 'getOpen': () => Promise; /** - * Returns true if any menu is currently animating. + * Returns `true` if any menu is currently animating. */ 'isAnimating': () => Promise; /** - * Returns true if the specified menu is enabled. + * Returns `true` if the specified menu is enabled. */ 'isEnabled': (menuId?: string | null | undefined) => Promise; /** - * Returns true if the specified menu is open. If the menu is not specified, it will return true if any menu is currently open. + * Returns `true` if the specified menu is open. If the menu is not specified, it will return true if any menu is currently open. */ 'isOpen': (menuId?: string | null | undefined) => Promise; /** * Open the menu. */ 'open': (menuId?: string | null | undefined) => Promise; + /** + * Registers a new animation that can be used in any `ion-menu`. ``` * * ``` + */ 'registerAnimation': (name: string, animation: AnimationBuilder) => void; /** * Used to enable or disable the ability to swipe open the menu. @@ -2526,16 +2553,25 @@ export namespace Components { } interface IonMenu { + /** + * Closes the menu. If the menu is already closed or it can't be closed, it returns `false`. + */ 'close': (animated?: boolean) => Promise; /** * The content's id the menu should use. */ 'contentId'?: string; /** - * If true, the menu is disabled. Default `false`. + * If `true`, the menu is disabled. Default `false`. */ 'disabled': boolean; + /** + * Returns `true` is the menu is active. A menu is active when it can be opened or closed, meaning it's enabled and it's not part of a `ion-split-pane`. + */ 'isActive': () => Promise; + /** + * Returns `true` is the menu is open. + */ 'isOpen': () => Promise; /** * The edge threshold for dragging the menu open. If a drag/swipe happens over this value, the menu is not triggered. @@ -2545,16 +2581,25 @@ export namespace Components { * An id for the menu. */ 'menuId'?: string; + /** + * Opens the menu. If the menu is already open or it can't be opened, it returns `false`. + */ 'open': (animated?: boolean) => Promise; + /** + * Opens or closes the button. If the operation can't be completed successfully, it returns `false`. + */ 'setOpen': (shouldOpen: boolean, animated?: boolean) => Promise; /** * Which side of the view the menu should be placed. Default `"start"`. */ 'side': Side; /** - * If true, swiping the menu is enabled. Default `true`. + * If `true`, swiping the menu is enabled. Default `true`. */ 'swipeGesture': boolean; + /** + * Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it. If the operation can't be completed successfully, it returns `false`. + */ 'toggle': (animated?: boolean) => Promise; /** * The display type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`. @@ -2567,7 +2612,7 @@ export namespace Components { */ 'contentId'?: string; /** - * If true, the menu is disabled. Default `false`. + * If `true`, the menu is disabled. Default `false`. */ 'disabled'?: boolean; /** @@ -2603,7 +2648,7 @@ export namespace Components { */ 'side'?: Side; /** - * If true, swiping the menu is enabled. Default `true`. + * If `true`, swiping the menu is enabled. Default `true`. */ 'swipeGesture'?: boolean; /** @@ -2630,11 +2675,11 @@ export namespace Components { interface IonModal { /** - * If true, the modal will animate. Defaults to `true`. + * If `true`, the modal will animate. Defaults to `true`. */ '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. Defaults to `true`. */ 'backdropDismiss': boolean; /** @@ -2659,7 +2704,7 @@ export namespace Components { */ 'enterAnimation'?: AnimationBuilder; /** - * If true, the keyboard will be automatically dismissed when the overlay is presented. + * If `true`, the keyboard will be automatically dismissed when the overlay is presented. */ 'keyboardClose': boolean; /** @@ -2684,17 +2729,17 @@ 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. Defaults to `true`. */ 'showBackdrop': boolean; } interface IonModalAttributes extends StencilHTMLAttributes { /** - * If true, the modal will animate. Defaults to `true`. + * If `true`, the modal will animate. Defaults to `true`. */ '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. Defaults to `true`. */ 'backdropDismiss'?: boolean; /** @@ -2715,7 +2760,7 @@ export namespace Components { */ 'enterAnimation'?: AnimationBuilder; /** - * If true, the keyboard will be automatically dismissed when the overlay is presented. + * If `true`, the keyboard will be automatically dismissed when the overlay is presented. */ 'keyboardClose'?: boolean; /** @@ -2752,7 +2797,7 @@ export namespace Components { 'onIonModalWillPresent'?: (event: CustomEvent) => void; '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. Defaults to `true`. */ 'showBackdrop'?: boolean; } @@ -2804,12 +2849,15 @@ export namespace Components { interface IonNav { /** - * If the nav should animate the components or not + * If `true`, the nav should animate the transition of components. Default to `true`. */ 'animated': boolean; + /** + * 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. + */ 'animation'?: AnimationBuilder; /** - * Returns true or false if the current view can go back + * Returns `true` or false if the current view can go back */ 'canGoBack': (view?: ViewController | undefined) => Promise; 'delegate'?: FrameworkDelegate; @@ -2872,15 +2920,18 @@ export namespace Components { 'setRoot': (component: T, componentProps?: ComponentProps | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; 'setRouteId': (id: string, params: { [key: string]: any; } | undefined, direction: number) => Promise; /** - * If the nav component should allow for swipe-to-go-back + * If the nav component should allow for swipe-to-go-back. */ 'swipeGesture'?: boolean; } interface IonNavAttributes extends StencilHTMLAttributes { /** - * If the nav should animate the components or not + * If `true`, the nav should animate the transition of components. Default to `true`. */ 'animated'?: boolean; + /** + * 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. + */ 'animation'?: AnimationBuilder; 'delegate'?: FrameworkDelegate; /** @@ -2904,7 +2955,7 @@ export namespace Components { */ 'rootParams'?: ComponentProps; /** - * If the nav component should allow for swipe-to-go-back + * If the nav component should allow for swipe-to-go-back. */ 'swipeGesture'?: boolean; } @@ -2938,19 +2989,28 @@ export namespace Components { } interface IonPickerController { + /** + * Create a picker overlay with picker options. + */ 'create': (opts: PickerOptions) => Promise; + /** + * Dismiss the open picker overlay. + */ 'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise; + /** + * Get the most recently opened picker overlay. + */ 'getTop': () => Promise; } interface IonPickerControllerAttributes extends StencilHTMLAttributes {} interface IonPicker { /** - * If true, the picker will animate. Defaults to `true`. + * If `true`, the picker will animate. Defaults to `true`. */ '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. Defaults to `true`. */ 'backdropDismiss': boolean; /** @@ -2982,7 +3042,7 @@ export namespace Components { */ 'getColumn': (name: string) => Promise; /** - * If true, the keyboard will be automatically dismissed when the overlay is presented. + * If `true`, the keyboard will be automatically dismissed when the overlay is presented. */ 'keyboardClose': boolean; /** @@ -3007,17 +3067,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. Defaults to `true`. */ 'showBackdrop': boolean; } interface IonPickerAttributes extends StencilHTMLAttributes { /** - * If true, the picker will animate. Defaults to `true`. + * If `true`, the picker will animate. Defaults to `true`. */ '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. Defaults to `true`. */ 'backdropDismiss'?: boolean; /** @@ -3041,7 +3101,7 @@ export namespace Components { */ 'enterAnimation'?: AnimationBuilder; /** - * If true, the keyboard will be automatically dismissed when the overlay is presented. + * If `true`, the keyboard will be automatically dismissed when the overlay is presented. */ 'keyboardClose'?: boolean; /** @@ -3078,7 +3138,7 @@ export namespace Components { 'onIonPickerWillPresent'?: (event: CustomEvent) => void; '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. Defaults to `true`. */ 'showBackdrop'?: boolean; } @@ -3101,11 +3161,11 @@ export namespace Components { interface IonPopover { /** - * If true, the popover will animate. Defaults to `true`. + * If `true`, the popover will animate. Defaults to `true`. */ '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. Defaults to `true`. */ 'backdropDismiss': boolean; /** @@ -3134,7 +3194,7 @@ export namespace Components { */ 'event': any; /** - * If true, the keyboard will be automatically dismissed when the overlay is presented. + * If `true`, the keyboard will be automatically dismissed when the overlay is presented. */ 'keyboardClose': boolean; /** @@ -3159,21 +3219,21 @@ 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. Defaults to `true`. */ 'showBackdrop': boolean; /** - * If true, the popover will be translucent. Defaults to `false`. + * If `true`, the popover will be translucent. Defaults to `false`. */ 'translucent': boolean; } interface IonPopoverAttributes extends StencilHTMLAttributes { /** - * If true, the popover will animate. Defaults to `true`. + * If `true`, the popover will animate. Defaults to `true`. */ '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. Defaults to `true`. */ 'backdropDismiss'?: boolean; /** @@ -3198,7 +3258,7 @@ export namespace Components { */ 'event'?: any; /** - * If true, the keyboard will be automatically dismissed when the overlay is presented. + * If `true`, the keyboard will be automatically dismissed when the overlay is presented. */ 'keyboardClose'?: boolean; /** @@ -3235,17 +3295,23 @@ export namespace Components { 'onIonPopoverWillPresent'?: (event: CustomEvent) => void; '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. Defaults to `true`. */ 'showBackdrop'?: boolean; /** - * If true, the popover will be translucent. Defaults to `false`. + * If `true`, the popover will be translucent. Defaults to `false`. */ 'translucent'?: boolean; } interface IonRadioGroup { + /** + * If `true`, the radios can be deselected. Default false. + */ 'allowEmptySelection': boolean; + /** + * If `true`, the user cannot interact with the radio group. Default false. + */ 'disabled': boolean; /** * The name of the control, which is submitted with the form data. @@ -3257,7 +3323,13 @@ export namespace Components { 'value'?: any | null; } interface IonRadioGroupAttributes extends StencilHTMLAttributes { + /** + * If `true`, the radios can be deselected. Default false. + */ 'allowEmptySelection'?: boolean; + /** + * If `true`, the user cannot interact with the radio group. Default false. + */ 'disabled'?: boolean; /** * The name of the control, which is submitted with the form data. @@ -3275,13 +3347,16 @@ export namespace Components { interface IonRadio { /** - * If true, the radio is selected. Defaults to `false`. + * If `true`, the radio is selected. Defaults to `false`. */ 'checked': boolean; /** * 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). */ 'color'?: Color; + /** + * If `true`, the user cannot interact with the radio. Defaults to `false`. + */ 'disabled': boolean; /** * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. @@ -3298,13 +3373,16 @@ export namespace Components { } interface IonRadioAttributes extends StencilHTMLAttributes { /** - * If true, the radio is selected. Defaults to `false`. + * If `true`, the radio is selected. Defaults to `false`. */ 'checked'?: boolean; /** * 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). */ 'color'?: Color; + /** + * If `true`, the user cannot interact with the radio. Defaults to `false`. + */ 'disabled'?: boolean; /** * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. @@ -3353,6 +3431,9 @@ export namespace Components { * How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value. Default `0`. */ 'debounce': number; + /** + * If `true`, the user cannot interact with the range. Defaults to `false`. + */ 'disabled': boolean; /** * Show two knobs. Defaults to `false`. @@ -3375,11 +3456,11 @@ 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. Defaults to `false`. */ '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. Defaults to `false`. */ 'snaps': boolean; /** @@ -3400,6 +3481,9 @@ export namespace Components { * How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value. Default `0`. */ 'debounce'?: number; + /** + * If `true`, the user cannot interact with the range. Defaults to `false`. + */ 'disabled'?: boolean; /** * Show two knobs. Defaults to `false`. @@ -3438,11 +3522,11 @@ 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. Defaults to `false`. */ '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. Defaults to `false`. */ 'snaps'?: boolean; /** @@ -3506,7 +3590,7 @@ export namespace Components { */ 'complete': () => void; /** - * If true, the refresher will be hidden. Defaults to `false`. + * If `true`, the refresher will be hidden. Defaults to `false`. */ 'disabled': boolean; /** @@ -3532,7 +3616,7 @@ export namespace Components { */ 'closeDuration'?: string; /** - * If true, the refresher will be hidden. Defaults to `false`. + * If `true`, the refresher will be hidden. Defaults to `false`. */ 'disabled'?: boolean; /** @@ -3562,15 +3646,18 @@ export namespace Components { } interface IonReorderGroup { + /** + * This method must be called once the `ionItemReorder` event is handled in order to complete the reorder operation. + */ 'complete': (listOrReorder?: boolean | any[] | undefined) => Promise; /** - * If true, the reorder will be hidden. Defaults to `true`. + * If `true`, the reorder will be hidden. Defaults to `true`. */ 'disabled': boolean; } interface IonReorderGroupAttributes extends StencilHTMLAttributes { /** - * If true, the reorder will be hidden. Defaults to `true`. + * If `true`, the reorder will be hidden. Defaults to `true`. */ 'disabled'?: boolean; /** @@ -3649,13 +3736,16 @@ export namespace Components { } interface IonRouterOutlet { + /** + * If `true`, the router-outlet should animate the transition of components. Default to `true`. + */ 'animated': boolean; + /** + * 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. + */ 'animation'?: AnimationBuilder; 'commit': (enteringEl: HTMLElement, leavingEl: HTMLElement | undefined, opts?: RouterOutletOptions | undefined) => Promise; 'delegate'?: FrameworkDelegate; - /** - * Returns the ID for the current route - */ 'getRouteId': () => Promise; /** * Set the root component for the given navigation stack @@ -3664,7 +3754,13 @@ export namespace Components { 'setRouteId': (id: string, params: { [key: string]: any; } | undefined, direction: number) => Promise; } interface IonRouterOutletAttributes extends StencilHTMLAttributes { + /** + * If `true`, the router-outlet should animate the transition of components. Default to `true`. + */ 'animated'?: boolean; + /** + * 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. + */ 'animation'?: AnimationBuilder; 'delegate'?: FrameworkDelegate; 'onIonNavDidChange'?: (event: CustomEvent) => void; @@ -3673,11 +3769,14 @@ export namespace Components { } interface IonRouter { + /** + * Go back to previous page in the window.history. + */ 'goBack': () => Promise; 'navChanged': (intent: number) => Promise; 'printDebug': () => void; /** - * Navigate to the specified URL + * Navigate to the specified URL. */ 'push': (url: string, direction?: RouterDirection) => Promise; /** @@ -3713,17 +3812,17 @@ export namespace Components { interface IonSearchbar { /** - * If true, enable searchbar animation. Default `false`. + * If `true`, enable searchbar animation. Default `false`. */ 'animated': boolean; /** - * Set the input's autocomplete property. Values: `"on"`, `"off"`. Default `"off"`. + * Set the input's autocomplete property. Default `"off"`. */ - 'autocomplete': string; + 'autocomplete': 'on' | 'off'; /** - * Set the input's autocorrect property. Values: `"on"`, `"off"`. Default `"off"`. + * Set the input's autocorrect property. Default `"off"`. */ - 'autocorrect': string; + 'autocorrect': 'on' | 'off'; /** * Set the cancel button icon. Only applies to `md` mode. Defaults to `"md-arrow-back"`. */ @@ -3756,13 +3855,16 @@ export namespace Components { * The icon to use as the search icon. Defaults to `"search"`. */ '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. Default `false`. + * If `true`, show the cancel button. Default `false`. */ 'showCancelButton': boolean; /** - * If true, enable spellcheck on the input. Default `false`. + * If `true`, enable spellcheck on the input. Default `false`. */ 'spellcheck': boolean; /** @@ -3776,17 +3878,17 @@ export namespace Components { } interface IonSearchbarAttributes extends StencilHTMLAttributes { /** - * If true, enable searchbar animation. Default `false`. + * If `true`, enable searchbar animation. Default `false`. */ 'animated'?: boolean; /** - * Set the input's autocomplete property. Values: `"on"`, `"off"`. Default `"off"`. + * Set the input's autocomplete property. Default `"off"`. */ - 'autocomplete'?: string; + 'autocomplete'?: 'on' | 'off'; /** - * Set the input's autocorrect property. Values: `"on"`, `"off"`. Default `"off"`. + * Set the input's autocorrect property. Default `"off"`. */ - 'autocorrect'?: string; + 'autocorrect'?: 'on' | 'off'; /** * Set the cancel button icon. Only applies to `md` mode. Defaults to `"md-arrow-back"`. */ @@ -3844,11 +3946,11 @@ export namespace Components { */ 'searchIcon'?: string; /** - * If true, show the cancel button. Default `false`. + * If `true`, show the cancel button. Default `false`. */ 'showCancelButton'?: boolean; /** - * If true, enable spellcheck on the input. Default `false`. + * If `true`, enable spellcheck on the input. Default `false`. */ 'spellcheck'?: boolean; /** @@ -3862,14 +3964,14 @@ export namespace Components { } interface IonSegmentButton { - /** - * If true, the segment button is selected. Defaults to `false`. - */ 'checked': boolean; /** * 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). */ 'color'?: Color; + /** + * If `true`, the user cannot interact with the segment button. Default false. + */ 'disabled': boolean; /** * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. @@ -3881,14 +3983,14 @@ export namespace Components { 'value': string; } interface IonSegmentButtonAttributes extends StencilHTMLAttributes { - /** - * If true, the segment button is selected. Defaults to `false`. - */ 'checked'?: boolean; /** * 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). */ 'color'?: Color; + /** + * If `true`, the user cannot interact with the segment button. Default false. + */ 'disabled'?: boolean; /** * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. @@ -3909,6 +4011,9 @@ export namespace Components { * 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). */ 'color'?: Color; + /** + * If `true`, the user cannot interact with the segment. Defaults to `false`. + */ 'disabled': boolean; /** * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. @@ -3924,6 +4029,9 @@ export namespace Components { * 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). */ 'color'?: Color; + /** + * If `true`, the user cannot interact with the segment. Defaults to `false`. + */ 'disabled'?: boolean; /** * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. @@ -3941,11 +4049,11 @@ 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. Defaults to `false`. */ 'disabled': boolean; /** - * If true, the element is selected. + * If `true`, the element is selected. */ 'selected': boolean; /** @@ -3955,7 +4063,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. Defaults to `false`. */ 'disabled'?: boolean; /** @@ -3967,7 +4075,7 @@ export namespace Components { */ 'onIonSelectOptionDidUnload'?: (event: CustomEvent) => void; /** - * If true, the element is selected. + * If `true`, the element is selected. */ 'selected'?: boolean; /** @@ -4019,7 +4127,7 @@ export namespace Components { */ 'cancelText': string; /** - * If true, the user cannot interact with the select. Defaults to `false`. + * If `true`, the user cannot interact with the select. Defaults to `false`. */ 'disabled': boolean; /** @@ -4035,7 +4143,7 @@ export namespace Components { */ 'mode': Mode; /** - * If true, the select can accept multiple values. + * If `true`, the select can accept multiple values. */ 'multiple': boolean; /** @@ -4046,6 +4154,9 @@ export namespace Components { * The text to display on the ok button. Default: `OK`. */ 'okText': string; + /** + * Opens the select overlay, it could be an alert, action-sheet or popover, based in `ion-select` settings. + */ 'open': (ev?: UIEvent | undefined) => Promise; /** * The text to display when the select is empty. @@ -4066,7 +4177,7 @@ export namespace Components { */ 'cancelText'?: string; /** - * If true, the user cannot interact with the select. Defaults to `false`. + * If `true`, the user cannot interact with the select. Defaults to `false`. */ 'disabled'?: boolean; /** @@ -4082,7 +4193,7 @@ export namespace Components { */ 'mode'?: Mode; /** - * If true, the select can accept multiple values. + * If `true`, the select can accept multiple values. */ 'multiple'?: boolean; /** @@ -4137,7 +4248,7 @@ export namespace Components { */ 'modes': string; /** - * If false, and two or more conditions are set, the element will show when all are true. If true, and two or more conditions are set, the element will show when at least one is true. + * If `false`, and two or more conditions are set, the element will show when all are true. If `true`, and two or more conditions are set, the element will show when at least one is true. */ 'or': boolean; /** @@ -4163,7 +4274,7 @@ export namespace Components { */ 'modes'?: string; /** - * If false, and two or more conditions are set, the element will show when all are true. If true, and two or more conditions are set, the element will show when at least one is true. + * If `false`, and two or more conditions are set, the element will show when all are true. If `true`, and two or more conditions are set, the element will show when at least one is true. */ 'or'?: boolean; /** @@ -4240,11 +4351,11 @@ export namespace Components { */ 'options': any; /** - * If true, show the pagination. Defaults to `false`. + * If `true`, show the pagination. Defaults to `false`. */ 'pager': boolean; /** - * If true, show the scrollbar. Defaults to `false`. + * If `true`, show the scrollbar. Defaults to `false`. */ 'scrollbar': boolean; /** @@ -4346,11 +4457,11 @@ export namespace Components { */ 'options'?: any; /** - * If true, show the pagination. Defaults to `false`. + * If `true`, show the pagination. Defaults to `false`. */ 'pager'?: boolean; /** - * If true, show the scrollbar. Defaults to `false`. + * If `true`, show the scrollbar. Defaults to `false`. */ 'scrollbar'?: boolean; } @@ -4369,7 +4480,7 @@ export namespace Components { */ 'name'?: SpinnerTypes; /** - * If true, the spinner's animation will be paused. Defaults to `false`. + * If `true`, the spinner's animation will be paused. Defaults to `false`. */ 'paused': boolean; } @@ -4387,14 +4498,14 @@ export namespace Components { */ 'name'?: SpinnerTypes; /** - * If true, the spinner's animation will be paused. Defaults to `false`. + * If `true`, the spinner's animation will be paused. Defaults to `false`. */ 'paused'?: boolean; } interface IonSplitPane { /** - * If true, the split pane will be hidden. Defaults to `false`. + * If `true`, the split pane will be hidden. Defaults to `false`. */ 'disabled': boolean; /** @@ -4404,7 +4515,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. Defaults to `false`. */ 'disabled'?: boolean; /** @@ -4423,7 +4534,7 @@ export namespace Components { interface IonTab { /** - * If true, sets the tab as the active tab. + * If `true`, sets the tab as the active tab. */ 'active': boolean; /** @@ -4447,7 +4558,7 @@ export namespace Components { */ 'delegate'?: FrameworkDelegate; /** - * If true, the user cannot interact with the tab. Defaults to `false`. + * If `true`, the user cannot interact with the tab. Defaults to `false`. */ 'disabled': boolean; /** @@ -4467,7 +4578,7 @@ export namespace Components { */ 'name'?: string; /** - * If true, the tab will be selected. Defaults to `false`. + * If `true`, the tab will be selected. Defaults to `false`. */ 'selected': boolean; /** @@ -4475,17 +4586,17 @@ export namespace Components { */ 'setActive': () => Promise; /** - * If true, the tab button is visible within the tabbar. Defaults to `true`. + * If `true`, the tab button is visible within the tabbar. Defaults to `true`. */ 'show': boolean; /** - * If true, hide the tabs on child pages. + * If `true`, hide the tabs on child pages. */ 'tabsHideOnSubPages': boolean; } interface IonTabAttributes extends StencilHTMLAttributes { /** - * If true, sets the tab as the active tab. + * If `true`, sets the tab as the active tab. */ 'active'?: boolean; /** @@ -4509,7 +4620,7 @@ export namespace Components { */ 'delegate'?: FrameworkDelegate; /** - * If true, the user cannot interact with the tab. Defaults to `false`. + * If `true`, the user cannot interact with the tab. Defaults to `false`. */ 'disabled'?: boolean; /** @@ -4537,29 +4648,35 @@ export namespace Components { */ 'onIonTabMutated'?: (event: CustomEvent) => void; /** - * If true, the tab will be selected. Defaults to `false`. + * If `true`, the tab will be selected. Defaults to `false`. */ 'selected'?: boolean; /** - * If true, the tab button is visible within the tabbar. Defaults to `true`. + * If `true`, the tab button is visible within the tabbar. Defaults to `true`. */ 'show'?: boolean; /** - * If true, hide the tabs on child pages. + * If `true`, hide the tabs on child pages. */ 'tabsHideOnSubPages'?: boolean; } interface IonTabbar { + /** + * 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). + */ 'color'?: Color; /** - * If true, show the tab highlight bar under the selected tab. + * If `true`, show the tab highlight bar under the selected tab. */ 'highlight': boolean; /** * Set the layout of the text and icon in the tabbar. Available options: `"icon-top"`, `"icon-start"`, `"icon-end"`, `"icon-bottom"`, `"icon-hide"`, `"label-hide"`. */ 'layout': TabbarLayout; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ 'mode': Mode; /** * Set the position of the tabbar, relative to the content. Available options: `"top"`, `"bottom"`. @@ -4574,20 +4691,26 @@ export namespace Components { */ 'tabs': HTMLIonTabElement[]; /** - * If true, the tabbar will be translucent. Defaults to `false`. + * If `true`, the tabbar will be translucent. Defaults to `false`. */ 'translucent': boolean; } interface IonTabbarAttributes extends StencilHTMLAttributes { + /** + * 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). + */ 'color'?: Color; /** - * If true, show the tab highlight bar under the selected tab. + * If `true`, show the tab highlight bar under the selected tab. */ 'highlight'?: boolean; /** * Set the layout of the text and icon in the tabbar. Available options: `"icon-top"`, `"icon-start"`, `"icon-end"`, `"icon-bottom"`, `"icon-hide"`, `"label-hide"`. */ 'layout'?: TabbarLayout; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ 'mode'?: Mode; /** * Emitted when the tab bar is clicked @@ -4606,7 +4729,7 @@ export namespace Components { */ 'tabs'?: HTMLIonTabElement[]; /** - * If true, the tabbar will be translucent. Defaults to `false`. + * If `true`, the tabbar will be translucent. Defaults to `false`. */ 'translucent'?: boolean; } @@ -4631,11 +4754,11 @@ export namespace Components { 'select': (tabOrIndex: number | HTMLIonTabElement) => Promise; 'setRouteId': (id: string) => Promise; /** - * If true, the tabbar will be hidden. Defaults to `false`. + * If `true`, the tabbar will be hidden. Defaults to `false`. */ 'tabbarHidden': boolean; /** - * If true, the tabs will use the router and `selectedTab` will not do anything. + * If `true`, the tabs will use the router and `selectedTab` will not do anything. */ 'useRouter': boolean; } @@ -4661,11 +4784,11 @@ export namespace Components { */ 'onIonNavWillLoad'?: (event: CustomEvent) => void; /** - * If true, the tabbar will be hidden. Defaults to `false`. + * If `true`, the tabbar will be hidden. Defaults to `false`. */ 'tabbarHidden'?: boolean; /** - * If true, the tabs will use the router and `selectedTab` will not do anything. + * If `true`, the tabs will use the router and `selectedTab` will not do anything. */ 'useRouter'?: boolean; } @@ -4701,7 +4824,7 @@ export namespace Components { */ 'autofocus': boolean; /** - * If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. + * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. */ 'clearOnEdit': boolean; /** @@ -4717,7 +4840,7 @@ export namespace Components { */ 'debounce': number; /** - * If true, the user cannot interact with the textarea. Defaults to `false`. + * If `true`, the user cannot interact with the textarea. Defaults to `false`. */ 'disabled': boolean; /** @@ -4741,20 +4864,23 @@ export namespace Components { */ 'placeholder'?: string; /** - * If true, the user cannot modify the value. Defaults to `false`. + * If `true`, the user cannot modify the value. Defaults to `false`. */ 'readonly': boolean; /** - * If true, the user must fill in a value before submitting a form. + * If `true`, the user must fill in a value before submitting a form. */ 'required': boolean; /** * The number of visible text lines for the control. */ 'rows'?: number; + /** + * Sets focus on the specified `ion-textarea`. Use this method instead of the global `input.focus()`. + */ '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. Defaults to `false`. */ 'spellcheck': boolean; /** @@ -4776,7 +4902,7 @@ export namespace Components { */ 'autofocus'?: boolean; /** - * If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. + * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. */ 'clearOnEdit'?: boolean; /** @@ -4792,7 +4918,7 @@ export namespace Components { */ 'debounce'?: number; /** - * If true, the user cannot interact with the textarea. Defaults to `false`. + * If `true`, the user cannot interact with the textarea. Defaults to `false`. */ 'disabled'?: boolean; /** @@ -4836,11 +4962,11 @@ export namespace Components { */ 'placeholder'?: string; /** - * If true, the user cannot modify the value. Defaults to `false`. + * If `true`, the user cannot modify the value. Defaults to `false`. */ 'readonly'?: boolean; /** - * If true, the user must fill in a value before submitting a form. + * If `true`, the user must fill in a value before submitting a form. */ 'required'?: boolean; /** @@ -4848,7 +4974,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. Defaults to `false`. */ 'spellcheck'?: boolean; /** @@ -4895,7 +5021,7 @@ export namespace Components { interface IonToast { /** - * If true, the toast will animate. Defaults to `true`. + * If `true`, the toast will animate. Defaults to `true`. */ 'animated': boolean; /** @@ -4919,7 +5045,7 @@ export namespace Components { */ 'enterAnimation'?: AnimationBuilder; /** - * If true, the keyboard will be automatically dismissed when the overlay is presented. + * If `true`, the keyboard will be automatically dismissed when the overlay is presented. */ 'keyboardClose': boolean; /** @@ -4952,17 +5078,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. Defaults to `false`. */ 'showCloseButton': boolean; /** - * If true, the toast will be translucent. Defaults to `false`. + * If `true`, the toast will be translucent. Defaults to `false`. */ 'translucent': boolean; } interface IonToastAttributes extends StencilHTMLAttributes { /** - * If true, the toast will animate. Defaults to `true`. + * If `true`, the toast will animate. Defaults to `true`. */ 'animated'?: boolean; /** @@ -4982,7 +5108,7 @@ export namespace Components { */ 'enterAnimation'?: AnimationBuilder; /** - * If true, the keyboard will be automatically dismissed when the overlay is presented. + * If `true`, the keyboard will be automatically dismissed when the overlay is presented. */ 'keyboardClose'?: boolean; /** @@ -5027,24 +5153,27 @@ export namespace Components { */ 'position'?: 'top' | 'bottom' | 'middle'; /** - * If true, the close button will be displayed. Defaults to `false`. + * If `true`, the close button will be displayed. Defaults to `false`. */ 'showCloseButton'?: boolean; /** - * If true, the toast will be translucent. Defaults to `false`. + * If `true`, the toast will be translucent. Defaults to `false`. */ 'translucent'?: boolean; } interface IonToggle { /** - * If true, the toggle is selected. Defaults to `false`. + * If `true`, the toggle is selected. Defaults to `false`. */ 'checked': boolean; /** * 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). */ 'color'?: Color; + /** + * If `true`, the user cannot interact with the toggle. Default false. + */ 'disabled': boolean; /** * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. @@ -5061,13 +5190,16 @@ export namespace Components { } interface IonToggleAttributes extends StencilHTMLAttributes { /** - * If true, the toggle is selected. Defaults to `false`. + * If `true`, the toggle is selected. Defaults to `false`. */ 'checked'?: boolean; /** * 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). */ 'color'?: Color; + /** + * If `true`, the user cannot interact with the toggle. Default false. + */ 'disabled'?: boolean; /** * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. @@ -5142,17 +5274,41 @@ export namespace Components { * Section headers and the data used within its given template can be dynamically created by passing a function to `headerFn`. For example, a large list of contacts usually has dividers between each letter in the alphabet. App's can provide their own custom `headerFn` which is called with each record within the dataset. The logic within the header function can decide if the header template should be used, and what data to give to the header template. The function must return `null` if a header cell shouldn't be created. */ 'headerFn'?: HeaderFn; + /** + * An optional function that maps each item within their height. When this function is provides, heavy optimizations and fast path can be taked by `ion-virtual-scroll` leading to massive performance improvements. This function allows to skip all DOM reads, which can be Doing so leads to massive performance + */ 'itemHeight'?: ItemHeightFn; /** * The data that builds the templates within the virtual scroll. It's important to note that when this data has changed, then the entire virtual scroll is reset, which is an expensive operation and should be avoided if possible. */ 'items'?: any[]; + /** + * This method marks a subset of items as dirty, so they can be re-rendered. Items should be marked as dirty any time the content or their style changes. The subset of items to be updated can are specifing by an offset and a length. + */ 'markDirty': (offset: number, len?: number) => void; + /** + * This method marks the tail the items array as dirty, so they can be re-rendered. It's equivalent to calling: ``` * virtualScroll.markDirty(lastItemLen, items.length - lastItemLen); * ``` + */ 'markDirtyTail': () => void; + /** + * NOTE: only Vanilla JS API. + */ 'nodeRender'?: ItemRenderFn; + /** + * Returns the position of the virtual item at the given index. + */ 'positionForItem': (index: number) => Promise; + /** + * NOTE: only JSX API for stencil. Provide a render function for the footer to be rendered. Returns a JSX virtual-dom. + */ 'renderFooter'?: (item: any, index: number) => any; + /** + * NOTE: only JSX API for stencil. Provide a render function for the header to be rendered. Returns a JSX virtual-dom. + */ 'renderHeader'?: (item: any, index: number) => any; + /** + * NOTE: only JSX API for stencil. Provide a render function for the items to be rendered. Returns a JSX virtual-dom. + */ 'renderItem'?: (item: any, index: number) => any; } interface IonVirtualScrollAttributes extends StencilHTMLAttributes { @@ -5177,14 +5333,29 @@ export namespace Components { * Section headers and the data used within its given template can be dynamically created by passing a function to `headerFn`. For example, a large list of contacts usually has dividers between each letter in the alphabet. App's can provide their own custom `headerFn` which is called with each record within the dataset. The logic within the header function can decide if the header template should be used, and what data to give to the header template. The function must return `null` if a header cell shouldn't be created. */ 'headerFn'?: HeaderFn; + /** + * An optional function that maps each item within their height. When this function is provides, heavy optimizations and fast path can be taked by `ion-virtual-scroll` leading to massive performance improvements. This function allows to skip all DOM reads, which can be Doing so leads to massive performance + */ 'itemHeight'?: ItemHeightFn; /** * The data that builds the templates within the virtual scroll. It's important to note that when this data has changed, then the entire virtual scroll is reset, which is an expensive operation and should be avoided if possible. */ 'items'?: any[]; + /** + * NOTE: only Vanilla JS API. + */ 'nodeRender'?: ItemRenderFn; + /** + * NOTE: only JSX API for stencil. Provide a render function for the footer to be rendered. Returns a JSX virtual-dom. + */ 'renderFooter'?: (item: any, index: number) => any; + /** + * NOTE: only JSX API for stencil. Provide a render function for the header to be rendered. Returns a JSX virtual-dom. + */ 'renderHeader'?: (item: any, index: number) => any; + /** + * NOTE: only JSX API for stencil. Provide a render function for the items to be rendered. Returns a JSX virtual-dom. + */ 'renderItem'?: (item: any, index: number) => any; } } diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx index d38c059e90..c7ada24efc 100644 --- a/core/src/components/action-sheet/action-sheet.tsx +++ b/core/src/components/action-sheet/action-sheet.tsx @@ -26,6 +26,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface { @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement; @Prop({ context: 'config' }) config!: Config; + /** @internal */ @Prop() overlayIndex!: number; /** @@ -35,7 +36,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface { @Prop() mode!: Mode; /** - * If true, the keyboard will be automatically dismissed when the overlay is presented. + * If `true`, the keyboard will be automatically dismissed when the overlay is presented. */ @Prop() keyboardClose = true; @@ -61,7 +62,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. Defaults to `true`. */ @Prop() backdropDismiss = true; @@ -76,12 +77,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. Defaults to `false`. */ @Prop() translucent = false; /** - * If true, the action sheet will animate. Defaults to `true`. + * If `true`, the action sheet will animate. Defaults to `true`. */ @Prop() animated = true; diff --git a/core/src/components/action-sheet/readme.md b/core/src/components/action-sheet/readme.md index 6abd7bfdd7..4ce5e3ec6e 100644 --- a/core/src/components/action-sheet/readme.md +++ b/core/src/components/action-sheet/readme.md @@ -18,18 +18,18 @@ A button's `role` property can either be `destructive` or `cancel`. Buttons with | 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` | +| `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. | `(ActionSheetButton | string)[]` | | `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string`, `string[]` | | `enterAnimation` | -- | Animation to use when the action sheet is presented. | `AnimationBuilder` | | `header` | `header` | Title for the action sheet. | `string` | -| `keyboardClose` | `keyboard-close` | If true, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | +| `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` | | `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | | `overlayIndex` | `overlay-index` | | `number` | | `subHeader` | `sub-header` | Subtitle for the action sheet. | `string` | -| `translucent` | `translucent` | If true, the action sheet will be translucent. Defaults to `false`. | `boolean` | +| `translucent` | `translucent` | If `true`, the action sheet will be translucent. Defaults to `false`. | `boolean` | ## Events diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx index c4b6144cb2..0c7463a2f8 100644 --- a/core/src/components/alert/alert.tsx +++ b/core/src/components/alert/alert.tsx @@ -31,6 +31,7 @@ export class Alert implements ComponentInterface, OverlayInterface { @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement; @Prop({ context: 'config' }) config!: Config; + /** @internal */ @Prop() overlayIndex!: number; /** @@ -40,7 +41,7 @@ export class Alert implements ComponentInterface, OverlayInterface { @Prop() mode!: Mode; /** - * If true, the keyboard will be automatically dismissed when the overlay is presented. + * If `true`, the keyboard will be automatically dismissed when the overlay is presented. */ @Prop() keyboardClose = true; @@ -86,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. Defaults to `true`. */ @Prop() backdropDismiss = true; /** - * If true, the alert will be translucent. Defaults to `false`. + * If `true`, the alert will be translucent. Defaults to `false`. */ @Prop() translucent = false; /** - * If true, the alert will animate. Defaults to `true`. + * If `true`, the alert will animate. Defaults to `true`. */ @Prop() animated = true; diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md index ae05e992de..32f55288e3 100644 --- a/core/src/components/alert/readme.md +++ b/core/src/components/alert/readme.md @@ -27,20 +27,20 @@ Alerts can also include several different inputs whose data can be passed back t | 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` | +| `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. | `(AlertButton | string)[]` | | `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string`, `string[]` | | `enterAnimation` | -- | Animation to use when the alert is presented. | `AnimationBuilder` | | `header` | `header` | The main title in the heading of the alert. | `string` | | `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` | +| `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` | | `message` | `message` | The main message to be displayed in the alert. | `string` | | `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | | `overlayIndex` | `overlay-index` | | `number` | | `subHeader` | `sub-header` | The subtitle in the heading of the alert. Displayed under the title. | `string` | -| `translucent` | `translucent` | If true, the alert will be translucent. Defaults to `false`. | `boolean` | +| `translucent` | `translucent` | If `true`, the alert will be translucent. Defaults to `false`. | `boolean` | ## Events diff --git a/core/src/components/backdrop/backdrop.tsx b/core/src/components/backdrop/backdrop.tsx index 8129fe3e7a..9c443d53aa 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. Defaults to `true`. */ @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. Defaults to `true`. */ @Prop() tappable = true; /** - * If true, the backdrop will stop propagation on tap. Defaults to `true`. + * If `true`, the backdrop will stop propagation on tap. Defaults to `true`. */ @Prop() stopPropagation = true; diff --git a/core/src/components/backdrop/readme.md b/core/src/components/backdrop/readme.md index 33826ca23d..687d43c561 100644 --- a/core/src/components/backdrop/readme.md +++ b/core/src/components/backdrop/readme.md @@ -8,11 +8,11 @@ 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 | +| ----------------- | ------------------ | --------------------------------------------------------------------------------------------------------- | --------- | +| `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` | ## Events diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx index 5e3a36edc0..3677baefe1 100644 --- a/core/src/components/button/button.tsx +++ b/core/src/components/button/button.tsx @@ -39,7 +39,7 @@ export class Button implements ComponentInterface { @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. Defaults to `false`. */ @Prop({ reflectToAttr: true }) disabled = false; @@ -81,7 +81,7 @@ export class Button implements ComponentInterface { @Prop({ reflectToAttr: true }) size?: 'small' | 'default' | 'large'; /** - * If true, activates a button with a heavier font weight. + * If `true`, activates a button with a heavier font weight. */ @Prop() strong = false; diff --git a/core/src/components/button/readme.md b/core/src/components/button/readme.md index 593a39b992..e402803298 100644 --- a/core/src/components/button/readme.md +++ b/core/src/components/button/readme.md @@ -41,7 +41,7 @@ This attribute specifies the size of the button. Setting this attribute will cha | ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | | `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). | `Color` | -| `disabled` | `disabled` | If true, the user cannot interact with the button. Defaults to `false`. | `boolean` | +| `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. | `"full"`, `"block"` | | `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"`, `"outline"`, `"solid"`, `"default"` | | `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` | @@ -49,7 +49,7 @@ This attribute specifies the size of the button. Setting this attribute will cha | `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `RouterDirection` | | `shape` | `shape` | The button shape. Possible values are: `"round"`. | `"round"` | | `size` | `size` | The button size. Possible values are: `"small"`, `"default"`, `"large"`. | `"small"`, `"default"`, `"large"` | -| `strong` | `strong` | If true, activates a button with a heavier font weight. | `boolean` | +| `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"` | `"submit"`, `"reset"`, `"button"` | diff --git a/core/src/components/card-header/card-header.tsx b/core/src/components/card-header/card-header.tsx index 5cf4be05d0..e6d43fc81f 100644 --- a/core/src/components/card-header/card-header.tsx +++ b/core/src/components/card-header/card-header.tsx @@ -26,7 +26,7 @@ export class CardHeader implements ComponentInterface { @Prop() mode!: Mode; /** - * If true, the card header will be translucent. Defaults to `false`. + * If `true`, the card header will be translucent. Defaults to `false`. */ @Prop() translucent = false; diff --git a/core/src/components/card-header/readme.md b/core/src/components/card-header/readme.md index 8da2bdd261..8344d44ceb 100644 --- a/core/src/components/card-header/readme.md +++ b/core/src/components/card-header/readme.md @@ -12,7 +12,7 @@ | ------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | | `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). | `Color` | | `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | -| `translucent` | `translucent` | If true, the card header will be translucent. Defaults to `false`. | `boolean` | +| `translucent` | `translucent` | If `true`, the card header will be translucent. Defaults to `false`. | `boolean` | ---------------------------------------------- diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx index 4df32202a7..4d70b93946 100644 --- a/core/src/components/checkbox/checkbox.tsx +++ b/core/src/components/checkbox/checkbox.tsx @@ -40,12 +40,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. Defaults to `false`. */ @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. Defaults to `false`. */ @Prop() disabled = false; diff --git a/core/src/components/checkbox/readme.md b/core/src/components/checkbox/readme.md index 1633600f1a..7d98cf9f9c 100644 --- a/core/src/components/checkbox/readme.md +++ b/core/src/components/checkbox/readme.md @@ -12,9 +12,9 @@ Checkboxes allow the selection of multiple options from a set of options. They a | Property | Attribute | Description | Type | | ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | -| `checked` | `checked` | If true, the checkbox is selected. Defaults to `false`. | `boolean` | +| `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). | `Color` | -| `disabled` | `disabled` | If true, the user cannot interact with the checkbox. Defaults to `false`. | `boolean` | +| `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"`. | `Mode` | | `name` | `name` | The name of the control, which is submitted with the form data. | `string` | | `value` | `value` | The value of the checkbox. | `string` | diff --git a/core/src/components/chip-button/chip-button.tsx b/core/src/components/chip-button/chip-button.tsx index 3ffb57abab..f527986649 100644 --- a/core/src/components/chip-button/chip-button.tsx +++ b/core/src/components/chip-button/chip-button.tsx @@ -25,7 +25,7 @@ export class ChipButton implements ComponentInterface { @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. Defaults to `false`. */ @Prop() disabled = false; diff --git a/core/src/components/chip-button/readme.md b/core/src/components/chip-button/readme.md index 21ea084e80..f24a08e2f1 100644 --- a/core/src/components/chip-button/readme.md +++ b/core/src/components/chip-button/readme.md @@ -10,7 +10,7 @@ A ChipButton is an inset button that is placed inside of a Chip. For more inform | 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). | `Color` | -| `disabled` | `disabled` | If true, the user cannot interact with the chip button. Defaults to `false`. | `boolean` | +| `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` | | `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx index fede1376a7..18965bc138 100644 --- a/core/src/components/content/content.tsx +++ b/core/src/components/content/content.tsx @@ -42,7 +42,6 @@ export class Content implements ComponentInterface { }; mode!: Mode; - @Prop() color?: Color; @Element() el!: HTMLStencilElement; @@ -51,14 +50,21 @@ export class Content implements ComponentInterface { @Prop({ context: 'window' }) win!: Window; /** - * If true, the content will scroll behind the headers + * 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). + */ + @Prop() color?: Color; + + /** + * If `true`, the content will scroll behind the headers * and footers. This effect can easily be seen by setting the toolbar * to transparent. */ @Prop() fullscreen = false; /** - * If true and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. + * 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. */ @@ -157,6 +163,14 @@ export class Content implements ComponentInterface { } } + /** + * Returns the element where the actual scrolling takes places. + * This element is the one you could subscribe to `scroll` events or manually modify + * `scrollTop`, however, it's recommended to use the API provided by `ion-content`: + * + * Ie. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events + * and scrollToPoint() to scroll the content into a certain point. + */ @Method() getScrollElement(): Promise { return Promise.resolve(this.scrollEl); diff --git a/core/src/components/content/readme.md b/core/src/components/content/readme.md index ea791f2eaf..431e092af0 100644 --- a/core/src/components/content/readme.md +++ b/core/src/components/content/readme.md @@ -9,14 +9,14 @@ view component. ## Properties -| Property | Attribute | Description | Type | -| ----------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | -| `color` | `color` | | `Color` | -| `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` | -| `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 | +| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | +| `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). | `Color` | +| `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` | +| `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` | ## Events @@ -32,7 +32,12 @@ view component. ### `getScrollElement() => Promise` +Returns the element where the actual scrolling takes places. +This element is the one you could subscribe to `scroll` events or manually modify +`scrollTop`, however, it's recommended to use the API provided by `ion-content`: +Ie. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events +and scrollToPoint() to scroll the content into a certain point. #### Returns diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index 899f8c002b..b478f1d05a 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -36,7 +36,7 @@ export class Datetime implements ComponentInterface { @Prop() mode!: Mode; /** - * If true, the user cannot interact with the datetime. Defaults to `false`. + * If `true`, the user cannot interact with the datetime. Defaults to `false`. */ @Prop() disabled = false; @@ -228,6 +228,9 @@ export class Datetime implements ComponentInterface { this.emitStyle(); } + /** + * Opens the datetime overlay. + */ @Method() async open() { if (this.disabled) { diff --git a/core/src/components/datetime/readme.md b/core/src/components/datetime/readme.md index 8d67a53a48..86dd66cfe0 100644 --- a/core/src/components/datetime/readme.md +++ b/core/src/components/datetime/readme.md @@ -210,7 +210,7 @@ dates in JavaScript. | `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` | | `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` | | `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` | -| `disabled` | `disabled` | If true, the user cannot interact with the datetime. Defaults to `false`. | `boolean` | +| `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` | @@ -241,7 +241,7 @@ dates in JavaScript. ### `open() => Promise` - +Opens the datetime overlay. #### Returns diff --git a/core/src/components/fab-button/fab-button.tsx b/core/src/components/fab-button/fab-button.tsx index fa97bbba49..61246ee98a 100755 --- a/core/src/components/fab-button/fab-button.tsx +++ b/core/src/components/fab-button/fab-button.tsx @@ -32,12 +32,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. Defaults to `false`. */ @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. Defaults to `false`. */ @Prop() disabled = false; @@ -54,12 +54,12 @@ export class FabButton implements ComponentInterface { @Prop() routerDirection?: RouterDirection; /** - * If true, the fab button will show when in a fab-list. + * If `true`, the fab button will show when in a fab-list. */ @Prop() show = false; /** - * If true, the fab button will be translucent. Defaults to `false`. + * If `true`, the fab button will be translucent. Defaults to `false`. */ @Prop() translucent = false; diff --git a/core/src/components/fab-button/readme.md b/core/src/components/fab-button/readme.md index f659f83b34..d7e4ffa225 100644 --- a/core/src/components/fab-button/readme.md +++ b/core/src/components/fab-button/readme.md @@ -11,14 +11,14 @@ If the FAB button is not wrapped with ``, it will scroll with the conte | Property | Attribute | Description | Type | | ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | -| `activated` | `activated` | If true, the fab button will be show a close icon. Defaults to `false`. | `boolean` | +| `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). | `Color` | -| `disabled` | `disabled` | If true, the user cannot interact with the fab button. Defaults to `false`. | `boolean` | +| `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` | | `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | | `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `RouterDirection` | -| `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` | +| `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` | ---------------------------------------------- diff --git a/core/src/components/fab-list/fab-list.tsx b/core/src/components/fab-list/fab-list.tsx index 3aeec8d6dd..648e0c5f10 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. Defaults to `false`. */ @Prop() activated = false; diff --git a/core/src/components/fab-list/readme.md b/core/src/components/fab-list/readme.md index bd595c1e3f..42360d7ff6 100644 --- a/core/src/components/fab-list/readme.md +++ b/core/src/components/fab-list/readme.md @@ -9,7 +9,7 @@ The `ion-fab-list` element is a container for multiple fab buttons. This collect | Property | Attribute | Description | Type | | ----------- | ----------- | ------------------------------------------------------------------------------------------- | --------------------------------------- | -| `activated` | `activated` | If true, the fab list will be show all fab buttons in the list. Defaults to `false`. | `boolean` | +| `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'`. | `"start"`, `"end"`, `"top"`, `"bottom"` | diff --git a/core/src/components/fab/fab.tsx b/core/src/components/fab/fab.tsx index a7d986e23c..2fc5cd78cc 100644 --- a/core/src/components/fab/fab.tsx +++ b/core/src/components/fab/fab.tsx @@ -22,12 +22,16 @@ export class Fab implements ComponentInterface { @Prop() vertical?: 'top' | 'bottom' | 'center'; /** - * If true, the fab will display on the edge of the header if + * 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. */ @Prop() edge = false; + /** + * 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. + */ @Prop({ mutable: true }) activated = false; @Watch('activated') activatedChanged() { diff --git a/core/src/components/fab/readme.md b/core/src/components/fab/readme.md index 9a7e3721f4..1a2b5102fb 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` | | `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"`. | `"start"`, `"end"`, `"center"` | -| `vertical` | `vertical` | Where to align the fab vertically in the viewport. Possible values are: `"top"`, `"center"`, `"bottom"`. | `"top"`, `"bottom"`, `"center"` | +| 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"`. | `"start"`, `"end"`, `"center"` | +| `vertical` | `vertical` | Where to align the fab vertically in the viewport. Possible values are: `"top"`, `"center"`, `"bottom"`. | `"top"`, `"bottom"`, `"center"` | ## Methods diff --git a/core/src/components/footer/footer.tsx b/core/src/components/footer/footer.tsx index 6c84f40531..fefbf121df 100644 --- a/core/src/components/footer/footer.tsx +++ b/core/src/components/footer/footer.tsx @@ -19,7 +19,7 @@ export class Footer implements ComponentInterface { @Prop() mode!: Mode; /** - * If true, the footer will be 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`. diff --git a/core/src/components/footer/readme.md b/core/src/components/footer/readme.md index 8ed032ad12..4b6695083a 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"`. | `Mode` | -| `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 | +| ------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | +| `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` | ---------------------------------------------- diff --git a/core/src/components/grid/grid.tsx b/core/src/components/grid/grid.tsx index 45b3a41ba7..1e1e091c26 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. Defaults to `false`. */ @Prop() fixed = false; diff --git a/core/src/components/grid/readme.md b/core/src/components/grid/readme.md index 19f53565ad..3ed98e0156 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 | +| -------- | --------- | ------------------------------------------------------------------------------------------ | --------- | +| `fixed` | `fixed` | If `true`, the grid will have a fixed width based on the screen size. Defaults to `false`. | `boolean` | ## CSS Custom Properties diff --git a/core/src/components/header/header.tsx b/core/src/components/header/header.tsx index ca12edf6bb..dda6113a3b 100644 --- a/core/src/components/header/header.tsx +++ b/core/src/components/header/header.tsx @@ -19,7 +19,7 @@ export class Header implements ComponentInterface { @Prop() mode!: Mode; /** - * If true, the header will be 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`. diff --git a/core/src/components/header/readme.md b/core/src/components/header/readme.md index b147695c7e..ef9f0b3243 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"`. | `Mode` | -| `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 | +| ------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | +| `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` | ---------------------------------------------- diff --git a/core/src/components/hide-when/hide-when.tsx b/core/src/components/hide-when/hide-when.tsx index 8b02240f3b..4da2da01ca 100644 --- a/core/src/components/hide-when/hide-when.tsx +++ b/core/src/components/hide-when/hide-when.tsx @@ -43,8 +43,8 @@ export class HideWhen implements ComponentInterface, DisplayWhen { @Prop() platform?: string; /** - * If false, and two or more conditions are set, the element will hide when all are true. - * If true, and two or more conditions are set, the element will hide when at least one is true. + * If `false`, and two or more conditions are set, the element will hide when all are true. + * If `true`, and two or more conditions are set, the element will hide when at least one is true. */ @Prop() or = false; diff --git a/core/src/components/hide-when/readme.md b/core/src/components/hide-when/readme.md index c469eff5b7..b949d91161 100644 --- a/core/src/components/hide-when/readme.md +++ b/core/src/components/hide-when/readme.md @@ -8,14 +8,14 @@ ## Properties -| Property | Attribute | Description | Type | -| ------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- | -| `mediaQuery` | `media-query` | If the current media query matches this value, the element will hide. | `string` | -| `modes` | `modes` | If the current platform matches the given value, the element will hide. Accepts a comma separated list of modes to match against. | `string` | -| `or` | `or` | If false, and two or more conditions are set, the element will hide when all are true. If true, and two or more conditions are set, the element will hide when at least one is true. | `boolean` | -| `orientation` | `orientation` | If the current orientation matches this value, the element will hide. | `string` | -| `platform` | `platform` | If the current platform matches the given value, the element will hide. Accepts a comma separated list of platforms to match against. | `string` | -| `size` | `size` | If the current screen width matches the given size, the element will hide. Uses the build in sizes of xs, sm, md, lg, xl. | `string` | +| Property | Attribute | Description | Type | +| ------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | +| `mediaQuery` | `media-query` | If the current media query matches this value, the element will hide. | `string` | +| `modes` | `modes` | If the current platform matches the given value, the element will hide. Accepts a comma separated list of modes to match against. | `string` | +| `or` | `or` | If `false`, and two or more conditions are set, the element will hide when all are true. If `true`, and two or more conditions are set, the element will hide when at least one is true. | `boolean` | +| `orientation` | `orientation` | If the current orientation matches this value, the element will hide. | `string` | +| `platform` | `platform` | If the current platform matches the given value, the element will hide. Accepts a comma separated list of platforms to match against. | `string` | +| `size` | `size` | If the current screen width matches the given size, the element will hide. Uses the build in sizes of xs, sm, md, lg, xl. | `string` | ---------------------------------------------- diff --git a/core/src/components/infinite-scroll/infinite-scroll.tsx b/core/src/components/infinite-scroll/infinite-scroll.tsx index 2387172d07..7f84c33f91 100644 --- a/core/src/components/infinite-scroll/infinite-scroll.tsx +++ b/core/src/components/infinite-scroll/infinite-scroll.tsx @@ -43,7 +43,7 @@ export class InfiniteScroll implements ComponentInterface { } /** - * If true, the infinite scroll will be hidden and scroll event listeners + * 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 diff --git a/core/src/components/infinite-scroll/readme.md b/core/src/components/infinite-scroll/readme.md index 78b32c71fe..d6083695a2 100644 --- a/core/src/components/infinite-scroll/readme.md +++ b/core/src/components/infinite-scroll/readme.md @@ -19,7 +19,7 @@ Separating the `ion-infinite-scroll` and `ion-infinite-scroll-content` component | 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` | +| `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`. | `"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. Defaults to `15%`. | `string` | diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index dc21a34628..a69012771c 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -61,12 +61,12 @@ export class Input implements ComponentInterface { @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. Defaults to `false`. */ @Prop() clearInput = false; /** - * If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. + * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. */ @Prop({ mutable: true }) clearOnEdit?: boolean; @@ -81,7 +81,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. Defaults to `false`. */ @Prop() disabled = false; @@ -116,7 +116,7 @@ export class Input implements ComponentInterface { @Prop() minlength?: number; /** - * 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. + * 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. */ @Prop() multiple?: boolean; @@ -136,12 +136,12 @@ 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. Defaults to `false`. */ @Prop() readonly = false; /** - * If true, the user must fill in a value before submitting a form. + * If `true`, the user must fill in a value before submitting a form. */ @Prop() required = false; @@ -151,7 +151,7 @@ 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. Defaults to `false`. */ @Prop() spellcheck = false; @@ -244,6 +244,10 @@ export class Input implements ComponentInterface { this.ionInputDidUnload.emit(); } + /** + * Sets focus on the specified `ion-input`. Use this method instead of the global + * `input.focus()`. + */ @Method() setFocus() { if (this.nativeInput) { diff --git a/core/src/components/input/readme.md b/core/src/components/input/readme.md index 2021b6fc62..00677a0ae3 100644 --- a/core/src/components/input/readme.md +++ b/core/src/components/input/readme.md @@ -17,26 +17,26 @@ It is meant for text `type` inputs only, such as `"text"`, `"password"`, `"email | `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` | +| `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` | | `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). | `Color` | | `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` | +| `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` | | `max` | `max` | The maximum value, which must not be less than its minimum (min attribute) value. | `string` | | `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` | | `min` | `min` | The minimum value, which must not be greater than its maximum (max attribute) value. | `string` | | `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` | | `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | -| `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` | +| `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` | | `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` | | `placeholder` | `placeholder` | Instructional text that shows before the input has a value. | `string` | -| `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` | +| `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` | | `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` | -| `spellcheck` | `spellcheck` | If true, the element will have its spelling and grammar checked. Defaults to `false`. | `boolean` | +| `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` | | `type` | `type` | The type of control to display. The default type is text. Possible values are: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, or `"url"`. | `TextFieldTypes` | | `value` | `value` | The value of the input. | `string` | @@ -59,7 +59,8 @@ It is meant for text `type` inputs only, such as `"text"`, `"password"`, `"email ### `setFocus() => void` - +Sets focus on the specified `ion-input`. Use this method instead of the global +`input.focus()`. #### Returns diff --git a/core/src/components/item-option/item-option.tsx b/core/src/components/item-option/item-option.tsx index 3486b7020f..9dbdf83a20 100644 --- a/core/src/components/item-option/item-option.tsx +++ b/core/src/components/item-option/item-option.tsx @@ -29,12 +29,12 @@ export class ItemOption implements ComponentInterface { @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. Defaults to `false`. */ @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. Defaults to `false`. */ @Prop() expandable = false; diff --git a/core/src/components/item-option/readme.md b/core/src/components/item-option/readme.md index 7852f6208a..e58b11976c 100644 --- a/core/src/components/item-option/readme.md +++ b/core/src/components/item-option/readme.md @@ -12,8 +12,8 @@ action for the item. | 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). | `Color` | -| `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` | +| `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` | | `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | diff --git a/core/src/components/item-options/item-options.tsx b/core/src/components/item-options/item-options.tsx index 62e4574598..9467b28228 100644 --- a/core/src/components/item-options/item-options.tsx +++ b/core/src/components/item-options/item-options.tsx @@ -26,6 +26,7 @@ export class ItemOptions implements ComponentInterface { */ @Event() ionSwipe!: EventEmitter; + /** @internal */ @Method() fireSwipeEvent() { this.ionSwipe.emit({ diff --git a/core/src/components/item-sliding/item-sliding.tsx b/core/src/components/item-sliding/item-sliding.tsx index 1d26936143..85ac856271 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. Defaults to `false`. */ @Prop() disabled = false; @Watch('disabled') diff --git a/core/src/components/item-sliding/readme.md b/core/src/components/item-sliding/readme.md index 9dcadd40cc..0465e3976f 100644 --- a/core/src/components/item-sliding/readme.md +++ b/core/src/components/item-sliding/readme.md @@ -31,9 +31,9 @@ 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 | +| ---------- | ---------- | ------------------------------------------------------------------------------- | --------- | +| `disabled` | `disabled` | If `true`, the user cannot interact with the sliding-item. Defaults to `false`. | `boolean` | ## Events diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx index 53fe1e398c..d605b0d79c 100644 --- a/core/src/components/item/item.tsx +++ b/core/src/components/item/item.tsx @@ -34,12 +34,12 @@ export class Item implements ComponentInterface { @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. Defaults to `false`. */ @Prop() button = false; /** - * If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode` + * 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. */ @Prop() detail?: boolean; @@ -50,7 +50,7 @@ export class Item implements ComponentInterface { @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. Defaults to `false`. */ @Prop() disabled = false; diff --git a/core/src/components/item/readme.md b/core/src/components/item/readme.md index b9d0b48f11..9d4a5e5e01 100644 --- a/core/src/components/item/readme.md +++ b/core/src/components/item/readme.md @@ -58,11 +58,11 @@ The highlight color changes based on the item state, but all of the states use I | Property | Attribute | Description | Type | | ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | -| `button` | `button` | If true, a button tag will be rendered and the item will be tappable. Defaults to `false`. | `boolean` | +| `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). | `Color` | | `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` | -| `disabled` | `disabled` | If true, the user cannot interact with the item. Defaults to `false`. | `boolean` | +| `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` | +| `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` | | `lines` | `lines` | How the bottom border should be displayed on the item. Available options: `"full"`, `"inset"`, `"none"`. | `"full"`, `"inset"`, `"none"` | | `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | diff --git a/core/src/components/list/list.tsx b/core/src/components/list/list.tsx index 78191a5a06..4dce58062b 100644 --- a/core/src/components/list/list.tsx +++ b/core/src/components/list/list.tsx @@ -27,10 +27,16 @@ export class List implements ComponentInterface { @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. Defaults to `false`. */ @Prop() inset = false; + /** + * If `ion-item-sliding` are used inside the list, this method closes + * any open sliding item. + * + * Returns `true` if an actual `ion-item-sliding` is closed. + */ @Method() async closeSlidingItems(): Promise { const item = this.el.querySelector('ion-item-sliding'); diff --git a/core/src/components/list/readme.md b/core/src/components/list/readme.md index 78d258a69a..77e3747c8e 100644 --- a/core/src/components/list/readme.md +++ b/core/src/components/list/readme.md @@ -13,7 +13,7 @@ Lists support several interactions including swiping items to reveal options, dr | Property | Attribute | Description | Type | | -------- | --------- | --------------------------------------------------------------------------------------------------------- | ----------------------------- | -| `inset` | `inset` | If true, the list will have margin around it and rounded corners. Defaults to `false`. | `boolean` | +| `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"` | | `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | @@ -22,7 +22,10 @@ Lists support several interactions including swiping items to reveal options, dr ### `closeSlidingItems() => Promise` +If `ion-item-sliding` are used inside the list, this method closes +any open sliding item. +Returns `true` if an actual `ion-item-sliding` is closed. #### Returns diff --git a/core/src/components/loading/loading.tsx b/core/src/components/loading/loading.tsx index 01b6aafb5b..96eb4d5062 100644 --- a/core/src/components/loading/loading.tsx +++ b/core/src/components/loading/loading.tsx @@ -26,6 +26,8 @@ export class Loading implements ComponentInterface, OverlayInterface { @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement; @Prop({ context: 'config' }) config!: Config; + + /** @internal */ @Prop() overlayIndex!: number; /** @@ -35,7 +37,7 @@ export class Loading implements ComponentInterface, OverlayInterface { @Prop() mode!: Mode; /** - * If true, the keyboard will be automatically dismissed when the overlay is presented. + * If `true`, the keyboard will be automatically dismissed when the overlay is presented. */ @Prop() keyboardClose = true; @@ -66,12 +68,12 @@ 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. Defaults to `false`. */ @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. Defaults to `true`. */ @Prop() showBackdrop = true; @@ -82,12 +84,12 @@ export class Loading implements ComponentInterface, OverlayInterface { @Prop({ mutable: true }) spinner?: string; /** - * If true, the loading indicator will be translucent. Defaults to `false`. + * If `true`, the loading indicator will be translucent. Defaults to `false`. */ @Prop() translucent = false; /** - * If true, the loading indicator will animate. Defaults to `true`. + * If `true`, the loading indicator will animate. Defaults to `true`. */ @Prop() animated = true; diff --git a/core/src/components/loading/readme.md b/core/src/components/loading/readme.md index 16bc84569e..f8ef67810a 100644 --- a/core/src/components/loading/readme.md +++ b/core/src/components/loading/readme.md @@ -20,19 +20,19 @@ The loading indicator can be dismissed automatically after a specific amount of | 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` | +| `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[]` | | `duration` | `duration` | Number of milliseconds to wait before dismissing the loading indicator. | `number` | | `enterAnimation` | -- | Animation to use when the loading indicator is presented. | `AnimationBuilder` | -| `keyboardClose` | `keyboard-close` | If true, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | +| `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` | | `message` | `message` | Optional text content to display in the loading indicator. | `string` | | `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | | `overlayIndex` | `overlay-index` | | `number` | -| `showBackdrop` | `show-backdrop` | If true, a backdrop will be displayed behind the loading indicator. Defaults to `true`. | `boolean` | +| `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` | -| `translucent` | `translucent` | If true, the loading indicator will be translucent. Defaults to `false`. | `boolean` | +| `translucent` | `translucent` | If `true`, the loading indicator will be translucent. Defaults to `false`. | `boolean` | ## Events diff --git a/core/src/components/menu-controller/animations/overlay.ts b/core/src/components/menu-controller/animations/overlay.ts index b408bc34e1..e3845c06a0 100644 --- a/core/src/components/menu-controller/animations/overlay.ts +++ b/core/src/components/menu-controller/animations/overlay.ts @@ -4,7 +4,6 @@ import { baseAnimation } from './base'; const BOX_SHADOW_WIDTH = 8; /** - * @hidden * Menu Overlay Type * The menu slides over the content. The content * itself, which is under the menu, does not move. diff --git a/core/src/components/menu-controller/animations/push.ts b/core/src/components/menu-controller/animations/push.ts index 371a698615..01dacc93ed 100644 --- a/core/src/components/menu-controller/animations/push.ts +++ b/core/src/components/menu-controller/animations/push.ts @@ -3,7 +3,6 @@ import { Animation, MenuI } from '../../../interface'; import { baseAnimation } from './base'; /** - * @hidden * Menu Push Type * The content slides over to reveal the menu underneath. * The menu itself also slides over to reveal its bad self. diff --git a/core/src/components/menu-controller/animations/reveal.ts b/core/src/components/menu-controller/animations/reveal.ts index 57c97cb352..5e9f9cc994 100644 --- a/core/src/components/menu-controller/animations/reveal.ts +++ b/core/src/components/menu-controller/animations/reveal.ts @@ -3,7 +3,6 @@ import { Animation, MenuI } from '../../../interface'; import { baseAnimation } from './base'; /** - * @hidden * Menu Reveal Type * The content slides over to reveal the menu underneath. * The menu itself, which is under the content, does not move. diff --git a/core/src/components/menu-controller/menu-controller.ts b/core/src/components/menu-controller/menu-controller.ts index 1867028e08..d5c6f10417 100644 --- a/core/src/components/menu-controller/menu-controller.ts +++ b/core/src/components/menu-controller/menu-controller.ts @@ -90,7 +90,7 @@ export class MenuController implements MenuControllerI { } /** - * Returns true if the specified menu is open. If the menu is not specified, it + * Returns `true` if the specified menu is open. If the menu is not specified, it * will return true if any menu is currently open. */ @Method() @@ -105,7 +105,7 @@ export class MenuController implements MenuControllerI { } /** - * Returns true if the specified menu is enabled. + * Returns `true` if the specified menu is enabled. */ @Method() async isEnabled(menuId?: string | null): Promise { @@ -184,7 +184,7 @@ export class MenuController implements MenuControllerI { } /** - * Returns true if any menu is currently animating. + * Returns `true` if any menu is currently animating. */ @Method() async isAnimating(): Promise { @@ -192,6 +192,13 @@ export class MenuController implements MenuControllerI { return this.isAnimatingSync(); } + /** + * Registers a new animation that can be used in any `ion-menu`. + * + * ``` + * + * ``` + */ @Method() registerAnimation(name: string, animation: AnimationBuilder) { this.menuAnimations.set(name, animation); diff --git a/core/src/components/menu-controller/readme.md b/core/src/components/menu-controller/readme.md index 63a8f895f1..db35c53af9 100644 --- a/core/src/components/menu-controller/readme.md +++ b/core/src/components/menu-controller/readme.md @@ -87,7 +87,7 @@ Type: `Promise` ### `isAnimating() => Promise` -Returns true if any menu is currently animating. +Returns `true` if any menu is currently animating. #### Returns @@ -97,7 +97,7 @@ Type: `Promise` ### `isEnabled(menuId?: string | null | undefined) => Promise` -Returns true if the specified menu is enabled. +Returns `true` if the specified menu is enabled. #### Parameters @@ -113,7 +113,7 @@ Type: `Promise` ### `isOpen(menuId?: string | null | undefined) => Promise` -Returns true if the specified menu is open. If the menu is not specified, it +Returns `true` if the specified menu is open. If the menu is not specified, it will return true if any menu is currently open. #### Parameters @@ -146,7 +146,11 @@ Type: `Promise` ### `registerAnimation(name: string, animation: AnimationBuilder) => void` +Registers a new animation that can be used in any `ion-menu`. +``` + * + * ``` #### Parameters diff --git a/core/src/components/menu/menu.tsx b/core/src/components/menu/menu.tsx index eae2ea56c6..ab84baf05d 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. Default `false`. + * If `true`, the menu is disabled. Default `false`. */ @Prop({ mutable: true }) disabled = false; @@ -102,7 +102,7 @@ export class Menu implements ComponentInterface, MenuI { } /** - * If true, swiping the menu is enabled. Default `true`. + * If `true`, swiping the menu is enabled. Default `true`. */ @Prop() swipeGesture = true; @@ -137,6 +137,8 @@ export class Menu implements ComponentInterface, MenuI { /** * Emitted when the menu state is changed. + * + * @internal */ @Event() protected ionMenuChange!: EventEmitter; @@ -227,31 +229,56 @@ export class Menu implements ComponentInterface, MenuI { } } + /** + * Returns `true` is the menu is open. + */ @Method() isOpen(): Promise { return Promise.resolve(this._isOpen); } + /** + * Returns `true` is the menu is active. + * + * A menu is active when it can be opened or closed, meaning it's enabled + * and it's not part of a `ion-split-pane`. + */ @Method() isActive(): Promise { return Promise.resolve(this._isActive()); } + /** + * Opens the menu. If the menu is already open or it can't be opened, + * it returns `false`. + */ @Method() open(animated = true): Promise { return this.setOpen(true, animated); } + /** + * Closes the menu. If the menu is already closed or it can't be closed, + * it returns `false`. + */ @Method() close(animated = true): Promise { return this.setOpen(false, animated); } + /** + * Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it. + * If the operation can't be completed successfully, it returns `false`. + */ @Method() toggle(animated = true): Promise { return this.setOpen(!this._isOpen, animated); } + /** + * Opens or closes the button. + * If the operation can't be completed successfully, it returns `false`. + */ @Method() setOpen(shouldOpen: boolean, animated = true): Promise { return this.menuCtrl!._setOpen(this, shouldOpen, animated); @@ -260,7 +287,7 @@ export class Menu implements ComponentInterface, MenuI { async _setOpen(shouldOpen: boolean, animated = true): Promise { // If the menu is disabled or it is currently being animated, let's do nothing if (!this._isActive() || this.isAnimating || shouldOpen === this._isOpen) { - return this._isOpen; + return false; } this.beforeAnimation(shouldOpen); @@ -268,7 +295,7 @@ export class Menu implements ComponentInterface, MenuI { await this.startAnimation(shouldOpen, animated); this.afterAnimation(shouldOpen); - return shouldOpen; + return true; } private async loadAnimation(): Promise { diff --git a/core/src/components/menu/readme.md b/core/src/components/menu/readme.md index 043e57c280..83e2f3129e 100644 --- a/core/src/components/menu/readme.md +++ b/core/src/components/menu/readme.md @@ -16,30 +16,30 @@ These can be controlled from the templates, or programmatically using the MenuCo | Property | Attribute | Description | Type | | -------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------ | --------- | | `contentId` | `content-id` | The content's id the menu should use. | `string` | -| `disabled` | `disabled` | If true, the menu is disabled. Default `false`. | `boolean` | +| `disabled` | `disabled` | If `true`, the menu is disabled. Default `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` | | `side` | `side` | Which side of the view the menu should be placed. Default `"start"`. | `Side` | -| `swipeGesture` | `swipe-gesture` | If true, swiping the menu is enabled. Default `true`. | `boolean` | +| `swipeGesture` | `swipe-gesture` | If `true`, swiping the menu is enabled. Default `true`. | `boolean` | | `type` | `type` | The display type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`. | `string` | ## Events -| Event | Description | -| --------------- | -------------------------------------------- | -| `ionDidClose` | Emitted when the menu is closed. | -| `ionDidOpen` | Emitted when the menu is open. | -| `ionMenuChange` | Emitted when the menu state is changed. | -| `ionWillClose` | Emitted when the menu is about to be closed. | -| `ionWillOpen` | Emitted when the menu is about to be opened. | +| Event | 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. | ## Methods ### `close(animated?: boolean) => Promise` - +Closes the menu. If the menu is already closed or it can't be closed, +it returns `false`. #### Parameters @@ -55,7 +55,10 @@ Type: `Promise` ### `isActive() => Promise` +Returns `true` is the menu is active. +A menu is active when it can be opened or closed, meaning it's enabled +and it's not part of a `ion-split-pane`. #### Returns @@ -65,7 +68,7 @@ Type: `Promise` ### `isOpen() => Promise` - +Returns `true` is the menu is open. #### Returns @@ -75,7 +78,8 @@ Type: `Promise` ### `open(animated?: boolean) => Promise` - +Opens the menu. If the menu is already open or it can't be opened, +it returns `false`. #### Parameters @@ -91,7 +95,8 @@ Type: `Promise` ### `setOpen(shouldOpen: boolean, animated?: boolean) => Promise` - +Opens or closes the button. +If the operation can't be completed successfully, it returns `false`. #### Parameters @@ -108,7 +113,8 @@ Type: `Promise` ### `toggle(animated?: boolean) => Promise` - +Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it. +If the operation can't be completed successfully, it returns `false`. #### Parameters diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx index 4d6d510249..1da0d9eaa3 100644 --- a/core/src/components/modal/modal.tsx +++ b/core/src/components/modal/modal.tsx @@ -29,7 +29,10 @@ export class Modal implements ComponentInterface, OverlayInterface { @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement; @Prop({ context: 'config' }) config!: Config; + /** @internal */ @Prop() overlayIndex!: number; + + /** @internal */ @Prop() delegate?: FrameworkDelegate; /** @@ -39,7 +42,7 @@ export class Modal implements ComponentInterface, OverlayInterface { @Prop() mode!: Mode; /** - * If true, the keyboard will be automatically dismissed when the overlay is presented. + * If `true`, the keyboard will be automatically dismissed when the overlay is presented. */ @Prop() keyboardClose = true; @@ -70,17 +73,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. Defaults to `true`. */ @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. Defaults to `true`. */ @Prop() showBackdrop = true; /** - * If true, the modal will animate. Defaults to `true`. + * If `true`, the modal will animate. Defaults to `true`. */ @Prop() animated = true; diff --git a/core/src/components/modal/readme.md b/core/src/components/modal/readme.md index 4b824fc2b7..0c0d545739 100644 --- a/core/src/components/modal/readme.md +++ b/core/src/components/modal/readme.md @@ -16,18 +16,18 @@ Modals can be created using a [Modal Controller](../../modal-controller/ModalCon | 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` | +| `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. | `ComponentProps` | | `component` | `component` | The component to display inside of the modal. | `ComponentRef` | | `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string`, `string[]` | | `delegate` | -- | | `FrameworkDelegate` | | `enterAnimation` | -- | Animation to use when the modal is presented. | `AnimationBuilder` | -| `keyboardClose` | `keyboard-close` | If true, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | +| `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` | | `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | | `overlayIndex` | `overlay-index` | | `number` | -| `showBackdrop` | `show-backdrop` | If true, a backdrop will be displayed behind the modal. Defaults to `true`. | `boolean` | +| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the modal. Defaults to `true`. | `boolean` | ## Events diff --git a/core/src/components/nav/nav.tsx b/core/src/components/nav/nav.tsx index 44c12a310d..9ac9577393 100644 --- a/core/src/components/nav/nav.tsx +++ b/core/src/components/nav/nav.tsx @@ -31,8 +31,11 @@ export class Nav implements NavOutlet { @Prop({ context: 'window' }) win!: Window; @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement; + /** @internal */ + @Prop() delegate?: FrameworkDelegate; + /** - * If the nav component should allow for swipe-to-go-back + * If the nav component should allow for swipe-to-go-back. */ @Prop({ mutable: true }) swipeGesture?: boolean; @Watch('swipeGesture') @@ -43,13 +46,15 @@ export class Nav implements NavOutlet { } /** - * If the nav should animate the components or not + * If `true`, the nav should animate the transition of components. Default to `true`. */ @Prop() animated = true; - @Prop() animation?: AnimationBuilder; - /** @hidden */ - @Prop() delegate?: FrameworkDelegate; + /** + * 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. + */ + @Prop() animation?: AnimationBuilder; /** * Any parameters for the root component @@ -321,7 +326,7 @@ export class Nav implements NavOutlet { ); } - /** @hidden */ + /** @internal */ @Method() setRouteId( id: string, @@ -379,7 +384,7 @@ export class Nav implements NavOutlet { return promise; } - /** @hidden */ + /** @internal */ @Method() async getRouteId(): Promise { const active = this.getActiveSync(); @@ -409,7 +414,7 @@ export class Nav implements NavOutlet { } /** - * Returns true or false if the current view can go back + * Returns `true` or false if the current view can go back */ @Method() canGoBack(view?: ViewController): Promise { @@ -448,7 +453,7 @@ export class Nav implements NavOutlet { // _queueTrns() adds a navigation stack change to the queue and schedules it to run: // 1. _nextTrns(): consumes the next transition in the queue // 2. _viewInit(): initializes enteringView if required - // 3. _viewTest(): ensures canLeave/canEnter returns true, so the operation can continue + // 3. _viewTest(): ensures canLeave/canEnter Returns `true`, so the operation can continue // 4. _postViewInit(): add/remove the views from the navigation stack // 5. _transitionInit(): initializes the visual transition if required and schedules it to run // 6. _viewAttachToDOM(): attaches the enteringView to the DOM diff --git a/core/src/components/nav/readme.md b/core/src/components/nav/readme.md index 7d4131d193..8c35179274 100644 --- a/core/src/components/nav/readme.md +++ b/core/src/components/nav/readme.md @@ -9,14 +9,14 @@ Unlike RouterOutlet, Nav is not tied to a particular router. Meaning that if we ## Properties -| Property | Attribute | Description | Type | -| -------------- | --------------- | ------------------------------------------------------ | ------------------- | -| `animated` | `animated` | If the nav should animate the components or not | `boolean` | -| `animation` | -- | | `AnimationBuilder` | -| `delegate` | -- | | `FrameworkDelegate` | -| `rootParams` | -- | Any parameters for the root component | `ComponentProps` | -| `root` | `root` | Root NavComponent to load | `NavComponent` | -| `swipeGesture` | `swipe-gesture` | If the nav component should allow for swipe-to-go-back | `boolean` | +| 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` | +| `delegate` | -- | | `FrameworkDelegate` | +| `rootParams` | -- | Any parameters for the root component | `ComponentProps` | +| `root` | `root` | Root NavComponent to load | `NavComponent` | +| `swipeGesture` | `swipe-gesture` | If the nav component should allow for swipe-to-go-back. | `boolean` | ## Events @@ -32,7 +32,7 @@ Unlike RouterOutlet, Nav is not tied to a particular router. Meaning that if we ### `canGoBack(view?: ViewController | undefined) => Promise` -Returns true or false if the current view can go back +Returns `true` or false if the current view can go back #### Parameters diff --git a/core/src/components/nav/view-controller.ts b/core/src/components/nav/view-controller.ts index 7cbabea375..da06a1924a 100644 --- a/core/src/components/nav/view-controller.ts +++ b/core/src/components/nav/view-controller.ts @@ -20,9 +20,6 @@ export class ViewController { public params: ComponentProps | undefined ) {} - /** - * @hidden - */ async init(container: HTMLElement) { this.state = ViewState.Attached; @@ -33,7 +30,6 @@ export class ViewController { } /** - * @hidden * DOM WRITE */ _destroy() { diff --git a/core/src/components/picker-column/picker-column.tsx b/core/src/components/picker-column/picker-column.tsx index 055730f786..97dd22bace 100644 --- a/core/src/components/picker-column/picker-column.tsx +++ b/core/src/components/picker-column/picker-column.tsx @@ -28,6 +28,7 @@ export class PickerColumnCmp implements ComponentInterface { @Prop({ context: 'queue' }) queue!: QueueApi; + /** @internal */ @Prop() col!: PickerColumn; componentWillLoad() { diff --git a/core/src/components/picker-controller/picker-controller.tsx b/core/src/components/picker-controller/picker-controller.tsx index 814c7fe0ef..bb83b24136 100644 --- a/core/src/components/picker-controller/picker-controller.tsx +++ b/core/src/components/picker-controller/picker-controller.tsx @@ -11,7 +11,7 @@ export class PickerController implements ComponentInterface, OverlayController { @Prop({ context: 'document' }) doc!: Document; - /* + /** * Create a picker overlay with picker options. */ @Method() @@ -19,7 +19,7 @@ export class PickerController implements ComponentInterface, OverlayController { return createOverlay(this.doc.createElement('ion-picker'), opts); } - /* + /** * Dismiss the open picker overlay. */ @Method() @@ -27,7 +27,7 @@ export class PickerController implements ComponentInterface, OverlayController { return dismissOverlay(this.doc, data, role, 'ion-picker', id); } - /* + /** * Get the most recently opened picker overlay. */ @Method() diff --git a/core/src/components/picker-controller/readme.md b/core/src/components/picker-controller/readme.md index 8d9f336979..300eb182d2 100644 --- a/core/src/components/picker-controller/readme.md +++ b/core/src/components/picker-controller/readme.md @@ -9,7 +9,7 @@ ### `create(opts: PickerOptions) => Promise` - +Create a picker overlay with picker options. #### Parameters @@ -25,7 +25,7 @@ Type: `Promise` ### `dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise` - +Dismiss the open picker overlay. #### Parameters @@ -43,7 +43,7 @@ Type: `Promise` ### `getTop() => Promise` - +Get the most recently opened picker overlay. #### Returns diff --git a/core/src/components/picker/picker.tsx b/core/src/components/picker/picker.tsx index 1301dc7dd4..9fe104a3c1 100644 --- a/core/src/components/picker/picker.tsx +++ b/core/src/components/picker/picker.tsx @@ -25,7 +25,7 @@ export class Picker implements ComponentInterface, OverlayInterface { @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement; @Prop({ context: 'config' }) config!: Config; - /** @hidden */ + /** @internal */ @Prop() overlayIndex!: number; /** @@ -35,7 +35,7 @@ export class Picker implements ComponentInterface, OverlayInterface { @Prop() mode!: Mode; /** - * If true, the keyboard will be automatically dismissed when the overlay is presented. + * If `true`, the keyboard will be automatically dismissed when the overlay is presented. */ @Prop() keyboardClose = true; @@ -71,17 +71,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. Defaults to `true`. */ @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. Defaults to `true`. */ @Prop() backdropDismiss = true; /** - * If true, the picker will animate. Defaults to `true`. + * If `true`, the picker will animate. Defaults to `true`. */ @Prop() animated = true; diff --git a/core/src/components/picker/readme.md b/core/src/components/picker/readme.md index 8ce9ab6d9d..c7f16a135f 100644 --- a/core/src/components/picker/readme.md +++ b/core/src/components/picker/readme.md @@ -11,18 +11,18 @@ A Picker is a dialog that displays a row of buttons and columns underneath. It a | 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` | +| `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[]` | | `duration` | `duration` | Number of milliseconds to wait before dismissing the picker. | `number` | | `enterAnimation` | -- | Animation to use when the picker is presented. | `AnimationBuilder` | -| `keyboardClose` | `keyboard-close` | If true, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | +| `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` | | `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | | `overlayIndex` | `overlay-index` | | `number` | -| `showBackdrop` | `show-backdrop` | If true, a backdrop will be displayed behind the picker. Defaults to `true`. | `boolean` | +| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the picker. Defaults to `true`. | `boolean` | ## Events diff --git a/core/src/components/platform/readme.md b/core/src/components/platform/readme.md index af11135f7a..eef6f15bee 100644 --- a/core/src/components/platform/readme.md +++ b/core/src/components/platform/readme.md @@ -9,12 +9,12 @@ The Platform service can be used to get information about your current device. Y | Method | Description | |---------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------| -| `is` | Returns true/false based on platform. Available options are android, cordova, core, ios, ipad, iphone, mobile, mobileweb, phablet, tablet, desktop, electron. | +| `is` | Returns `true`/false based on platform. Available options are android, cordova, core, ios, ipad, iphone, mobile, mobileweb, phablet, tablet, desktop, electron. | | `platforms` | Returns an array of platforms that the current device matches. | | `versions` | Returns an object that contains the major, minor, and patcher version of the current device. | | `ready` | Returns a promise that resolves when the native bridge is ready in Cordova, or when the DOM is fully loaded in the browser. | -| `isLandscape` | Returns true of false if the device is in landscape. | -| `isPortrait` | Returns true of false if the device is in portrait. | +| `isLandscape` | Returns `true` of false if the device is in landscape. | +| `isPortrait` | Returns `true` of false if the device is in portrait. | diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx index 31852bdd71..2ac14b6d05 100644 --- a/core/src/components/popover/popover.tsx +++ b/core/src/components/popover/popover.tsx @@ -30,7 +30,11 @@ export class Popover implements ComponentInterface, OverlayInterface { @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement; @Prop({ context: 'config' }) config!: Config; + + /** @internal */ @Prop() delegate?: FrameworkDelegate; + + /** @internal */ @Prop() overlayIndex!: number; /** @@ -60,7 +64,7 @@ export class Popover implements ComponentInterface, OverlayInterface { @Prop() componentProps?: ComponentProps; /** - * If true, the keyboard will be automatically dismissed when the overlay is presented. + * If `true`, the keyboard will be automatically dismissed when the overlay is presented. */ @Prop() keyboardClose = true; @@ -71,7 +75,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. Defaults to `true`. */ @Prop() backdropDismiss = true; @@ -81,17 +85,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. Defaults to `true`. */ @Prop() showBackdrop = true; /** - * If true, the popover will be translucent. Defaults to `false`. + * If `true`, the popover will be translucent. Defaults to `false`. */ @Prop() translucent = false; /** - * If true, the popover will animate. Defaults to `true`. + * If `true`, the popover will animate. Defaults to `true`. */ @Prop() animated = true; diff --git a/core/src/components/popover/readme.md b/core/src/components/popover/readme.md index 005df066ee..ce74e4a51e 100644 --- a/core/src/components/popover/readme.md +++ b/core/src/components/popover/readme.md @@ -18,20 +18,20 @@ To present a popover, call the `present` method on a popover instance. In order | 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` | +| `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. | `ComponentProps` | | `component` | `component` | The component to display inside of the popover. | `ComponentRef` | | `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string`, `string[]` | | `delegate` | -- | | `FrameworkDelegate` | | `enterAnimation` | -- | Animation to use when the popover is presented. | `AnimationBuilder` | | `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` | +| `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` | | `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | | `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` | +| `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` | ## Events diff --git a/core/src/components/radio-group/radio-group.tsx b/core/src/components/radio-group/radio-group.tsx index 96a1d51a6d..1bb3a408e1 100644 --- a/core/src/components/radio-group/radio-group.tsx +++ b/core/src/components/radio-group/radio-group.tsx @@ -13,8 +13,8 @@ export class RadioGroup implements ComponentInterface { @Element() el!: HTMLElement; - /* - * If true, the radios can be deselected. Default false. + /** + * If `true`, the radios can be deselected. Default false. */ @Prop() allowEmptySelection = false; @@ -23,8 +23,8 @@ export class RadioGroup implements ComponentInterface { */ @Prop() name: string = this.inputId; - /* - * If true, the user cannot interact with the radio group. Default false. + /** + * If `true`, the user cannot interact with the radio group. Default false. */ @Prop() disabled = false; diff --git a/core/src/components/radio-group/readme.md b/core/src/components/radio-group/readme.md index 5d32cd4264..12e965868b 100644 --- a/core/src/components/radio-group/readme.md +++ b/core/src/components/radio-group/readme.md @@ -13,12 +13,12 @@ radio button within the same group. ## Properties -| Property | Attribute | Description | Type | -| --------------------- | ----------------------- | --------------------------------------------------------------- | ------------- | -| `allowEmptySelection` | `allow-empty-selection` | | `boolean` | -| `disabled` | `disabled` | | `boolean` | -| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | -| `value` | -- | the value of the radio group. | `any`, `null` | +| Property | Attribute | Description | Type | +| --------------------- | ----------------------- | ------------------------------------------------------------------------ | ------------- | +| `allowEmptySelection` | `allow-empty-selection` | If `true`, the radios can be deselected. Default false. | `boolean` | +| `disabled` | `disabled` | If `true`, the user cannot interact with the radio group. Default 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`, `null` | ## Events diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx index ec8ffdccce..b41e6964a4 100644 --- a/core/src/components/radio/radio.tsx +++ b/core/src/components/radio/radio.tsx @@ -39,13 +39,13 @@ 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. Defaults to `false`. */ @Prop() disabled = false; /** - * If true, the radio is selected. Defaults to `false`. + * If `true`, the radio is selected. Defaults to `false`. */ @Prop({ mutable: true }) checked = false; diff --git a/core/src/components/radio/readme.md b/core/src/components/radio/readme.md index 87531810dd..6784690cf1 100644 --- a/core/src/components/radio/readme.md +++ b/core/src/components/radio/readme.md @@ -14,9 +14,9 @@ An `ion-radio-group` can be used to group a set of radios. When radios are insid | Property | Attribute | Description | Type | | ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | -| `checked` | `checked` | If true, the radio is selected. Defaults to `false`. | `boolean` | +| `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). | `Color` | -| `disabled` | `disabled` | | `boolean` | +| `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"`. | `Mode` | | `name` | `name` | The name of the control, which is submitted with the form data. | `string` | | `value` | -- | the value of the radio. | `any`, `null` | diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx index 1abe3d53d8..5e45218b7a 100644 --- a/core/src/components/range/range.tsx +++ b/core/src/components/range/range.tsx @@ -87,13 +87,13 @@ export class Range implements ComponentInterface { } /** - * If true, a pin with integer value is shown when the knob + * If `true`, a pin with integer value is shown when the knob * is pressed. Defaults to `false`. */ @Prop() pin = false; /** - * If true, the knob snaps to tick marks evenly spaced based + * If `true`, the knob snaps to tick marks evenly spaced based * on the step property value. Defaults to `false`. */ @Prop() snaps = false; @@ -103,8 +103,8 @@ export class Range implements ComponentInterface { */ @Prop() step = 1; - /* - * If true, the user cannot interact with the range. Defaults to `false`. + /** + * If `true`, the user cannot interact with the range. Defaults to `false`. */ @Prop() disabled = false; @Watch('disabled') diff --git a/core/src/components/range/readme.md b/core/src/components/range/readme.md index 189f48d3c4..41d6c918ec 100644 --- a/core/src/components/range/readme.md +++ b/core/src/components/range/readme.md @@ -21,14 +21,14 @@ left or right of the range. | ----------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | | `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). | `Color` | | `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` | | `boolean` | +| `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"`. | `Mode` | | `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` | +| `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. | `RangeValue` | diff --git a/core/src/components/refresher/readme.md b/core/src/components/refresher/readme.md index a4029856fd..cee40cf120 100644 --- a/core/src/components/refresher/readme.md +++ b/core/src/components/refresher/readme.md @@ -18,7 +18,7 @@ refresher. | 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` | +| `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` | diff --git a/core/src/components/refresher/refresher.tsx b/core/src/components/refresher/refresher.tsx index 05d69466f5..cffcc0e585 100644 --- a/core/src/components/refresher/refresher.tsx +++ b/core/src/components/refresher/refresher.tsx @@ -61,7 +61,7 @@ export class Refresher implements ComponentInterface { @Prop() snapbackDuration = '280ms'; /** - * If true, the refresher will be hidden. Defaults to `false`. + * If `true`, the refresher will be hidden. Defaults to `false`. */ @Prop() disabled = false; @Watch('disabled') diff --git a/core/src/components/reorder-group/readme.md b/core/src/components/reorder-group/readme.md index f06f7db596..e162197f26 100644 --- a/core/src/components/reorder-group/readme.md +++ b/core/src/components/reorder-group/readme.md @@ -51,9 +51,9 @@ 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 | +| ---------- | ---------- | ---------------------------------------------------------- | --------- | +| `disabled` | `disabled` | If `true`, the reorder will be hidden. Defaults to `true`. | `boolean` | ## Events @@ -67,7 +67,8 @@ This utility is really handy when ### `complete(listOrReorder?: boolean | any[] | undefined) => Promise` - +This method must be called once the `ionItemReorder` event is handled in order +to complete the reorder operation. #### Parameters diff --git a/core/src/components/reorder-group/reorder-group.tsx b/core/src/components/reorder-group/reorder-group.tsx index 276749d5ee..32450cb210 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. Defaults to `true`. */ @Prop() disabled = true; @Watch('disabled') @@ -86,6 +86,10 @@ export class ReorderGroup implements ComponentInterface { this.onEnd(); } + /** + * This method must be called once the `ionItemReorder` event is handled in order + * to complete the reorder operation. + */ @Method() complete(listOrReorder?: boolean | any[]): Promise { return Promise.resolve(this.completeSync(listOrReorder)); diff --git a/core/src/components/router-outlet/readme.md b/core/src/components/router-outlet/readme.md index a419b91c18..9bfb529cfd 100644 --- a/core/src/components/router-outlet/readme.md +++ b/core/src/components/router-outlet/readme.md @@ -13,20 +13,11 @@ While RouterOutlet has methods for navigating around, it's recommended to use th ## Properties -| Property | Attribute | Description | Type | -| ----------- | ---------- | ----------- | ------------------- | -| `animated` | `animated` | | `boolean` | -| `animation` | -- | | `AnimationBuilder` | -| `delegate` | -- | | `FrameworkDelegate` | - - -## Events - -| Event | Description | -| ------------------ | ----------- | -| `ionNavDidChange` | | -| `ionNavWillChange` | | -| `ionNavWillLoad` | | +| 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` | +| `delegate` | -- | | `FrameworkDelegate` | ## Methods @@ -51,7 +42,7 @@ Type: `Promise` ### `getRouteId() => Promise` -Returns the ID for the current route + #### Returns diff --git a/core/src/components/router-outlet/route-outlet.tsx b/core/src/components/router-outlet/route-outlet.tsx index d532e7bb9a..d89eb6a011 100644 --- a/core/src/components/router-outlet/route-outlet.tsx +++ b/core/src/components/router-outlet/route-outlet.tsx @@ -24,12 +24,33 @@ export class RouterOutlet implements ComponentInterface, NavOutlet { @Prop({ context: 'window' }) win!: Window; @Prop({ context: 'queue' }) queue!: QueueApi; - @Prop() animated = true; - @Prop() animation?: AnimationBuilder; + /** @internal */ @Prop() delegate?: FrameworkDelegate; + /** + * If `true`, the router-outlet should animate the transition of components. Default to `true`. + */ + @Prop() animated = true; + + /** + * 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. + */ + @Prop() animation?: AnimationBuilder; + + /** + * @internal + */ @Event() ionNavWillLoad!: EventEmitter; + + /** + * @internal + */ @Event() ionNavWillChange!: EventEmitter; + + /** + * @internal + */ @Event() ionNavDidChange!: EventEmitter; componentWillLoad() { @@ -63,7 +84,7 @@ export class RouterOutlet implements ComponentInterface, NavOutlet { return true; } - /** @hidden */ + /** @internal */ @Method() async commit(enteringEl: HTMLElement, leavingEl: HTMLElement | undefined, opts?: RouterOutletOptions): Promise { const unlock = await this.lock(); @@ -77,7 +98,7 @@ export class RouterOutlet implements ComponentInterface, NavOutlet { return changed; } - /** @hidden */ + /** @internal */ @Method() async setRouteId(id: string, params: ComponentProps | undefined, direction: number): Promise { const changed = await this.setRoot(id, params, { @@ -90,7 +111,7 @@ export class RouterOutlet implements ComponentInterface, NavOutlet { }; } - /** Returns the ID for the current route */ + /** @internal */ @Method() async getRouteId(): Promise { const active = this.activeEl; diff --git a/core/src/components/router/readme.md b/core/src/components/router/readme.md index 8789af3c11..813d0e75fd 100644 --- a/core/src/components/router/readme.md +++ b/core/src/components/router/readme.md @@ -38,7 +38,7 @@ If you're using Angular, please see [ion-router-outlet](../router-outlet) instea ### `goBack() => Promise` - +Go back to previous page in the window.history. #### Returns @@ -74,7 +74,7 @@ Type: `void` ### `push(url: string, direction?: RouterDirection) => Promise` -Navigate to the specified URL +Navigate to the specified URL. #### Parameters diff --git a/core/src/components/router/router.tsx b/core/src/components/router/router.tsx index d8bf2724b9..7876defb46 100644 --- a/core/src/components/router/router.tsx +++ b/core/src/components/router/router.tsx @@ -86,7 +86,9 @@ export class Router implements ComponentInterface { ev.detail.register(0, () => this.goBack()); } - /** Navigate to the specified URL */ + /** + * Navigate to the specified URL. + */ @Method() push(url: string, direction: RouterDirection = 'forward') { if (url.startsWith('.')) { @@ -100,13 +102,16 @@ export class Router implements ComponentInterface { return this.writeNavStateRoot(path, intent); } + /** + * Go back to previous page in the window.history. + */ @Method() goBack() { - this.win.history.back(1); + this.win.history.back(); return Promise.resolve(this.waitPromise); } - /** @hidden */ + /** @internal */ @Method() printDebug() { console.debug('CURRENT PATH', this.getPath()); @@ -115,7 +120,7 @@ export class Router implements ComponentInterface { printRedirects(readRedirects(this.el)); } - /** @hidden */ + /** @internal */ @Method() async navChanged(intent: number): Promise { if (this.busy) { diff --git a/core/src/components/searchbar/readme.md b/core/src/components/searchbar/readme.md index 9ccb193f66..6f6698fa22 100644 --- a/core/src/components/searchbar/readme.md +++ b/core/src/components/searchbar/readme.md @@ -11,23 +11,23 @@ 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. Default `false`. | `boolean` | -| `autocomplete` | `autocomplete` | Set the input's autocomplete property. Values: `"on"`, `"off"`. Default `"off"`. | `string` | -| `autocorrect` | `autocorrect` | Set the input's autocorrect property. Values: `"on"`, `"off"`. Default `"off"`. | `string` | -| `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` | -| `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). | `Color` | -| `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"`. | `Mode` | -| `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` | -| `showCancelButton` | `show-cancel-button` | If true, show the cancel button. Default `false`. | `boolean` | -| `spellcheck` | `spellcheck` | If true, enable spellcheck on the input. Default `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. | `string` | +| Property | Attribute | Description | Type | +| ------------------ | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | +| `animated` | `animated` | If `true`, enable searchbar animation. Default `false`. | `boolean` | +| `autocomplete` | `autocomplete` | Set the input's autocomplete property. Default `"off"`. | `"on"`, `"off"` | +| `autocorrect` | `autocorrect` | Set the input's autocorrect property. Default `"off"`. | `"on"`, `"off"` | +| `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` | +| `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). | `Color` | +| `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"`. | `Mode` | +| `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` | +| `showCancelButton` | `show-cancel-button` | If `true`, show the cancel button. Default `false`. | `boolean` | +| `spellcheck` | `spellcheck` | If `true`, enable spellcheck on the input. Default `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. | `string` | ## Events @@ -46,7 +46,8 @@ A Searchbar should be used instead of an input to search lists. A clear button i ### `setFocus() => void` - +Sets focus on the specified `ion-searchbar`. Use this method instead of the global +`input.focus()`. #### Returns diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx index 4eef6722b7..ef3bdefd77 100644 --- a/core/src/components/searchbar/searchbar.tsx +++ b/core/src/components/searchbar/searchbar.tsx @@ -39,19 +39,19 @@ export class Searchbar implements ComponentInterface { @Prop() mode!: Mode; /** - * If true, enable searchbar animation. Default `false`. + * If `true`, enable searchbar animation. Default `false`. */ @Prop() animated = false; /** - * Set the input's autocomplete property. Values: `"on"`, `"off"`. Default `"off"`. + * Set the input's autocomplete property. Default `"off"`. */ - @Prop() autocomplete = 'off'; + @Prop() autocomplete: 'on' | 'off' = 'off'; /** - * Set the input's autocorrect property. Values: `"on"`, `"off"`. Default `"off"`. + * Set the input's autocorrect property. Default `"off"`. */ - @Prop() autocorrect = 'off'; + @Prop() autocorrect: 'on' | 'off' = 'off'; /** * Set the cancel button icon. Only applies to `md` mode. Defaults to `"md-arrow-back"`. @@ -89,12 +89,12 @@ export class Searchbar implements ComponentInterface { @Prop() searchIcon?: string; /** - * If true, show the cancel button. Default `false`. + * If `true`, show the cancel button. Default `false`. */ @Prop() showCancelButton = false; /** - * If true, enable spellcheck on the input. Default `false`. + * If `true`, enable spellcheck on the input. Default `false`. */ @Prop() spellcheck = false; @@ -153,6 +153,10 @@ export class Searchbar implements ComponentInterface { this.debounceChanged(); } + /** + * Sets focus on the specified `ion-searchbar`. Use this method instead of the global + * `input.focus()`. + */ @Method() setFocus() { this.nativeInput.focus(); diff --git a/core/src/components/segment-button/readme.md b/core/src/components/segment-button/readme.md index 3fc2239e63..e8faee0a41 100644 --- a/core/src/components/segment-button/readme.md +++ b/core/src/components/segment-button/readme.md @@ -10,9 +10,9 @@ Segment buttons are groups of related buttons inside of a [Segment](../../segmen | Property | Attribute | Description | Type | | ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | -| `checked` | `checked` | If true, the segment button is selected. Defaults to `false`. | `boolean` | +| `checked` | `checked` | | `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). | `Color` | -| `disabled` | `disabled` | | `boolean` | +| `disabled` | `disabled` | If `true`, the user cannot interact with the segment button. Default false. | `boolean` | | `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | | `value` | `value` | The value of the segment button. | `string` | diff --git a/core/src/components/segment-button/segment-button.tsx b/core/src/components/segment-button/segment-button.tsx index 8f7a03cba2..a533d6f5ee 100644 --- a/core/src/components/segment-button/segment-button.tsx +++ b/core/src/components/segment-button/segment-button.tsx @@ -28,12 +28,12 @@ export class SegmentButton implements ComponentInterface { @Prop() mode!: Mode; /** - * If true, the segment button is selected. Defaults to `false`. + * If `true`, the segment button is selected. Defaults to `false`. */ @Prop({ mutable: true }) checked = false; - /* - * If true, the user cannot interact with the segment button. Default false. + /** + * If `true`, the user cannot interact with the segment button. Default false. */ @Prop() disabled = false; diff --git a/core/src/components/segment/readme.md b/core/src/components/segment/readme.md index 40673ffadc..e12838dddc 100644 --- a/core/src/components/segment/readme.md +++ b/core/src/components/segment/readme.md @@ -13,7 +13,7 @@ Their functionality is similar to tabs, where selecting one will deselect all ot | 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). | `Color` | -| `disabled` | `disabled` | | `boolean` | +| `disabled` | `disabled` | If `true`, the user cannot interact with the segment. Defaults to `false`. | `boolean` | | `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | | `value` | `value` | the value of the segment. | `string`, `null` | diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx index 9583dba75e..29b6b2d115 100644 --- a/core/src/components/segment/segment.tsx +++ b/core/src/components/segment/segment.tsx @@ -28,8 +28,8 @@ export class Segment implements ComponentInterface { */ @Prop() mode!: Mode; - /* - * If true, the user cannot interact with the segment. Defaults to `false`. + /** + * If `true`, the user cannot interact with the segment. Defaults to `false`. */ @Prop() disabled = false; diff --git a/core/src/components/select-option/readme.md b/core/src/components/select-option/readme.md index 8d38058089..5f1041209d 100644 --- a/core/src/components/select-option/readme.md +++ b/core/src/components/select-option/readme.md @@ -8,11 +8,11 @@ SelectOption is a component that is a child element of Select. For more informat ## Properties -| Property | Attribute | Description | Type | -| ---------- | ---------- | ------------------------------------------------------------------------------ | --------- | -| `disabled` | `disabled` | If true, the user cannot interact with the select option. Defaults to `false`. | `boolean` | -| `selected` | `selected` | If true, the element is selected. | `boolean` | -| `value` | -- | The text value of the option. | `any` | +| Property | Attribute | Description | Type | +| ---------- | ---------- | -------------------------------------------------------------------------------- | --------- | +| `disabled` | `disabled` | If `true`, the user cannot interact with the select option. Defaults to `false`. | `boolean` | +| `selected` | `selected` | If `true`, the element is selected. | `boolean` | +| `value` | -- | The text value of the option. | `any` | ## Events diff --git a/core/src/components/select-option/select-option.tsx b/core/src/components/select-option/select-option.tsx index c08743c5e3..39f7f07109 100644 --- a/core/src/components/select-option/select-option.tsx +++ b/core/src/components/select-option/select-option.tsx @@ -10,12 +10,12 @@ export class SelectOption implements ComponentInterface { @Element() el!: HTMLElement; /** - * If true, the user cannot interact with the select option. Defaults to `false`. + * If `true`, the user cannot interact with the select option. Defaults to `false`. */ @Prop() disabled = false; /** - * If true, the element is selected. + * If `true`, the element is selected. */ @Prop() selected = false; diff --git a/core/src/components/select/readme.md b/core/src/components/select/readme.md index 024c2fc8d1..89091ffc5c 100644 --- a/core/src/components/select/readme.md +++ b/core/src/components/select/readme.md @@ -44,11 +44,11 @@ Since select uses the alert, action sheet and popover interfaces, options can be | Property | Attribute | Description | Type | | ------------------ | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | | `cancelText` | `cancel-text` | The text to display on the cancel button. Default: `Cancel`. | `string` | -| `disabled` | `disabled` | If true, the user cannot interact with the select. Defaults to `false`. | `boolean` | +| `disabled` | `disabled` | If `true`, the user cannot interact with the select. Defaults to `false`. | `boolean` | | `interfaceOptions` | -- | Any additional options that the `alert`, `action-sheet` or `popover` interface can take. See the [AlertController API docs](../../alert/AlertController/#create), the [ActionSheetController API docs](../../action-sheet/ActionSheetController/#create) and the [PopoverController API docs](../../popover/PopoverController/#create) for the create options for each interface. | `any` | | `interface` | `interface` | The interface the select should use: `action-sheet`, `popover` or `alert`. Default: `alert`. | `SelectInterface` | | `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | -| `multiple` | `multiple` | If true, the select can accept multiple values. | `boolean` | +| `multiple` | `multiple` | If `true`, the select can accept multiple values. | `boolean` | | `name` | `name` | The name of the control, which is submitted with the form data. | `string` | | `okText` | `ok-text` | The text to display on the ok button. Default: `OK`. | `string` | | `placeholder` | `placeholder` | The text to display when the select is empty. | `string`, `null` | @@ -71,7 +71,8 @@ Since select uses the alert, action sheet and popover interfaces, options can be ### `open(ev?: UIEvent | undefined) => Promise` - +Opens the select overlay, it could be an alert, action-sheet or popover, +based in `ion-select` settings. #### Parameters diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx index c3c16ef458..0514a62e2b 100644 --- a/core/src/components/select/select.tsx +++ b/core/src/components/select/select.tsx @@ -36,7 +36,7 @@ export class Select implements ComponentInterface { @Prop() mode!: Mode; /** - * If true, the user cannot interact with the select. Defaults to `false`. + * If `true`, the user cannot interact with the select. Defaults to `false`. */ @Prop() disabled = false; @@ -66,7 +66,7 @@ export class Select implements ComponentInterface { @Prop() selectedText?: string | null; /** - * If true, the select can accept multiple values. + * If `true`, the select can accept multiple values. */ @Prop() multiple = false; @@ -260,6 +260,10 @@ export class Select implements ComponentInterface { this.emitStyle(); } + /** + * Opens the select overlay, it could be an alert, action-sheet or popover, + * based in `ion-select` settings. + */ @Method() open(ev?: UIEvent): Promise { let selectInterface = this.interface; diff --git a/core/src/components/show-when/readme.md b/core/src/components/show-when/readme.md index 0f7805f965..289ee6089d 100644 --- a/core/src/components/show-when/readme.md +++ b/core/src/components/show-when/readme.md @@ -9,14 +9,14 @@ ShowWhen can watch for platform changes, mode changes, css media queries, and de ## Properties -| Property | Attribute | Description | Type | -| ------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- | -| `mediaQuery` | `media-query` | If the current media query matches this value, the element will show. | `string` | -| `modes` | `modes` | If the current platform matches the given value, the element will show. Accepts a comma separated list of modes to match against. | `string` | -| `or` | `or` | If false, and two or more conditions are set, the element will show when all are true. If true, and two or more conditions are set, the element will show when at least one is true. | `boolean` | -| `orientation` | `orientation` | If the current orientation matches this value, the element will show. | `string` | -| `platform` | `platform` | If the current platform matches the given value, the element will show. Accepts a comma separated list of platform to match against. | `string` | -| `size` | `size` | If the current screen width matches the given size, the element will show. Uses the build in sizes of xs, sm, md, lg, xl. | `string` | +| Property | Attribute | Description | Type | +| ------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | +| `mediaQuery` | `media-query` | If the current media query matches this value, the element will show. | `string` | +| `modes` | `modes` | If the current platform matches the given value, the element will show. Accepts a comma separated list of modes to match against. | `string` | +| `or` | `or` | If `false`, and two or more conditions are set, the element will show when all are true. If `true`, and two or more conditions are set, the element will show when at least one is true. | `boolean` | +| `orientation` | `orientation` | If the current orientation matches this value, the element will show. | `string` | +| `platform` | `platform` | If the current platform matches the given value, the element will show. Accepts a comma separated list of platform to match against. | `string` | +| `size` | `size` | If the current screen width matches the given size, the element will show. Uses the build in sizes of xs, sm, md, lg, xl. | `string` | ---------------------------------------------- diff --git a/core/src/components/show-when/show-when.tsx b/core/src/components/show-when/show-when.tsx index 1aad1be67f..a655a1a30e 100644 --- a/core/src/components/show-when/show-when.tsx +++ b/core/src/components/show-when/show-when.tsx @@ -44,8 +44,8 @@ export class ShowWhen implements ComponentInterface, DisplayWhen { @Prop() platform?: string; /** - * If false, and two or more conditions are set, the element will show when all are true. - * If true, and two or more conditions are set, the element will show when at least one is true. + * If `false`, and two or more conditions are set, the element will show when all are true. + * If `true`, and two or more conditions are set, the element will show when at least one is true. */ @Prop() or = false; diff --git a/core/src/components/slide/readme.md b/core/src/components/slide/readme.md index 80db6c4c94..e69070696d 100644 --- a/core/src/components/slide/readme.md +++ b/core/src/components/slide/readme.md @@ -10,13 +10,6 @@ See the [Slides API Docs](../slides) for more usage information. -## Events - -| Event | Description | -| ----------------- | ----------- | -| `ionSlideChanged` | | - - ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/slide/slide.tsx b/core/src/components/slide/slide.tsx index f7486f9ea2..4708561e7f 100644 --- a/core/src/components/slide/slide.tsx +++ b/core/src/components/slide/slide.tsx @@ -7,6 +7,7 @@ import { EventEmitter } from 'ionicons/dist/types/stencil.core'; }) export class Slide implements ComponentInterface { + /** @internal */ @Event() ionSlideChanged!: EventEmitter; componentDidLoad() { diff --git a/core/src/components/slides/readme.md b/core/src/components/slides/readme.md index 84586392ee..1ac0745128 100644 --- a/core/src/components/slides/readme.md +++ b/core/src/components/slides/readme.md @@ -25,8 +25,8 @@ Licensed under MIT | ----------- | ----------- | -------------------------------------------------------------------------------------------- | --------- | | `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | | `options` | -- | Options to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options | `any` | -| `pager` | `pager` | If true, show the pagination. Defaults to `false`. | `boolean` | -| `scrollbar` | `scrollbar` | If true, show the scrollbar. Defaults to `false`. | `boolean` | +| `pager` | `pager` | If `true`, show the pagination. Defaults to `false`. | `boolean` | +| `scrollbar` | `scrollbar` | If `true`, show the scrollbar. Defaults to `false`. | `boolean` | ## Events diff --git a/core/src/components/slides/slides.tsx b/core/src/components/slides/slides.tsx index f07be238fb..4888667e19 100644 --- a/core/src/components/slides/slides.tsx +++ b/core/src/components/slides/slides.tsx @@ -47,12 +47,12 @@ export class Slides implements ComponentInterface { } /** - * If true, show the pagination. Defaults to `false`. + * If `true`, show the pagination. Defaults to `false`. */ @Prop() pager = false; /** - * If true, show the scrollbar. Defaults to `false`. + * If `true`, show the scrollbar. Defaults to `false`. */ @Prop() scrollbar = false; diff --git a/core/src/components/spinner/readme.md b/core/src/components/spinner/readme.md index d85781c089..36383fd718 100644 --- a/core/src/components/spinner/readme.md +++ b/core/src/components/spinner/readme.md @@ -16,7 +16,7 @@ The default spinner to use is based on the platform. The default spinner for `io | `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). | `Color` | | `duration` | `duration` | Duration of the spinner animation in milliseconds. The default varies based on the spinner. | `number` | | `name` | -- | 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"`. | `SpinnerTypes` | -| `paused` | `paused` | If true, the spinner's animation will be paused. Defaults to `false`. | `boolean` | +| `paused` | `paused` | If `true`, the spinner's animation will be paused. Defaults to `false`. | `boolean` | ## CSS Custom Properties diff --git a/core/src/components/spinner/spinner.tsx b/core/src/components/spinner/spinner.tsx index 01c8c5328f..231c3684e9 100644 --- a/core/src/components/spinner/spinner.tsx +++ b/core/src/components/spinner/spinner.tsx @@ -35,7 +35,7 @@ export class Spinner implements ComponentInterface { @Prop() name?: SpinnerTypes; /** - * If true, the spinner's animation will be paused. Defaults to `false`. + * If `true`, the spinner's animation will be paused. Defaults to `false`. */ @Prop() paused = false; diff --git a/core/src/components/split-pane/readme.md b/core/src/components/split-pane/readme.md index 1278c3cc01..59d0ee9543 100644 --- a/core/src/components/split-pane/readme.md +++ b/core/src/components/split-pane/readme.md @@ -44,7 +44,7 @@ SplitPane also provides some predefined media queries that can be used. | Property | Attribute | Description | Type | | ---------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | -| `disabled` | `disabled` | If true, the split pane will be hidden. Defaults to `false`. | `boolean` | +| `disabled` | `disabled` | If `true`, the split pane will be hidden. Defaults to `false`. | `boolean` | | `when` | -- | When the split-pane should be shown. Can be a CSS media query expression, or a shortcut expression. Can also be a boolean expression. | `string`, `boolean` | diff --git a/core/src/components/split-pane/split-pane.tsx b/core/src/components/split-pane/split-pane.tsx index b3a73bfead..3d757dc8ec 100644 --- a/core/src/components/split-pane/split-pane.tsx +++ b/core/src/components/split-pane/split-pane.tsx @@ -34,7 +34,7 @@ export class SplitPane implements ComponentInterface { @Prop({ context: 'window' }) win!: Window; /** - * If true, the split pane will be hidden. Defaults to `false`. + * If `true`, the split pane will be hidden. Defaults to `false`. */ @Prop() disabled = false; diff --git a/core/src/components/tab/readme.md b/core/src/components/tab/readme.md index 7d5017db56..90f2581208 100644 --- a/core/src/components/tab/readme.md +++ b/core/src/components/tab/readme.md @@ -12,22 +12,22 @@ See the [Tabs API Docs](../Tabs/) for more details on configuring Tabs. ## Properties -| Property | Attribute | Description | Type | -| -------------------- | ------------------------ | ------------------------------------------------------------------------- | ------------------- | -| `active` | `active` | If true, sets the tab as the active tab. | `boolean` | -| `badgeColor` | `badge-color` | The badge color for the tab button. | `Color` | -| `badge` | `badge` | The badge for the tab. | `string` | -| `btnId` | `btn-id` | hidden | `string` | -| `component` | `component` | The component to display inside of the tab. | `ComponentRef` | -| `delegate` | -- | hidden | `FrameworkDelegate` | -| `disabled` | `disabled` | If true, the user cannot interact with the tab. Defaults to `false`. | `boolean` | -| `href` | `href` | The URL which will be used as the `href` within this tab's button anchor. | `string` | -| `icon` | `icon` | The icon for the tab. | `string` | -| `label` | `label` | The label of the tab. | `string` | -| `name` | `name` | The name of the tab. | `string` | -| `selected` | `selected` | If true, the tab will be selected. Defaults to `false`. | `boolean` | -| `show` | `show` | If true, the tab button is visible within the tabbar. Defaults to `true`. | `boolean` | -| `tabsHideOnSubPages` | `tabs-hide-on-sub-pages` | If true, hide the tabs on child pages. | `boolean` | +| Property | Attribute | Description | Type | +| -------------------- | ------------------------ | --------------------------------------------------------------------------- | ------------------- | +| `active` | `active` | If `true`, sets the tab as the active tab. | `boolean` | +| `badgeColor` | `badge-color` | The badge color for the tab button. | `Color` | +| `badge` | `badge` | The badge for the tab. | `string` | +| `btnId` | `btn-id` | hidden | `string` | +| `component` | `component` | The component to display inside of the tab. | `ComponentRef` | +| `delegate` | -- | hidden | `FrameworkDelegate` | +| `disabled` | `disabled` | If `true`, the user cannot interact with the tab. Defaults to `false`. | `boolean` | +| `href` | `href` | The URL which will be used as the `href` within this tab's button anchor. | `string` | +| `icon` | `icon` | The icon for the tab. | `string` | +| `label` | `label` | The label of the tab. | `string` | +| `name` | `name` | The name of the tab. | `string` | +| `selected` | `selected` | If `true`, the tab will be selected. Defaults to `false`. | `boolean` | +| `show` | `show` | If `true`, the tab button is visible within the tabbar. Defaults to `true`. | `boolean` | +| `tabsHideOnSubPages` | `tabs-hide-on-sub-pages` | If `true`, hide the tabs on child pages. | `boolean` | ## Events diff --git a/core/src/components/tab/tab.tsx b/core/src/components/tab/tab.tsx index a2e67bb257..8a7f43f274 100644 --- a/core/src/components/tab/tab.tsx +++ b/core/src/components/tab/tab.tsx @@ -14,7 +14,7 @@ export class Tab implements ComponentInterface { @Element() el!: HTMLIonTabElement; /** - * If true, sets the tab as the active tab. + * If `true`, sets the tab as the active tab. */ @Prop({ mutable: true }) active = false; @@ -60,12 +60,12 @@ export class Tab implements ComponentInterface { @Prop({ mutable: true }) name?: string; /** - * If true, the user cannot interact with the tab. Defaults to `false`. + * If `true`, the user cannot interact with the tab. Defaults to `false`. */ @Prop() disabled = false; /** - * If true, the tab will be selected. Defaults to `false`. + * If `true`, the tab will be selected. Defaults to `false`. */ @Prop() selected = false; @@ -77,12 +77,12 @@ export class Tab implements ComponentInterface { } /** - * If true, the tab button is visible within the tabbar. Defaults to `true`. + * If `true`, the tab button is visible within the tabbar. Defaults to `true`. */ @Prop() show = true; /** - * If true, hide the tabs on child pages. + * If `true`, hide the tabs on child pages. */ @Prop() tabsHideOnSubPages = false; diff --git a/core/src/components/tabbar/readme.md b/core/src/components/tabbar/readme.md index fc5e0d45fa..91b472c38f 100644 --- a/core/src/components/tabbar/readme.md +++ b/core/src/components/tabbar/readme.md @@ -8,16 +8,16 @@ Tabbar is an internal component for Tabs. Please see the [Tabs documentation](.. ## Properties -| Property | Attribute | Description | Type | -| ------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | -| `color` | `color` | | `Color` | -| `highlight` | `highlight` | If true, show the tab highlight bar under the selected tab. | `boolean` | -| `layout` | `layout` | Set the layout of the text and icon in the tabbar. Available options: `"icon-top"`, `"icon-start"`, `"icon-end"`, `"icon-bottom"`, `"icon-hide"`, `"label-hide"`. | `TabbarLayout` | -| `mode` | `mode` | | `Mode` | -| `placement` | `placement` | Set the position of the tabbar, relative to the content. Available options: `"top"`, `"bottom"`. | `TabbarPlacement` | -| `selectedTab` | -- | The selected tab component | `HTMLIonTabElement` | -| `tabs` | -- | The tabs to render | `HTMLIonTabElement[]` | -| `translucent` | `translucent` | If true, the tabbar will be translucent. Defaults to `false`. | `boolean` | +| 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). | `Color` | +| `highlight` | `highlight` | If `true`, show the tab highlight bar under the selected tab. | `boolean` | +| `layout` | `layout` | Set the layout of the text and icon in the tabbar. Available options: `"icon-top"`, `"icon-start"`, `"icon-end"`, `"icon-bottom"`, `"icon-hide"`, `"label-hide"`. | `TabbarLayout` | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | +| `placement` | `placement` | Set the position of the tabbar, relative to the content. Available options: `"top"`, `"bottom"`. | `TabbarPlacement` | +| `selectedTab` | -- | The selected tab component | `HTMLIonTabElement` | +| `tabs` | -- | The tabs to render | `HTMLIonTabElement[]` | +| `translucent` | `translucent` | If `true`, the tabbar will be translucent. Defaults to `false`. | `boolean` | ## Events diff --git a/core/src/components/tabbar/tabbar.tsx b/core/src/components/tabbar/tabbar.tsx index 1d2c6e20ec..cd89a6bc78 100644 --- a/core/src/components/tabbar/tabbar.tsx +++ b/core/src/components/tabbar/tabbar.tsx @@ -13,7 +13,17 @@ import { createColorClasses } from '../../utils/theme'; }) export class Tabbar implements ComponentInterface { + /** + * The mode determines which platform styles to use. + * Possible values are: `"ios"` or `"md"`. + */ @Prop() mode!: Mode; + + /** + * 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). + */ @Prop() color?: Color; @Element() el!: HTMLElement; @@ -46,12 +56,12 @@ export class Tabbar implements ComponentInterface { @Prop() tabs: HTMLIonTabElement[] = []; /** - * If true, show the tab highlight bar under the selected tab. + * If `true`, show the tab highlight bar under the selected tab. */ @Prop() highlight = false; /** - * If true, the tabbar will be translucent. Defaults to `false`. + * If `true`, the tabbar will be translucent. Defaults to `false`. */ @Prop() translucent = false; diff --git a/core/src/components/tabs/readme.md b/core/src/components/tabs/readme.md index c11af4eb34..813a79e78c 100644 --- a/core/src/components/tabs/readme.md +++ b/core/src/components/tabs/readme.md @@ -9,11 +9,11 @@ The component is a container of individual [Tab](../Tab/) components. ## Properties -| Property | Attribute | Description | Type | -| -------------- | --------------- | ----------------------------------------------------------------------------- | --------- | -| `name` | `name` | A unique name for the tabs. | `string` | -| `tabbarHidden` | `tabbar-hidden` | If true, the tabbar will be hidden. Defaults to `false`. | `boolean` | -| `useRouter` | `use-router` | If true, the tabs will use the router and `selectedTab` will not do anything. | `boolean` | +| Property | Attribute | Description | Type | +| -------------- | --------------- | ------------------------------------------------------------------------------- | --------- | +| `name` | `name` | A unique name for the tabs. | `string` | +| `tabbarHidden` | `tabbar-hidden` | If `true`, the tabbar will be hidden. Defaults to `false`. | `boolean` | +| `useRouter` | `use-router` | If `true`, the tabs will use the router and `selectedTab` will not do anything. | `boolean` | ## Events diff --git a/core/src/components/tabs/tabs.tsx b/core/src/components/tabs/tabs.tsx index d789f92aa0..9b4e008114 100644 --- a/core/src/components/tabs/tabs.tsx +++ b/core/src/components/tabs/tabs.tsx @@ -29,12 +29,12 @@ export class Tabs implements NavOutlet { @Prop() name?: string; /** - * If true, the tabbar will be hidden. Defaults to `false`. + * If `true`, the tabbar will be hidden. Defaults to `false`. */ @Prop() tabbarHidden = false; /** - * If true, the tabs will use the router and `selectedTab` will not do anything. + * If `true`, the tabs will use the router and `selectedTab` will not do anything. */ @Prop({ mutable: true }) useRouter = false; @@ -122,7 +122,7 @@ export class Tabs implements NavOutlet { return true; } - /** @hidden */ + /** @internal */ @Method() async setRouteId(id: string): Promise { const selectedTab = await this.getTab(id); @@ -138,7 +138,7 @@ export class Tabs implements NavOutlet { }; } - /** @hidden */ + /** @internal */ @Method() async getRouteId(): Promise { const id = this.selectedTab && this.selectedTab.name; diff --git a/core/src/components/textarea/readme.md b/core/src/components/textarea/readme.md index 87b6f2e898..5063e4275f 100644 --- a/core/src/components/textarea/readme.md +++ b/core/src/components/textarea/readme.md @@ -17,20 +17,20 @@ The textarea component accepts the [native textarea attributes](https://develope | ---------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | | `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` | | `autofocus` | `autofocus` | This Boolean attribute lets you specify that a form control should have input focus when the page loads. 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` | +| `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` | | `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). | `Color` | | `cols` | `cols` | The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. | `number` | | `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 textarea. Defaults to `false`. | `boolean` | +| `disabled` | `disabled` | If `true`, the user cannot interact with the textarea. Defaults to `false`. | `boolean` | | `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` | | `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` | | `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | | `name` | `name` | The name of the control, which is submitted with the form data. | `string` | | `placeholder` | `placeholder` | Instructional text that shows before the input has a value. | `string` | -| `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` | +| `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` | | `rows` | `rows` | The number of visible text lines for the control. | `number` | -| `spellcheck` | `spellcheck` | If true, the element will have its spelling and grammar checked. Defaults to `false`. | `boolean` | +| `spellcheck` | `spellcheck` | If `true`, the element will have its spelling and grammar checked. Defaults to `false`. | `boolean` | | `value` | `value` | The value of the textarea. | `string` | | `wrap` | `wrap` | Indicates how the control wraps text. Possible values are: `"hard"`, `"soft"`, `"off"`. | `string` | @@ -50,7 +50,8 @@ The textarea component accepts the [native textarea attributes](https://develope ### `setFocus() => void` - +Sets focus on the specified `ion-textarea`. Use this method instead of the global +`input.focus()`. #### Returns diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx index 4e888465bb..0f5edcfcfe 100644 --- a/core/src/components/textarea/textarea.tsx +++ b/core/src/components/textarea/textarea.tsx @@ -46,7 +46,7 @@ export class Textarea implements ComponentInterface { @Prop() autofocus = false; /** - * If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. + * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. */ @Prop({ mutable: true }) clearOnEdit = false; @@ -61,7 +61,7 @@ export class Textarea implements ComponentInterface { } /** - * If true, the user cannot interact with the textarea. Defaults to `false`. + * If `true`, the user cannot interact with the textarea. Defaults to `false`. */ @Prop() disabled = false; @@ -91,17 +91,17 @@ export class Textarea implements ComponentInterface { @Prop() placeholder?: string; /** - * If true, the user cannot modify the value. Defaults to `false`. + * If `true`, the user cannot modify the value. Defaults to `false`. */ @Prop() readonly = false; /** - * If true, the user must fill in a value before submitting a form. + * If `true`, the user must fill in a value before submitting a form. */ @Prop() required = false; /** - * 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. Defaults to `false`. */ @Prop() spellcheck = false; @@ -168,6 +168,10 @@ export class Textarea implements ComponentInterface { this.emitStyle(); } + /** + * Sets focus on the specified `ion-textarea`. Use this method instead of the global + * `input.focus()`. + */ @Method() setFocus() { if (this.nativeInput) { diff --git a/core/src/components/toast/readme.md b/core/src/components/toast/readme.md index 9c926547e2..e3b71c1516 100644 --- a/core/src/components/toast/readme.md +++ b/core/src/components/toast/readme.md @@ -22,19 +22,19 @@ The toast can be dismissed automatically after a specific amount of time by pass | Property | Attribute | Description | Type | | ----------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------- | -| `animated` | `animated` | If true, the toast will animate. Defaults to `true`. | `boolean` | +| `animated` | `animated` | If `true`, the toast will animate. Defaults to `true`. | `boolean` | | `closeButtonText` | `close-button-text` | Text to display in the close button. | `string` | | `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string`, `string[]` | | `duration` | `duration` | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. | `number` | | `enterAnimation` | -- | Animation to use when the toast is presented. | `AnimationBuilder` | -| `keyboardClose` | `keyboard-close` | If true, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | +| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | | `leaveAnimation` | -- | Animation to use when the toast is dismissed. | `AnimationBuilder` | | `message` | `message` | Message to be shown in the toast. | `string` | | `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | | `overlayIndex` | `overlay-index` | | `number` | | `position` | `position` | The position of the toast on the screen. Possible values: "top", "middle", "bottom". | `"top"`, `"bottom"`, `"middle"` | -| `showCloseButton` | `show-close-button` | If true, the close button will be displayed. Defaults to `false`. | `boolean` | -| `translucent` | `translucent` | If true, the toast will be translucent. Defaults to `false`. | `boolean` | +| `showCloseButton` | `show-close-button` | If `true`, the close button will be displayed. Defaults to `false`. | `boolean` | +| `translucent` | `translucent` | If `true`, the toast will be translucent. Defaults to `false`. | `boolean` | ## Events diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx index 67cda9aef8..d1a45d8735 100644 --- a/core/src/components/toast/toast.tsx +++ b/core/src/components/toast/toast.tsx @@ -28,6 +28,8 @@ export class Toast implements ComponentInterface, OverlayInterface { @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement; @Prop({ context: 'config' }) config!: Config; + + /** @internal */ @Prop() overlayIndex!: number; /** @@ -69,7 +71,7 @@ export class Toast implements ComponentInterface, OverlayInterface { @Prop() message?: string; /** - * If true, the keyboard will be automatically dismissed when the overlay is presented. + * If `true`, the keyboard will be automatically dismissed when the overlay is presented. */ @Prop() keyboardClose = false; @@ -79,17 +81,17 @@ export class Toast implements ComponentInterface, OverlayInterface { @Prop() position: 'top' | 'bottom' | 'middle' = 'bottom'; /** - * If true, the close button will be displayed. Defaults to `false`. + * If `true`, the close button will be displayed. Defaults to `false`. */ @Prop() showCloseButton = false; /** - * If true, the toast will be translucent. Defaults to `false`. + * If `true`, the toast will be translucent. Defaults to `false`. */ @Prop() translucent = false; /** - * If true, the toast will animate. Defaults to `true`. + * If `true`, the toast will animate. Defaults to `true`. */ @Prop() animated = true; diff --git a/core/src/components/toggle/readme.md b/core/src/components/toggle/readme.md index 67e820f069..16f5070de3 100644 --- a/core/src/components/toggle/readme.md +++ b/core/src/components/toggle/readme.md @@ -11,9 +11,9 @@ Toggles change the state of a single option. Toggles can be switched on or off b | Property | Attribute | Description | Type | | ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | -| `checked` | `checked` | If true, the toggle is selected. Defaults to `false`. | `boolean` | +| `checked` | `checked` | If `true`, the toggle 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). | `Color` | -| `disabled` | `disabled` | | `boolean` | +| `disabled` | `disabled` | If `true`, the user cannot interact with the toggle. Default false. | `boolean` | | `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | | `name` | `name` | The name of the control, which is submitted with the form data. | `string` | | `value` | `value` | the value of the toggle. | `string` | diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx index d17c671f3a..1460cb1947 100644 --- a/core/src/components/toggle/toggle.tsx +++ b/core/src/components/toggle/toggle.tsx @@ -27,6 +27,12 @@ export class Toggle implements ComponentInterface { @State() activated = false; @State() keyFocus = false; + /** + * The mode determines which platform styles to use. + * Possible values are: `"ios"` or `"md"`. + */ + @Prop() mode!: Mode; + /** * The color to use from your application's color palette. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. @@ -34,24 +40,18 @@ export class Toggle implements ComponentInterface { */ @Prop() color?: Color; - /** - * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. - */ - @Prop() mode!: Mode; - /** * The name of the control, which is submitted with the form data. */ @Prop() name: string = this.inputId; /** - * If true, the toggle is selected. Defaults to `false`. + * If `true`, the toggle is selected. Defaults to `false`. */ @Prop({ mutable: true }) checked = false; - /* - * If true, the user cannot interact with the toggle. Default false. + /** + * If `true`, the user cannot interact with the toggle. Default false. */ @Prop() disabled = false; diff --git a/core/src/components/virtual-scroll/readme.md b/core/src/components/virtual-scroll/readme.md index 9e723f6e29..125dd9054d 100644 --- a/core/src/components/virtual-scroll/readme.md +++ b/core/src/components/virtual-scroll/readme.md @@ -191,19 +191,22 @@ dataset, so please make sure they're performant. | `domRender` | -- | | `DomRenderFn` | | `footerFn` | -- | Section footers and the data used within its given template can be dynamically created by passing a function to `footerFn`. The logic within the footer function can decide if the footer template should be used, and what data to give to the footer template. The function must return `null` if a footer cell shouldn't be created. | `HeaderFn` | | `headerFn` | -- | Section headers and the data used within its given template can be dynamically created by passing a function to `headerFn`. For example, a large list of contacts usually has dividers between each letter in the alphabet. App's can provide their own custom `headerFn` which is called with each record within the dataset. The logic within the header function can decide if the header template should be used, and what data to give to the header template. The function must return `null` if a header cell shouldn't be created. | `HeaderFn` | -| `itemHeight` | -- | | `ItemHeightFn` | +| `itemHeight` | -- | An optional function that maps each item within their height. When this function is provides, heavy optimizations and fast path can be taked by `ion-virtual-scroll` leading to massive performance improvements. This function allows to skip all DOM reads, which can be Doing so leads to massive performance | `ItemHeightFn` | | `items` | -- | The data that builds the templates within the virtual scroll. It's important to note that when this data has changed, then the entire virtual scroll is reset, which is an expensive operation and should be avoided if possible. | `any[]` | -| `nodeRender` | -- | | `ItemRenderFn` | -| `renderFooter` | -- | | `(item: any, index: number) => any` | -| `renderHeader` | -- | | `(item: any, index: number) => any` | -| `renderItem` | -- | | `(item: any, index: number) => any` | +| `nodeRender` | -- | NOTE: only Vanilla JS API. | `ItemRenderFn` | +| `renderFooter` | -- | NOTE: only JSX API for stencil. Provide a render function for the footer to be rendered. Returns a JSX virtual-dom. | `(item: any, index: number) => any` | +| `renderHeader` | -- | NOTE: only JSX API for stencil. Provide a render function for the header to be rendered. Returns a JSX virtual-dom. | `(item: any, index: number) => any` | +| `renderItem` | -- | NOTE: only JSX API for stencil. Provide a render function for the items to be rendered. Returns a JSX virtual-dom. | `(item: any, index: number) => any` | ## Methods ### `markDirty(offset: number, len?: number) => void` +This method marks a subset of items as dirty, so they can be re-rendered. Items should be marked as +dirty any time the content or their style changes. +The subset of items to be updated can are specifing by an offset and a length. #### Parameters @@ -220,7 +223,13 @@ Type: `void` ### `markDirtyTail() => void` +This method marks the tail the items array as dirty, so they can be re-rendered. +It's equivalent to calling: + +``` + * virtualScroll.markDirty(lastItemLen, items.length - lastItemLen); + * ``` #### Returns @@ -230,7 +239,7 @@ Type: `void` ### `positionForItem(index: number) => Promise` - +Returns the position of the virtual item at the given index. #### Parameters diff --git a/core/src/components/virtual-scroll/virtual-scroll.tsx b/core/src/components/virtual-scroll/virtual-scroll.tsx index cbccb55df8..413fd6f13c 100644 --- a/core/src/components/virtual-scroll/virtual-scroll.tsx +++ b/core/src/components/virtual-scroll/virtual-scroll.tsx @@ -97,15 +97,44 @@ export class VirtualScroll implements ComponentInterface { * should be avoided if possible. */ @Prop() items?: any[]; + + /** + * An optional function that maps each item within their height. + * When this function is provides, heavy optimizations and fast path can be taked by + * `ion-virtual-scroll` leading to massive performance improvements. + * + * This function allows to skip all DOM reads, which can be Doing so leads + * to massive performance + */ @Prop() itemHeight?: ItemHeightFn; - // JSX API + /** + * NOTE: only JSX API for stencil. + * + * Provide a render function for the items to be rendered. Returns a JSX virtual-dom. + */ @Prop() renderItem?: (item: any, index: number) => any; + + /** + * NOTE: only JSX API for stencil. + * + * Provide a render function for the header to be rendered. Returns a JSX virtual-dom. + */ @Prop() renderHeader?: (item: any, index: number) => any; + + /** + * NOTE: only JSX API for stencil. + * + * Provide a render function for the footer to be rendered. Returns a JSX virtual-dom. + */ @Prop() renderFooter?: (item: any, index: number) => any; - // Low level API + /** + * NOTE: only Vanilla JS API. + */ @Prop() nodeRender?: ItemRenderFn; + + /** @internal */ @Prop() domRender?: DomRenderFn; @Watch('itemHeight') @@ -147,11 +176,20 @@ export class VirtualScroll implements ComponentInterface { this.updateVirtualScroll(); } + /** + * Returns the position of the virtual item at the given index. + */ @Method() positionForItem(index: number): Promise { return Promise.resolve(positionForIndex(index, this.cells, this.getHeightIndex())); } + /** + * This method marks a subset of items as dirty, so they can be re-rendered. Items should be marked as + * dirty any time the content or their style changes. + * + * The subset of items to be updated can are specifing by an offset and a length. + */ @Method() markDirty(offset: number, len = -1) { // TODO: kind of hacky how we do in-place updated of the cells @@ -193,6 +231,15 @@ export class VirtualScroll implements ComponentInterface { this.scheduleUpdate(); } + /** + * This method marks the tail the items array as dirty, so they can be re-rendered. + * + * It's equivalent to calling: + * + * ``` + * virtualScroll.markDirty(lastItemLen, items.length - lastItemLen); + * ``` + */ @Method() markDirtyTail() { if (this.items) { diff --git a/core/src/utils/haptic.ts b/core/src/utils/haptic.ts index be99233a26..a540361b37 100644 --- a/core/src/utils/haptic.ts +++ b/core/src/utils/haptic.ts @@ -1,6 +1,6 @@ /** * Check to see if the Haptic Plugin is available - * @return Returns true or false if the plugin is available + * @return Returns `true` or false if the plugin is available */ export function hapticAvailable(): boolean { const engine = (window as any).TapticEngine; diff --git a/core/stencil.config.ts b/core/stencil.config.ts index 2d253c31bc..b51bff0211 100644 --- a/core/stencil.config.ts +++ b/core/stencil.config.ts @@ -56,6 +56,10 @@ export const config: Config = { type: 'dist', esmLoaderPath: '../loader' }, + { + type: 'docs', + strict: true + }, { type: 'stats', file: 'stats.json'