diff --git a/core/api.txt b/core/api.txt index f8488ab701d..3d863105671 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1,6 +1,6 @@ ion-action-sheet-controller,none -ion-action-sheet-controller,method,create,create(opts: ActionSheetOptions) => Promise +ion-action-sheet-controller,method,create,create(options: ActionSheetOptions) => Promise ion-action-sheet-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise ion-action-sheet-controller,method,getTop,getTop() => Promise @@ -36,7 +36,7 @@ ion-action-sheet,css-prop,--min-width ion-action-sheet,css-prop,--width ion-alert-controller,none -ion-alert-controller,method,create,create(opts: AlertOptions) => Promise +ion-alert-controller,method,create,create(options: AlertOptions) => Promise ion-alert-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise ion-alert-controller,method,getTop,getTop() => Promise @@ -532,7 +532,7 @@ ion-list,prop,mode,"ios" | "md",undefined,false,false ion-list,method,closeSlidingItems,closeSlidingItems() => Promise ion-loading-controller,none -ion-loading-controller,method,create,create(opts?: LoadingOptions | undefined) => Promise +ion-loading-controller,method,create,create(options?: LoadingOptions | undefined) => Promise ion-loading-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise ion-loading-controller,method,getTop,getTop() => Promise @@ -574,18 +574,18 @@ ion-menu-button,prop,mode,"ios" | "md",undefined,false,false ion-menu-button,css-prop,--color ion-menu-controller,none -ion-menu-controller,method,close,close(menuId?: string | null | undefined) => Promise -ion-menu-controller,method,enable,enable(shouldEnable: boolean, menuId?: string | null | undefined) => Promise -ion-menu-controller,method,get,get(menuId?: string | null | undefined) => Promise +ion-menu-controller,method,close,close(menu?: string | null | undefined) => Promise +ion-menu-controller,method,enable,enable(enable: boolean, menu?: string | null | undefined) => Promise +ion-menu-controller,method,get,get(menu?: string | null | undefined) => Promise ion-menu-controller,method,getMenus,getMenus() => Promise ion-menu-controller,method,getOpen,getOpen() => Promise ion-menu-controller,method,isAnimating,isAnimating() => Promise -ion-menu-controller,method,isEnabled,isEnabled(menuId?: string | null | undefined) => Promise -ion-menu-controller,method,isOpen,isOpen(menuId?: string | null | undefined) => Promise -ion-menu-controller,method,open,open(menuId?: string | null | undefined) => Promise +ion-menu-controller,method,isEnabled,isEnabled(menu?: string | null | undefined) => Promise +ion-menu-controller,method,isOpen,isOpen(menu?: string | null | undefined) => Promise +ion-menu-controller,method,open,open(menu?: string | null | undefined) => Promise ion-menu-controller,method,registerAnimation,registerAnimation(name: string, animation: AnimationBuilder) => void -ion-menu-controller,method,swipeGesture,swipeGesture(shouldEnable: boolean, menuId?: string | null | undefined) => Promise -ion-menu-controller,method,toggle,toggle(menuId?: string | null | undefined) => Promise +ion-menu-controller,method,swipeGesture,swipeGesture(enable: boolean, menu?: string | null | undefined) => Promise +ion-menu-controller,method,toggle,toggle(menu?: string | null | undefined) => Promise ion-menu-toggle,shadow ion-menu-toggle,prop,autoHide,boolean,true,false,false @@ -618,7 +618,7 @@ ion-menu,css-prop,--min-width ion-menu,css-prop,--width ion-modal-controller,none -ion-modal-controller,method,create,create(opts: ModalOptions) => Promise +ion-modal-controller,method,create,create(options: ModalOptions) => Promise ion-modal-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise ion-modal-controller,method,getTop,getTop() => Promise @@ -691,7 +691,7 @@ ion-note,prop,mode,"ios" | "md",undefined,false,false ion-note,css-prop,--color ion-picker-controller,none -ion-picker-controller,method,create,create(opts: PickerOptions) => Promise +ion-picker-controller,method,create,create(options: PickerOptions) => Promise ion-picker-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise ion-picker-controller,method,getTop,getTop() => Promise @@ -730,7 +730,7 @@ ion-picker,css-prop,--min-width ion-picker,css-prop,--width ion-popover-controller,none -ion-popover-controller,method,create,create(opts: PopoverOptions) => Promise +ion-popover-controller,method,create,create(options: PopoverOptions) => Promise ion-popover-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise ion-popover-controller,method,getTop,getTop() => Promise @@ -849,7 +849,7 @@ ion-reorder,shadow ion-ripple-effect,shadow ion-ripple-effect,prop,type,"bounded" | "unbounded",'bounded',false,false -ion-ripple-effect,method,addRipple,addRipple(pageX: number, pageY: number) => Promise<() => void> +ion-ripple-effect,method,addRipple,addRipple(x: number, y: number) => Promise<() => void> ion-route-redirect,none ion-route-redirect,prop,from,string,undefined,true,false @@ -970,7 +970,7 @@ ion-select,prop,okText,string,'OK',false,false ion-select,prop,placeholder,null | string | undefined,undefined,false,false ion-select,prop,selectedText,null | string | undefined,undefined,false,false ion-select,prop,value,any,undefined,false,false -ion-select,method,open,open(ev?: UIEvent | undefined) => Promise +ion-select,method,open,open(event?: UIEvent | undefined) => Promise ion-select,event,ionBlur,void,true ion-select,event,ionCancel,void,true ion-select,event,ionChange,SelectChangeEventDetail,true @@ -999,9 +999,9 @@ ion-slides,method,getPreviousIndex,getPreviousIndex() => Promise ion-slides,method,isBeginning,isBeginning() => Promise ion-slides,method,isEnd,isEnd() => Promise ion-slides,method,length,length() => Promise -ion-slides,method,lockSwipeToNext,lockSwipeToNext(shouldLockSwipeToNext: boolean) => Promise -ion-slides,method,lockSwipeToPrev,lockSwipeToPrev(shouldLockSwipeToPrev: boolean) => Promise -ion-slides,method,lockSwipes,lockSwipes(shouldLockSwipes: boolean) => Promise +ion-slides,method,lockSwipeToNext,lockSwipeToNext(lock: boolean) => Promise +ion-slides,method,lockSwipeToPrev,lockSwipeToPrev(lock: boolean) => Promise +ion-slides,method,lockSwipes,lockSwipes(lock: boolean) => Promise ion-slides,method,slideNext,slideNext(speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise ion-slides,method,slidePrev,slidePrev(speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise ion-slides,method,slideTo,slideTo(index: number, speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise @@ -1130,7 +1130,7 @@ ion-title,prop,color,string | undefined,undefined,false,false ion-title,css-prop,--color ion-toast-controller,none -ion-toast-controller,method,create,create(opts?: ToastOptions | undefined) => Promise +ion-toast-controller,method,create,create(options?: ToastOptions | undefined) => Promise ion-toast-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise ion-toast-controller,method,getTop,getTop() => Promise @@ -1218,5 +1218,5 @@ ion-virtual-scroll,prop,renderFooter,((item: any, index: number) => any) | undef ion-virtual-scroll,prop,renderHeader,((item: any, index: number) => any) | undefined,undefined,false,false ion-virtual-scroll,prop,renderItem,((item: any, index: number) => any) | undefined,undefined,false,false ion-virtual-scroll,method,checkEnd,checkEnd() => void -ion-virtual-scroll,method,checkRange,checkRange(offset: number, len?: number) => void +ion-virtual-scroll,method,checkRange,checkRange(offset: number, length?: number) => void ion-virtual-scroll,method,positionForItem,positionForItem(index: number) => Promise \ No newline at end of file diff --git a/core/src/components.d.ts b/core/src/components.d.ts index f3fd4151cc2..242f17ba156 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -89,7 +89,7 @@ export namespace Components { /** * Create an action sheet overlay with action sheet options. */ - 'create': (opts: ActionSheetOptions) => Promise; + 'create': (options: ActionSheetOptions) => Promise; /** * Dismiss the open action sheet overlay. */ @@ -143,11 +143,11 @@ export namespace Components { */ 'mode': Mode; /** - * Returns a promise that resolves when the action-sheet did dismiss. + * Returns a promise that resolves when the action sheet did dismiss. */ 'onDidDismiss': () => Promise>; /** - * Returns a promise that resolves when the action-sheet will dismiss. + * Returns a promise that resolves when the action sheet will dismiss. */ 'onWillDismiss': () => Promise>; 'overlayIndex': number; @@ -229,9 +229,9 @@ export namespace Components { interface IonAlertController { /** - * Create an alert overlay with alert options + * Create an alert overlay with alert options. */ - 'create': (opts: AlertOptions) => Promise; + 'create': (options: AlertOptions) => Promise; /** * Dismiss the open alert overlay. */ @@ -1049,11 +1049,11 @@ export namespace Components { */ '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. + * Get the element where the actual scrolling takes place. This element can be used to subscribe to `scroll` events or manually modify `scrollTop`. However, it's recommended to use the API provided by `ion-content`: i.e. 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 + * Scroll by a specified X/Y distance in the component. */ 'scrollByPoint': (x: number, y: number, duration: number) => Promise; /** @@ -1061,15 +1061,15 @@ export namespace Components { */ 'scrollEvents': boolean; /** - * Scroll to the bottom of the component + * Scroll to the bottom of the component. */ 'scrollToBottom': (duration?: number) => Promise; /** - * Scroll to a specified X/Y location in the component + * Scroll to a specified X/Y location in the component. */ 'scrollToPoint': (x: number | null | undefined, y: number | null | undefined, duration?: number) => Promise; /** - * Scroll to the top of the component + * Scroll to the top of the component. */ 'scrollToTop': (duration?: number) => Promise; /** @@ -1441,7 +1441,7 @@ export namespace Components { */ 'activated': boolean; /** - * Close an active FAB list container + * Close an active FAB list container. */ 'close': () => void; /** @@ -2163,7 +2163,7 @@ export namespace Components { /** * Create a loading overlay with loading options. */ - 'create': (opts?: LoadingOptions | undefined) => Promise; + 'create': (options?: LoadingOptions | undefined) => Promise; /** * Dismiss the open loading overlay. */ @@ -2349,53 +2349,53 @@ export namespace Components { interface IonMenuController { '_getInstance': () => Promise; /** - * Close the menu. If no menu is specified, then it will close any menu that is open. If a menu is specified, it will close that menu. + * Close the menu. If a menu is specified, it will close that menu. If no menu is specified, then it will close any menu that is open. If it does not find any open menus, it will return `false`. */ - 'close': (menuId?: string | null | undefined) => Promise; + 'close': (menu?: string | null | undefined) => Promise; /** - * Used to enable or disable a menu. For example, there could be multiple left menus, but only one of them should be able to be opened at the same time. If there are multiple menus on the same side, then enabling one menu will also automatically disable all the others that are on the same side. + * Enable or disable a menu. Disabling a menu will not allow gestures for that menu or any calls to open it. This is useful when there are multiple menus on the same side and only one of them should be allowed to open. Enabling a menu will automatically disable all other menus on that side. */ - 'enable': (shouldEnable: boolean, menuId?: string | null | undefined) => Promise; + 'enable': (enable: boolean, menu?: string | null | undefined) => Promise; /** - * Used to get a menu instance. If a menu is not provided then it will return the first menu found. If the specified menu is `start` or `end`, then it will return the enabled menu on that side. Otherwise, it will try to find the menu using the menu's `id` property. If a menu is not found then it will return `null`. + * Get a menu instance. If a menu is not provided then it will return the first menu found. If the specified menu is `start` or `end`, then it will return the enabled menu on that side. Otherwise, it will try to find the menu using the menu's `id` property. If a menu is not found then it will return `null`. */ - 'get': (menuId?: string | null | undefined) => Promise; + 'get': (menu?: string | null | undefined) => Promise; /** - * Returns an array of all menu instances. + * Get all menu instances. */ 'getMenus': () => Promise; /** - * Returns the instance of the menu already opened, otherwise `null`. + * Get the instance of the opened menu. Returns `null` if a menu is not found. */ 'getOpen': () => Promise; /** - * Returns `true` if any menu is currently animating. + * Get whether or not a menu is animating. Returns `true` if any menu is currently animating. */ 'isAnimating': () => Promise; /** - * Returns `true` if the specified menu is enabled. + * Get whether or not the menu is enabled. Returns `true` if the specified menu is enabled. Returns `false` if a menu is disabled or not found. */ - 'isEnabled': (menuId?: string | null | undefined) => Promise; + 'isEnabled': (menu?: 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. + * Get whether or not the menu is open. Returns `true` if the specified menu is open. If a menu is not specified, it will return `true` if any menu is currently open. */ - 'isOpen': (menuId?: string | null | undefined) => Promise; + 'isOpen': (menu?: string | null | undefined) => Promise; /** - * Open the menu. + * Open the menu. If a menu is not provided then it will open the first menu found. If the specified menu is `start` or `end`, then it will open the enabled menu on that side. Otherwise, it will try to find the menu using the menu's `id` property. If a menu is not found then it will return `false`. */ - 'open': (menuId?: string | null | undefined) => Promise; + 'open': (menu?: string | null | undefined) => Promise; /** - * Registers a new animation that can be used in any `ion-menu`. ``` * * ``` + * Registers a new animation that can be used with any `ion-menu` by passing the name of the animation in its `type` property. */ 'registerAnimation': (name: string, animation: AnimationBuilder) => void; /** - * Used to enable or disable the ability to swipe open the menu. + * Enable or disable the ability to swipe open the menu. */ - 'swipeGesture': (shouldEnable: boolean, menuId?: string | null | undefined) => Promise; + 'swipeGesture': (enable: boolean, menu?: string | null | undefined) => Promise; /** - * Toggle the menu. If it's closed, it will open, and if opened, it will close. + * Toggle the menu open or closed. If the menu is already open, it will try to close the menu, otherwise it will try to open it. Returns `false` if a menu is not found. */ - 'toggle': (menuId?: string | null | undefined) => Promise; + 'toggle': (menu?: string | null | undefined) => Promise; } interface IonMenuControllerAttributes extends StencilHTMLAttributes {} @@ -2422,7 +2422,7 @@ export namespace Components { interface IonMenu { /** - * Closes the menu. If the menu is already closed or it can't be closed, it returns `false`. + * Close the menu. Returns `false` if the menu is already closed or it can't be closed. */ 'close': (animated?: boolean) => Promise; /** @@ -2434,11 +2434,11 @@ export namespace Components { */ '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`. + * Get whether or not the menu is active. Returns `true` if 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 an `ion-split-pane`. */ 'isActive': () => Promise; /** - * Returns `true` is the menu is open. + * Get whether or not the menu is open. Returns `true` if the menu is open. */ 'isOpen': () => Promise; /** @@ -2450,11 +2450,11 @@ export namespace Components { */ 'menuId'?: string; /** - * Opens the menu. If the menu is already open or it can't be opened, it returns `false`. + * Open the menu. Returns `false` if the menu is already open or it can't be opened. */ 'open': (animated?: boolean) => Promise; /** - * Opens or closes the button. If the operation can't be completed successfully, it returns `false`. + * Sets the menu to open or closed. Returns `false` if the operation can't be completed successfully. */ 'setOpen': (shouldOpen: boolean, animated?: boolean) => Promise; /** @@ -2466,11 +2466,11 @@ export namespace Components { */ '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 the menu open or closed. If the menu is already open, it will try to close the menu, otherwise it will try to open it. Returns `false` if the operation can't be completed successfully. */ 'toggle': (animated?: boolean) => Promise; /** - * The display type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`. + * The animation type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`. Custom animations can be registered by the menu controller. */ 'type'?: string; } @@ -2516,7 +2516,7 @@ export namespace Components { */ 'swipeGesture'?: boolean; /** - * The display type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`. + * The animation type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`. Custom animations can be registered by the menu controller. */ 'type'?: string; } @@ -2525,7 +2525,7 @@ export namespace Components { /** * Create a modal overlay with modal options. */ - 'create': (opts: ModalOptions) => Promise; + 'create': (options: ModalOptions) => Promise; /** * Dismiss the open modal overlay. */ @@ -2711,37 +2711,37 @@ export namespace Components { */ 'animation'?: AnimationBuilder; /** - * Returns `true` or false if the current view can go back + * Returns `true` if the current view can go back. */ 'canGoBack': (view?: ViewController | undefined) => Promise; 'delegate'?: FrameworkDelegate; /** - * Gets the active view + * Get the active view. */ 'getActive': () => Promise; /** - * Returns the view at the index + * Get the view at the specified index. */ 'getByIndex': (index: number) => Promise; /** - * Gets the previous view + * Get the previous view. */ 'getPrevious': (view?: ViewController | undefined) => Promise; 'getRouteId': () => Promise; /** - * Inserts a component into the nav stack at the specified index. This is useful if you need to add a component at any point in your navigation stack. + * Inserts a component into the navigation stack at the specified index. This is useful to add a component at any point in the navigation stack. */ 'insert': (insertIndex: number, component: T, componentProps?: ComponentProps | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; /** - * Inserts an array of components into the nav stack at the specified index. The last component in the array will become instantiated as a view, and animate in to become the active view. + * Inserts an array of components into the navigation stack at the specified index. The last component in the array will become instantiated as a view, and animate in to become the active view. */ 'insertPages': (insertIndex: number, insertComponents: NavComponent[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; /** - * Call to navigate back from a current component. Similar to push(), you can also pass navigation options. + * Pop a component off of the navigation stack. Navigates back from the current component. */ 'pop': (opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; /** - * Pop to a specific index in the navigation stack + * Pop to a specific index in the navigation stack. */ 'popTo': (indexOrViewCtrl: number | ViewController, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; /** @@ -2749,11 +2749,11 @@ export namespace Components { */ 'popToRoot': (opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; /** - * Push a new component onto the current navigation stack. Pass any additional information along as an object. This additional information is accessible through NavParams + * Push a new component onto the current navigation stack. Pass any additional information along as an object. This additional information is accessible through NavParams. */ 'push': (component: T, componentProps?: ComponentProps | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; /** - * Removes a page from the nav stack at the specified index. + * Removes a component from the navigation stack at the specified index. */ 'removeIndex': (startIndex: number, removeCount?: number, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; /** @@ -2765,11 +2765,11 @@ export namespace Components { */ 'rootParams'?: ComponentProps; /** - * Set the views of the current navigation stack and navigate to the last view. By default animations are disabled, but they can be enabled by passing options to the navigation controller.You can also pass any navigation params to the individual pages in the array. + * Set the views of the current navigation stack and navigate to the last view. By default animations are disabled, but they can be enabled by passing options to the navigation controller. Navigation parameters can also be passed to the individual pages in the array. */ 'setPages': (views: any[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; /** - * Set the root for the current navigation stack. + * Set the root for the current navigation stack to a component. */ 'setRoot': (component: T, componentProps?: ComponentProps | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; 'setRouteId': (id: string, params: { [key: string]: any; } | undefined, direction: RouterDirection) => Promise; @@ -2847,7 +2847,7 @@ export namespace Components { /** * Create a picker overlay with picker options. */ - 'create': (opts: PickerOptions) => Promise; + 'create': (options: PickerOptions) => Promise; /** * Dismiss the open picker overlay. */ @@ -2893,7 +2893,7 @@ export namespace Components { */ 'enterAnimation'?: AnimationBuilder; /** - * Returns the column the matches the specified name + * Get the column that matches the specified name. */ 'getColumn': (name: string) => Promise; /** @@ -2993,7 +2993,7 @@ export namespace Components { /** * Create a popover overlay with popover options. */ - 'create': (opts: PopoverOptions) => Promise; + 'create': (options: PopoverOptions) => Promise; /** * Dismiss the open popover overlay. */ @@ -3544,9 +3544,9 @@ export namespace Components { interface IonRippleEffect { /** - * Adds the ripple effect to the parent element + * Adds the ripple effect to the parent element. */ - 'addRipple': (pageX: number, pageY: number) => Promise<() => void>; + 'addRipple': (x: number, y: number) => Promise<() => void>; /** * Sets the type of ripple-effect: - `bounded`: the ripple effect expands from the user's click position - `unbounded`: the ripple effect expands from the center of the button and overflows the container. NOTE: Surfaces for bounded ripples should have the overflow property set to hidden, while surfaces for unbounded ripples should have it set to visible. */ @@ -4057,9 +4057,9 @@ export namespace Components { */ 'okText': string; /** - * Opens the select overlay, it could be an alert, action-sheet or popover, based in `ion-select` settings. + * Open the select overlay. The overlay is either an alert, action sheet, or popover, depending on the `interface` property on the `ion-select`. */ - 'open': (ev?: UIEvent | undefined) => Promise; + 'open': (event?: UIEvent | undefined) => Promise; /** * The text to display when the select is empty. */ @@ -4180,17 +4180,17 @@ export namespace Components { */ 'length': () => Promise; /** - * Lock or unlock the ability to slide to the next slides. + * Lock or unlock the ability to slide to the next slide. */ - 'lockSwipeToNext': (shouldLockSwipeToNext: boolean) => Promise; + 'lockSwipeToNext': (lock: boolean) => Promise; /** - * Lock or unlock the ability to slide to the previous slides. + * Lock or unlock the ability to slide to the previous slide. */ - 'lockSwipeToPrev': (shouldLockSwipeToPrev: boolean) => Promise; + 'lockSwipeToPrev': (lock: boolean) => Promise; /** - * Lock or unlock the ability to slide to change slides. + * Lock or unlock the ability to slide to the next or previous slide. */ - 'lockSwipes': (shouldLockSwipes: boolean) => Promise; + 'lockSwipes': (lock: boolean) => Promise; /** * The mode determines which platform styles to use. */ @@ -4232,7 +4232,7 @@ export namespace Components { */ 'update': () => Promise; /** - * Force swiper to update its height (when autoHeight enabled) for the duration equal to 'speed' parameter + * Force swiper to update its height (when autoHeight is enabled) for the duration equal to 'speed' parameter. */ 'updateAutoHeight': (speed?: number | undefined) => Promise; } @@ -4358,7 +4358,7 @@ export namespace Components { interface IonSplitPane { /** - * The content `id` of the split-pane's main content. This property can be used instead of the `[main]` attribute to select the `main` content of the split-pane. ```html * * *
* * ``` + * The content `id` of the split-pane's main content. This property can be used instead of the `[main]` attribute to select the `main` content of the split-pane. */ 'contentId'?: string; /** @@ -4372,7 +4372,7 @@ export namespace Components { } interface IonSplitPaneAttributes extends StencilHTMLAttributes { /** - * The content `id` of the split-pane's main content. This property can be used instead of the `[main]` attribute to select the `main` content of the split-pane. ```html * * *
* * ``` + * The content `id` of the split-pane's main content. This property can be used instead of the `[main]` attribute to select the `main` content of the split-pane. */ 'contentId'?: string; /** @@ -4509,15 +4509,15 @@ export namespace Components { interface IonTabs { 'getRouteId': () => Promise; /** - * Get the currently selected tab + * Get the currently selected tab. */ 'getSelected': () => Promise; /** - * Get the tab element given the tab name + * Get a specific tab by the value of its `tab` property or an element reference. */ 'getTab': (tab: string | HTMLIonTabElement) => Promise; /** - * Index or the Tab instance, of the tab to select. + * Select a tab by the value of its `tab` property or an element reference. */ 'select': (tab: string | HTMLIonTabElement) => Promise; 'setRouteId': (id: string) => Promise; @@ -4748,7 +4748,7 @@ export namespace Components { /** * Create a toast overlay with toast options. */ - 'create': (opts?: ToastOptions | undefined) => Promise; + 'create': (options?: ToastOptions | undefined) => Promise; /** * Dismiss the open toast overlay. */ @@ -5018,13 +5018,13 @@ export namespace Components { */ 'approxItemHeight': number; /** - * This method marks the tail the items array as dirty, so they can be re-rendered. It's equivalent to calling: ```js * virtualScroll.checkRange(lastItemLen); * ``` + * Marks the tail of the items array as dirty, so they can be re-rendered. It's equivalent to calling `checkRange(length)` where `length` is the total length of the items. */ 'checkEnd': () => 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. + * Marks a subset of the 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 are specified by an offset and a length. If a length is not provided it will check all of the items beginning at the offset. */ - 'checkRange': (offset: number, len?: number) => void; + 'checkRange': (offset: number, length?: number) => void; 'domRender'?: DomRenderFn; /** * 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. diff --git a/core/src/components/action-sheet-controller/action-sheet-controller.tsx b/core/src/components/action-sheet-controller/action-sheet-controller.tsx index 4ed53c71022..9a1208c7c69 100644 --- a/core/src/components/action-sheet-controller/action-sheet-controller.tsx +++ b/core/src/components/action-sheet-controller/action-sheet-controller.tsx @@ -12,14 +12,23 @@ export class ActionSheetController implements ComponentInterface, OverlayControl /** * Create an action sheet overlay with action sheet options. + * + * @param options The options to use to create the action sheet. */ @Method() - create(opts: ActionSheetOptions): Promise { - return createOverlay(this.doc.createElement('ion-action-sheet'), opts); + create(options: ActionSheetOptions): Promise { + return createOverlay(this.doc.createElement('ion-action-sheet'), options); } /** * Dismiss the open action sheet overlay. + * + * @param data Any data to emit in the dismiss events. + * @param role The role of the element that is dismissing the action sheet. + * This can be useful in a button handler for determining which button was + * clicked to dismiss the action sheet. + * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. + * @param id The id of the action sheet to dismiss. If an id is not provided, it will dismiss the most recently opened action sheet. */ @Method() dismiss(data?: any, role?: string, id?: string) { diff --git a/core/src/components/action-sheet-controller/readme.md b/core/src/components/action-sheet-controller/readme.md index 3914ea39962..84f31344e0f 100644 --- a/core/src/components/action-sheet-controller/readme.md +++ b/core/src/components/action-sheet-controller/readme.md @@ -7,15 +7,15 @@ Action Sheet controllers programmatically control the action sheet component. Ac ## Methods -### `create(opts: ActionSheetOptions) => Promise` +### `create(options: ActionSheetOptions) => Promise` Create an action sheet overlay with action sheet options. #### Parameters -| Name | Type | Description | -| ------ | -------------------- | ----------- | -| `opts` | `ActionSheetOptions` | | +| Name | Type | Description | +| --------- | -------------------- | ---------------------------------------------- | +| `options` | `ActionSheetOptions` | The options to use to create the action sheet. | #### Returns @@ -29,11 +29,11 @@ Dismiss the open action sheet overlay. #### Parameters -| Name | Type | Description | -| ------ | --------------------- | ----------- | -| `data` | `any` | | -| `role` | `string \| undefined` | | -| `id` | `string \| undefined` | | +| Name | Type | Description | +| ------ | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `data` | `any` | Any data to emit in the dismiss events. | +| `role` | `string \| undefined` | The role of the element that is dismissing the action sheet. This can be useful in a button handler for determining which button was clicked to dismiss the action sheet. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. | +| `id` | `string \| undefined` | The id of the action sheet to dismiss. If an id is not provided, it will dismiss the most recently opened action sheet. | #### Returns diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx index 303ffb8e4b3..ef45f6b55b6 100644 --- a/core/src/components/action-sheet/action-sheet.tsx +++ b/core/src/components/action-sheet/action-sheet.tsx @@ -128,6 +128,12 @@ export class ActionSheet implements ComponentInterface, OverlayInterface { /** * Dismiss the action sheet overlay after it has been presented. + * + * @param data Any data to emit in the dismiss events. + * @param role The role of the element that is dismissing the action sheet. + * This can be useful in a button handler for determining which button was + * clicked to dismiss the action sheet. + * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. */ @Method() dismiss(data?: any, role?: string): Promise { @@ -135,7 +141,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface { } /** - * Returns a promise that resolves when the action-sheet did dismiss. + * Returns a promise that resolves when the action sheet did dismiss. */ @Method() onDidDismiss(): Promise { @@ -143,7 +149,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface { } /** - * Returns a promise that resolves when the action-sheet will dismiss. + * Returns a promise that resolves when the action sheet will dismiss. * */ @Method() diff --git a/core/src/components/action-sheet/readme.md b/core/src/components/action-sheet/readme.md index 9f011715a6a..987e21f459b 100644 --- a/core/src/components/action-sheet/readme.md +++ b/core/src/components/action-sheet/readme.md @@ -289,10 +289,10 @@ Dismiss the action sheet overlay after it has been presented. #### Parameters -| Name | Type | Description | -| ------ | --------------------- | ----------- | -| `data` | `any` | | -| `role` | `string \| undefined` | | +| Name | Type | Description | +| ------ | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `data` | `any` | Any data to emit in the dismiss events. | +| `role` | `string \| undefined` | The role of the element that is dismissing the action sheet. This can be useful in a button handler for determining which button was clicked to dismiss the action sheet. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. | #### Returns @@ -302,7 +302,7 @@ Type: `Promise` ### `onDidDismiss() => Promise>` -Returns a promise that resolves when the action-sheet did dismiss. +Returns a promise that resolves when the action sheet did dismiss. #### Returns @@ -312,7 +312,7 @@ Type: `Promise>` ### `onWillDismiss() => Promise>` -Returns a promise that resolves when the action-sheet will dismiss. +Returns a promise that resolves when the action sheet will dismiss. #### Returns diff --git a/core/src/components/action-sheet/test/test.utils.ts b/core/src/components/action-sheet/test/test.utils.ts index d30f172a9b7..0f300727acc 100644 --- a/core/src/components/action-sheet/test/test.utils.ts +++ b/core/src/components/action-sheet/test/test.utils.ts @@ -50,7 +50,6 @@ export async function testActionSheetBackdrop( actionSheet: any ) { try { - console.log('backdrop hook'); const backdrop = await page.find('ion-backdrop'); await backdrop.click(); diff --git a/core/src/components/alert-controller/alert-controller.tsx b/core/src/components/alert-controller/alert-controller.tsx index 961b17c360e..e9ac132f093 100644 --- a/core/src/components/alert-controller/alert-controller.tsx +++ b/core/src/components/alert-controller/alert-controller.tsx @@ -11,15 +11,24 @@ export class AlertController implements ComponentInterface, OverlayController { @Prop({ context: 'document' }) doc!: Document; /** - * Create an alert overlay with alert options + * Create an alert overlay with alert options. + * + * @param options The options to use to create the alert. */ @Method() - create(opts: AlertOptions): Promise { - return createOverlay(this.doc.createElement('ion-alert'), opts); + create(options: AlertOptions): Promise { + return createOverlay(this.doc.createElement('ion-alert'), options); } /** * Dismiss the open alert overlay. + * + * @param data Any data to emit in the dismiss events. + * @param role The role of the element that is dismissing the alert. + * This can be useful in a button handler for determining which button was + * clicked to dismiss the alert. + * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. + * @param id The id of the alert to dismiss. If an id is not provided, it will dismiss the most recently opened alert. */ @Method() dismiss(data?: any, role?: string, id?: string) { diff --git a/core/src/components/alert-controller/readme.md b/core/src/components/alert-controller/readme.md index 285cac0de2c..257a3bb1706 100644 --- a/core/src/components/alert-controller/readme.md +++ b/core/src/components/alert-controller/readme.md @@ -24,15 +24,15 @@ async function presentAlert() { ## Methods -### `create(opts: AlertOptions) => Promise` +### `create(options: AlertOptions) => Promise` -Create an alert overlay with alert options +Create an alert overlay with alert options. #### Parameters -| Name | Type | Description | -| ------ | -------------- | ----------- | -| `opts` | `AlertOptions` | | +| Name | Type | Description | +| --------- | -------------- | --------------------------------------- | +| `options` | `AlertOptions` | The options to use to create the alert. | #### Returns @@ -46,11 +46,11 @@ Dismiss the open alert overlay. #### Parameters -| Name | Type | Description | -| ------ | --------------------- | ----------- | -| `data` | `any` | | -| `role` | `string \| undefined` | | -| `id` | `string \| undefined` | | +| Name | Type | Description | +| ------ | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `data` | `any` | Any data to emit in the dismiss events. | +| `role` | `string \| undefined` | The role of the element that is dismissing the alert. This can be useful in a button handler for determining which button was clicked to dismiss the alert. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. | +| `id` | `string \| undefined` | The id of the alert to dismiss. If an id is not provided, it will dismiss the most recently opened alert. | #### Returns diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx index d3d0937f029..422cfad0d3d 100644 --- a/core/src/components/alert/alert.tsx +++ b/core/src/components/alert/alert.tsx @@ -185,6 +185,12 @@ export class Alert implements ComponentInterface, OverlayInterface { /** * Dismiss the alert overlay after it has been presented. + * + * @param data Any data to emit in the dismiss events. + * @param role The role of the element that is dismissing the alert. + * This can be useful in a button handler for determining which button was + * clicked to dismiss the alert. + * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. */ @Method() dismiss(data?: any, role?: string): Promise { @@ -193,7 +199,6 @@ export class Alert implements ComponentInterface, OverlayInterface { /** * Returns a promise that resolves when the alert did dismiss. - * */ @Method() onDidDismiss(): Promise { @@ -202,7 +207,6 @@ export class Alert implements ComponentInterface, OverlayInterface { /** * Returns a promise that resolves when the alert will dismiss. - * */ @Method() onWillDismiss(): Promise { diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md index ac70baca34c..8b94a1f129b 100644 --- a/core/src/components/alert/readme.md +++ b/core/src/components/alert/readme.md @@ -1089,10 +1089,10 @@ Dismiss the alert overlay after it has been presented. #### Parameters -| Name | Type | Description | -| ------ | --------------------- | ----------- | -| `data` | `any` | | -| `role` | `string \| undefined` | | +| Name | Type | Description | +| ------ | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `data` | `any` | Any data to emit in the dismiss events. | +| `role` | `string \| undefined` | The role of the element that is dismissing the alert. This can be useful in a button handler for determining which button was clicked to dismiss the alert. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. | #### Returns diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx index 513c88943bf..2398933e70a 100644 --- a/core/src/components/content/content.tsx +++ b/core/src/components/content/content.tsx @@ -169,12 +169,12 @@ 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`: + * Get the element where the actual scrolling takes place. + * This element can be used to 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. + * i.e. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events + * and `scrollToPoint()` to scroll the content into a certain point. */ @Method() getScrollElement(): Promise { @@ -182,7 +182,9 @@ export class Content implements ComponentInterface { } /** - * Scroll to the top of the component + * Scroll to the top of the component. + * + * @param duration The amount of time to take scrolling to the top. Defaults to `0`. */ @Method() scrollToTop(duration = 0): Promise { @@ -190,7 +192,9 @@ export class Content implements ComponentInterface { } /** - * Scroll to the bottom of the component + * Scroll to the bottom of the component. + * + * @param duration The amount of time to take scrolling to the bottom. Defaults to `0`. */ @Method() scrollToBottom(duration = 0): Promise { @@ -199,7 +203,11 @@ export class Content implements ComponentInterface { } /** - * Scroll by a specified X/Y distance in the component + * Scroll by a specified X/Y distance in the component. + * + * @param x The amount to scroll by on the horizontal axis. + * @param y The amount to scroll by on the vertical axis. + * @param duration The amount of time to take scrolling by that amount. */ @Method() scrollByPoint(x: number, y: number, duration: number): Promise { @@ -207,7 +215,11 @@ export class Content implements ComponentInterface { } /** - * Scroll to a specified X/Y location in the component + * Scroll to a specified X/Y location in the component. + * + * @param x The point to scroll to on the horizontal axis. + * @param y The point to scroll to on the vertical axis. + * @param duration The amount of time to take scrolling to that point. Defaults to `0`. */ @Method() async scrollToPoint(x: number | undefined | null, y: number | undefined | null, duration = 0): Promise { diff --git a/core/src/components/content/readme.md b/core/src/components/content/readme.md index 403368ee4bb..4102fd8a111 100644 --- a/core/src/components/content/readme.md +++ b/core/src/components/content/readme.md @@ -96,12 +96,12 @@ export default Example; ### `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`: +Get the element where the actual scrolling takes place. +This element can be used to 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. +i.e. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events +and `scrollToPoint()` to scroll the content into a certain point. #### Returns @@ -111,15 +111,15 @@ Type: `Promise` ### `scrollByPoint(x: number, y: number, duration: number) => Promise` -Scroll by a specified X/Y distance in the component +Scroll by a specified X/Y distance in the component. #### Parameters -| Name | Type | Description | -| ---------- | -------- | ----------- | -| `x` | `number` | | -| `y` | `number` | | -| `duration` | `number` | | +| Name | Type | Description | +| ---------- | -------- | ---------------------------------------------------- | +| `x` | `number` | The amount to scroll by on the horizontal axis. | +| `y` | `number` | The amount to scroll by on the vertical axis. | +| `duration` | `number` | The amount of time to take scrolling by that amount. | #### Returns @@ -129,13 +129,13 @@ Type: `Promise` ### `scrollToBottom(duration?: number) => Promise` -Scroll to the bottom of the component +Scroll to the bottom of the component. #### Parameters -| Name | Type | Description | -| ---------- | -------- | ----------- | -| `duration` | `number` | | +| Name | Type | Description | +| ---------- | -------- | -------------------------------------------------------------------- | +| `duration` | `number` | The amount of time to take scrolling to the bottom. Defaults to `0`. | #### Returns @@ -145,15 +145,15 @@ Type: `Promise` ### `scrollToPoint(x: number | null | undefined, y: number | null | undefined, duration?: number) => Promise` -Scroll to a specified X/Y location in the component +Scroll to a specified X/Y location in the component. #### Parameters -| Name | Type | Description | -| ---------- | ----------------------------- | ----------- | -| `x` | `null \| number \| undefined` | | -| `y` | `null \| number \| undefined` | | -| `duration` | `number` | | +| Name | Type | Description | +| ---------- | ----------------------------- | -------------------------------------------------------------------- | +| `x` | `null \| number \| undefined` | The point to scroll to on the horizontal axis. | +| `y` | `null \| number \| undefined` | The point to scroll to on the vertical axis. | +| `duration` | `number` | The amount of time to take scrolling to that point. Defaults to `0`. | #### Returns @@ -163,13 +163,13 @@ Type: `Promise` ### `scrollToTop(duration?: number) => Promise` -Scroll to the top of the component +Scroll to the top of the component. #### Parameters -| Name | Type | Description | -| ---------- | -------- | ----------- | -| `duration` | `number` | | +| Name | Type | Description | +| ---------- | -------- | ----------------------------------------------------------------- | +| `duration` | `number` | The amount of time to take scrolling to the top. Defaults to `0`. | #### Returns diff --git a/core/src/components/fab/fab.tsx b/core/src/components/fab/fab.tsx index 7ec8e972183..3397f0c534e 100644 --- a/core/src/components/fab/fab.tsx +++ b/core/src/components/fab/fab.tsx @@ -68,7 +68,7 @@ export class Fab implements ComponentInterface { } /** - * Close an active FAB list container + * Close an active FAB list container. */ @Method() close() { diff --git a/core/src/components/fab/readme.md b/core/src/components/fab/readme.md index a55f04b42cb..1f6ed45fb38 100644 --- a/core/src/components/fab/readme.md +++ b/core/src/components/fab/readme.md @@ -288,7 +288,7 @@ export default Example; ### `close() => void` -Close an active FAB list container +Close an active FAB list container. #### Returns diff --git a/core/src/components/loading-controller/loading-controller.tsx b/core/src/components/loading-controller/loading-controller.tsx index 0925f15e45f..b69c0e2a89f 100644 --- a/core/src/components/loading-controller/loading-controller.tsx +++ b/core/src/components/loading-controller/loading-controller.tsx @@ -12,14 +12,23 @@ export class LoadingController implements ComponentInterface, OverlayController /** * Create a loading overlay with loading options. + * + * @param options The options to use to create the loading. */ @Method() - create(opts?: LoadingOptions): Promise { - return createOverlay(this.doc.createElement('ion-loading'), opts); + create(options?: LoadingOptions): Promise { + return createOverlay(this.doc.createElement('ion-loading'), options); } /** * Dismiss the open loading overlay. + * + * @param data Any data to emit in the dismiss events. + * @param role The role of the element that is dismissing the loading. + * This can be useful in a button handler for determining which button was + * clicked to dismiss the loading. + * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. + * @param id The id of the loading to dismiss. If an id is not provided, it will dismiss the most recently opened loading. */ @Method() dismiss(data?: any, role?: string, id?: string) { diff --git a/core/src/components/loading-controller/readme.md b/core/src/components/loading-controller/readme.md index b6ffccad66f..fc3a0bdf017 100644 --- a/core/src/components/loading-controller/readme.md +++ b/core/src/components/loading-controller/readme.md @@ -30,15 +30,15 @@ async function presentLoading() { ## Methods -### `create(opts?: LoadingOptions | undefined) => Promise` +### `create(options?: LoadingOptions | undefined) => Promise` Create a loading overlay with loading options. #### Parameters -| Name | Type | Description | -| ------ | ----------------------------- | ----------- | -| `opts` | `LoadingOptions \| undefined` | | +| Name | Type | Description | +| --------- | ----------------------------- | ----------------------------------------- | +| `options` | `LoadingOptions \| undefined` | The options to use to create the loading. | #### Returns @@ -52,11 +52,11 @@ Dismiss the open loading overlay. #### Parameters -| Name | Type | Description | -| ------ | --------------------- | ----------- | -| `data` | `any` | | -| `role` | `string \| undefined` | | -| `id` | `string \| undefined` | | +| Name | Type | Description | +| ------ | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `data` | `any` | Any data to emit in the dismiss events. | +| `role` | `string \| undefined` | The role of the element that is dismissing the loading. This can be useful in a button handler for determining which button was clicked to dismiss the loading. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. | +| `id` | `string \| undefined` | The id of the loading to dismiss. If an id is not provided, it will dismiss the most recently opened loading. | #### Returns diff --git a/core/src/components/loading/loading.tsx b/core/src/components/loading/loading.tsx index c012e8cf13e..7f3646440a9 100644 --- a/core/src/components/loading/loading.tsx +++ b/core/src/components/loading/loading.tsx @@ -142,6 +142,12 @@ export class Loading implements ComponentInterface, OverlayInterface { /** * Dismiss the loading overlay after it has been presented. + * + * @param data Any data to emit in the dismiss events. + * @param role The role of the element that is dismissing the loading. + * This can be useful in a button handler for determining which button was + * clicked to dismiss the loading. + * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. */ @Method() dismiss(data?: any, role?: string): Promise { diff --git a/core/src/components/loading/readme.md b/core/src/components/loading/readme.md index 684922825bd..83baaf1d463 100644 --- a/core/src/components/loading/readme.md +++ b/core/src/components/loading/readme.md @@ -230,10 +230,10 @@ Dismiss the loading overlay after it has been presented. #### Parameters -| Name | Type | Description | -| ------ | --------------------- | ----------- | -| `data` | `any` | | -| `role` | `string \| undefined` | | +| Name | Type | Description | +| ------ | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `data` | `any` | Any data to emit in the dismiss events. | +| `role` | `string \| undefined` | The role of the element that is dismissing the loading. This can be useful in a button handler for determining which button was clicked to dismiss the loading. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. | #### Returns diff --git a/core/src/components/menu-controller/menu-controller.ts b/core/src/components/menu-controller/menu-controller.ts index a7e7ceb1376..0544fb0b9b1 100644 --- a/core/src/components/menu-controller/menu-controller.ts +++ b/core/src/components/menu-controller/menu-controller.ts @@ -25,140 +25,167 @@ export class MenuController implements MenuControllerI { } /** - * Open the menu. + * Open the menu. If a menu is not provided then it will open the first + * menu found. If the specified menu is `start` or `end`, then it will open + * the enabled menu on that side. Otherwise, it will try to find the menu + * using the menu's `id` property. If a menu is not found then it will + * return `false`. + * + * @param menu The menuId or side of the menu to open. */ @Method() - async open(menuId?: string | null): Promise { - const menu = await this.get(menuId); - if (menu) { - return menu.open(); + async open(menu?: string | null): Promise { + const menuEl = await this.get(menu); + if (menuEl) { + return menuEl.open(); } return false; } /** - * Close the menu. If no menu is specified, then it will close any menu - * that is open. If a menu is specified, it will close that menu. + * Close the menu. If a menu is specified, it will close that menu. + * If no menu is specified, then it will close any menu that is open. + * If it does not find any open menus, it will return `false`. + * + * @param menu The menuId or side of the menu to close. */ @Method() - async close(menuId?: string | null): Promise { - const menu = await (menuId !== undefined ? this.get(menuId) : this.getOpen()); - if (menu !== undefined) { - return menu.close(); + async close(menu?: string | null): Promise { + const menuEl = await (menu !== undefined ? this.get(menu) : this.getOpen()); + if (menuEl !== undefined) { + return menuEl.close(); } return false; } /** - * Toggle the menu. If it's closed, it will open, and if opened, it - * will close. + * Toggle the menu open or closed. If the menu is already open, it will try to + * close the menu, otherwise it will try to open it. Returns `false` if + * a menu is not found. + * + * @param menu The menuId or side of the menu to toggle. */ @Method() - async toggle(menuId?: string | null): Promise { - const menu = await this.get(menuId); - if (menu) { - return menu.toggle(); + async toggle(menu?: string | null): Promise { + const menuEl = await this.get(menu); + if (menuEl) { + return menuEl.toggle(); } return false; } /** - * Used to enable or disable a menu. For example, there could be multiple - * left menus, but only one of them should be able to be opened at the same - * time. If there are multiple menus on the same side, then enabling one menu - * will also automatically disable all the others that are on the same side. + * Enable or disable a menu. Disabling a menu will not allow gestures + * for that menu or any calls to open it. This is useful when there are + * multiple menus on the same side and only one of them should be allowed + * to open. Enabling a menu will automatically disable all other menus + * on that side. + * + * @param enable If `true`, the menu should be enabled. + * @param menu The menuId or side of the menu to enable or disable. */ @Method() - async enable(shouldEnable: boolean, menuId?: string | null): Promise { - const menu = await this.get(menuId); - if (menu) { - menu.disabled = !shouldEnable; + async enable(enable: boolean, menu?: string | null): Promise { + const menuEl = await this.get(menu); + if (menuEl) { + menuEl.disabled = !enable; } - return menu; + return menuEl; } /** - * Used to enable or disable the ability to swipe open the menu. + * Enable or disable the ability to swipe open the menu. + * + * @param enable If `true`, the menu swipe gesture should be enabled. + * @param menu The menuId or side of the menu to enable or disable the swipe gesture on. */ @Method() - async swipeGesture(shouldEnable: boolean, menuId?: string | null): Promise { - const menu = await this.get(menuId); - if (menu) { - menu.swipeGesture = shouldEnable; + async swipeGesture(enable: boolean, menu?: string | null): Promise { + const menuEl = await this.get(menu); + if (menuEl) { + menuEl.swipeGesture = enable; } - return menu; + return menuEl; } /** - * Returns `true` if the specified menu is open. If the menu is not specified, it - * will return `true` if any menu is currently open. + * Get whether or not the menu is open. Returns `true` if the specified + * menu is open. If a menu is not specified, it will return `true` if + * any menu is currently open. + * + * @param menu The menuId or side of the menu that is being checked. */ @Method() - async isOpen(menuId?: string | null): Promise { - if (menuId != null) { - const menu = await this.get(menuId); - return (menu !== undefined && menu.isOpen()); + async isOpen(menu?: string | null): Promise { + if (menu != null) { + const menuEl = await this.get(menu); + return (menuEl !== undefined && menuEl.isOpen()); } else { - const menu = await this.getOpen(); - return menu !== undefined; + const menuEl = await this.getOpen(); + return menuEl !== undefined; } } /** - * Returns `true` if the specified menu is enabled. + * Get whether or not the menu is enabled. Returns `true` if the + * specified menu is enabled. Returns `false` if a menu is disabled + * or not found. + * + * @param menu The menuId or side of the menu that is being checked. */ @Method() - async isEnabled(menuId?: string | null): Promise { - const menu = await this.get(menuId); - if (menu) { - return !menu.disabled; + async isEnabled(menu?: string | null): Promise { + const menuEl = await this.get(menu); + if (menuEl) { + return !menuEl.disabled; } return false; } /** - * Used to get a menu instance. If a menu is not provided then it will - * return the first menu found. If the specified menu is `start` or `end`, then - * it will return the enabled menu on that side. Otherwise, it will try to find - * the menu using the menu's `id` property. If a menu is not found then it will - * return `null`. + * Get a menu instance. If a menu is not provided then it will return the first + * menu found. If the specified menu is `start` or `end`, then it will return the + * enabled menu on that side. Otherwise, it will try to find the menu using the menu's + * `id` property. If a menu is not found then it will return `null`. + * + * @param menu The menuId or side of the menu. */ @Method() - async get(menuId?: string | null): Promise { + async get(menu?: string | null): Promise { if (Build.isDev) { - if (menuId === 'left') { + if (menu === 'left') { console.error('menu.side=left is deprecated, use "start" instead'); return undefined; } - if (menuId === 'right') { + if (menu === 'right') { console.error('menu.side=right is deprecated, use "end" instead'); return undefined; } } await this.waitUntilReady(); - if (menuId === 'start' || menuId === 'end') { + if (menu === 'start' || menu === 'end') { // there could be more than one menu on the same side // so first try to get the enabled one - const menuRef = this.find(m => m.side === menuId && !m.disabled); + const menuRef = this.find(m => m.side === menu && !m.disabled); if (menuRef) { return menuRef; } // didn't find a menu side that is enabled // so try to get the first menu side found - return this.find(m => m.side === menuId); + return this.find(m => m.side === menu); - } else if (menuId != null) { + } else if (menu != null) { // the menuId was not left or right // so try to get the menu by its "id" - return this.find(m => m.menuId === menuId); + return this.find(m => m.menuId === menu); } // return the first enabled menu - const menu = this.find(m => !m.disabled); - if (menu) { - return menu; + const menuEl = this.find(m => !m.disabled); + if (menuEl) { + return menuEl; } // get the first menu in the array, if one exists @@ -166,7 +193,7 @@ export class MenuController implements MenuControllerI { } /** - * Returns the instance of the menu already opened, otherwise `null`. + * Get the instance of the opened menu. Returns `null` if a menu is not found. */ @Method() async getOpen(): Promise { @@ -175,7 +202,7 @@ export class MenuController implements MenuControllerI { } /** - * Returns an array of all menu instances. + * Get all menu instances. */ @Method() async getMenus(): Promise { @@ -184,7 +211,8 @@ export class MenuController implements MenuControllerI { } /** - * Returns `true` if any menu is currently animating. + * Get whether or not a menu is animating. Returns `true` if any + * menu is currently animating. */ @Method() async isAnimating(): Promise { @@ -193,11 +221,11 @@ export class MenuController implements MenuControllerI { } /** - * Registers a new animation that can be used in any `ion-menu`. + * Registers a new animation that can be used with any `ion-menu` by + * passing the name of the animation in its `type` property. * - * ``` - * - * ``` + * @param name The name of the animation to register. + * @param animation The animation function to register. */ @Method() registerAnimation(name: string, animation: AnimationBuilder) { diff --git a/core/src/components/menu-controller/readme.md b/core/src/components/menu-controller/readme.md index 53369098c7c..0131a1f6f45 100644 --- a/core/src/components/menu-controller/readme.md +++ b/core/src/components/menu-controller/readme.md @@ -8,16 +8,17 @@ The Menu Controller makes it easy to control a Menu. The methods provided can be ## Methods -### `close(menuId?: string | null | undefined) => Promise` +### `close(menu?: string | null | undefined) => Promise` -Close the menu. If no menu is specified, then it will close any menu -that is open. If a menu is specified, it will close that menu. +Close the menu. If a menu is specified, it will close that menu. +If no menu is specified, then it will close any menu that is open. +If it does not find any open menus, it will return `false`. #### Parameters -| Name | Type | Description | -| -------- | ----------------------------- | ----------- | -| `menuId` | `null \| string \| undefined` | | +| Name | Type | Description | +| ------ | ----------------------------- | ---------------------------------------- | +| `menu` | `null \| string \| undefined` | The menuId or side of the menu to close. | #### Returns @@ -25,19 +26,20 @@ Type: `Promise` -### `enable(shouldEnable: boolean, menuId?: string | null | undefined) => Promise` +### `enable(enable: boolean, menu?: string | null | undefined) => Promise` -Used to enable or disable a menu. For example, there could be multiple -left menus, but only one of them should be able to be opened at the same -time. If there are multiple menus on the same side, then enabling one menu -will also automatically disable all the others that are on the same side. +Enable or disable a menu. Disabling a menu will not allow gestures +for that menu or any calls to open it. This is useful when there are +multiple menus on the same side and only one of them should be allowed +to open. Enabling a menu will automatically disable all other menus +on that side. #### Parameters -| Name | Type | Description | -| -------------- | ----------------------------- | ----------- | -| `shouldEnable` | `boolean` | | -| `menuId` | `null \| string \| undefined` | | +| Name | Type | Description | +| -------- | ----------------------------- | ---------------------------------------------------- | +| `enable` | `boolean` | If `true`, the menu should be enabled. | +| `menu` | `null \| string \| undefined` | The menuId or side of the menu to enable or disable. | #### Returns @@ -45,19 +47,18 @@ Type: `Promise` -### `get(menuId?: string | null | undefined) => Promise` +### `get(menu?: string | null | undefined) => Promise` -Used to get a menu instance. If a menu is not provided then it will -return the first menu found. If the specified menu is `start` or `end`, then -it will return the enabled menu on that side. Otherwise, it will try to find -the menu using the menu's `id` property. If a menu is not found then it will -return `null`. +Get a menu instance. If a menu is not provided then it will return the first +menu found. If the specified menu is `start` or `end`, then it will return the +enabled menu on that side. Otherwise, it will try to find the menu using the menu's +`id` property. If a menu is not found then it will return `null`. #### Parameters -| Name | Type | Description | -| -------- | ----------------------------- | ----------- | -| `menuId` | `null \| string \| undefined` | | +| Name | Type | Description | +| ------ | ----------------------------- | ------------------------------- | +| `menu` | `null \| string \| undefined` | The menuId or side of the menu. | #### Returns @@ -67,7 +68,7 @@ Type: `Promise` ### `getMenus() => Promise` -Returns an array of all menu instances. +Get all menu instances. #### Returns @@ -77,7 +78,7 @@ Type: `Promise` ### `getOpen() => Promise` -Returns the instance of the menu already opened, otherwise `null`. +Get the instance of the opened menu. Returns `null` if a menu is not found. #### Returns @@ -87,7 +88,8 @@ Type: `Promise` ### `isAnimating() => Promise` -Returns `true` if any menu is currently animating. +Get whether or not a menu is animating. Returns `true` if any +menu is currently animating. #### Returns @@ -95,15 +97,17 @@ Type: `Promise` -### `isEnabled(menuId?: string | null | undefined) => Promise` +### `isEnabled(menu?: string | null | undefined) => Promise` -Returns `true` if the specified menu is enabled. +Get whether or not the menu is enabled. Returns `true` if the +specified menu is enabled. Returns `false` if a menu is disabled +or not found. #### Parameters -| Name | Type | Description | -| -------- | ----------------------------- | ----------- | -| `menuId` | `null \| string \| undefined` | | +| Name | Type | Description | +| ------ | ----------------------------- | ----------------------------------------------------- | +| `menu` | `null \| string \| undefined` | The menuId or side of the menu that is being checked. | #### Returns @@ -111,16 +115,17 @@ Type: `Promise` -### `isOpen(menuId?: string | null | undefined) => Promise` +### `isOpen(menu?: 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. +Get whether or not the menu is open. Returns `true` if the specified +menu is open. If a menu is not specified, it will return `true` if +any menu is currently open. #### Parameters -| Name | Type | Description | -| -------- | ----------------------------- | ----------- | -| `menuId` | `null \| string \| undefined` | | +| Name | Type | Description | +| ------ | ----------------------------- | ----------------------------------------------------- | +| `menu` | `null \| string \| undefined` | The menuId or side of the menu that is being checked. | #### Returns @@ -128,15 +133,19 @@ Type: `Promise` -### `open(menuId?: string | null | undefined) => Promise` +### `open(menu?: string | null | undefined) => Promise` -Open the menu. +Open the menu. If a menu is not provided then it will open the first +menu found. If the specified menu is `start` or `end`, then it will open +the enabled menu on that side. Otherwise, it will try to find the menu +using the menu's `id` property. If a menu is not found then it will +return `false`. #### Parameters -| Name | Type | Description | -| -------- | ----------------------------- | ----------- | -| `menuId` | `null \| string \| undefined` | | +| Name | Type | Description | +| ------ | ----------------------------- | --------------------------------------- | +| `menu` | `null \| string \| undefined` | The menuId or side of the menu to open. | #### Returns @@ -146,18 +155,15 @@ Type: `Promise` ### `registerAnimation(name: string, animation: AnimationBuilder) => void` -Registers a new animation that can be used in any `ion-menu`. - -``` - * - * ``` +Registers a new animation that can be used with any `ion-menu` by +passing the name of the animation in its `type` property. #### Parameters -| Name | Type | Description | -| ----------- | ----------------------------------------------------------------------- | ----------- | -| `name` | `string` | | -| `animation` | `(Animation: Animation, baseEl: any, opts?: any) => Promise` | | +| Name | Type | Description | +| ----------- | ----------------------------------------------------------------------- | -------------------------------------- | +| `name` | `string` | The name of the animation to register. | +| `animation` | `(Animation: Animation, baseEl: any, opts?: any) => Promise` | The animation function to register. | #### Returns @@ -165,16 +171,16 @@ Type: `void` -### `swipeGesture(shouldEnable: boolean, menuId?: string | null | undefined) => Promise` +### `swipeGesture(enable: boolean, menu?: string | null | undefined) => Promise` -Used to enable or disable the ability to swipe open the menu. +Enable or disable the ability to swipe open the menu. #### Parameters -| Name | Type | Description | -| -------------- | ----------------------------- | ----------- | -| `shouldEnable` | `boolean` | | -| `menuId` | `null \| string \| undefined` | | +| Name | Type | Description | +| -------- | ----------------------------- | ------------------------------------------------------------------------- | +| `enable` | `boolean` | If `true`, the menu swipe gesture should be enabled. | +| `menu` | `null \| string \| undefined` | The menuId or side of the menu to enable or disable the swipe gesture on. | #### Returns @@ -182,16 +188,17 @@ Type: `Promise` -### `toggle(menuId?: string | null | undefined) => Promise` +### `toggle(menu?: string | null | undefined) => Promise` -Toggle the menu. If it's closed, it will open, and if opened, it -will close. +Toggle the menu open or closed. If the menu is already open, it will try to +close the menu, otherwise it will try to open it. Returns `false` if +a menu is not found. #### Parameters -| Name | Type | Description | -| -------- | ----------------------------- | ----------- | -| `menuId` | `null \| string \| undefined` | | +| Name | Type | Description | +| ------ | ----------------------------- | ----------------------------------------- | +| `menu` | `null \| string \| undefined` | The menuId or side of the menu to toggle. | #### Returns diff --git a/core/src/components/menu/menu.tsx b/core/src/components/menu/menu.tsx index 98f00b64c7a..0af3c504ce6 100644 --- a/core/src/components/menu/menu.tsx +++ b/core/src/components/menu/menu.tsx @@ -54,8 +54,9 @@ export class Menu implements ComponentInterface, MenuI { @Prop() menuId?: string; /** - * The display type of the menu. + * The animation type of the menu. * Available options: `"overlay"`, `"reveal"`, `"push"`. + * Custom animations can be registered by the menu controller. */ @Prop({ mutable: true }) type?: string; @@ -230,7 +231,7 @@ export class Menu implements ComponentInterface, MenuI { } /** - * Returns `true` is the menu is open. + * Get whether or not the menu is open. Returns `true` if the menu is open. */ @Method() isOpen(): Promise { @@ -238,10 +239,10 @@ export class Menu implements ComponentInterface, MenuI { } /** - * Returns `true` is the menu is active. + * Get whether or not the menu is active. Returns `true` if 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`. + * and it's not part of an `ion-split-pane`. */ @Method() isActive(): Promise { @@ -249,8 +250,9 @@ export class Menu implements ComponentInterface, MenuI { } /** - * Opens the menu. If the menu is already open or it can't be opened, - * it returns `false`. + * Open the menu. Returns `false` if the menu is already open or it can't be opened. + * + * @param animated If `true`, the menu will animate on open. */ @Method() open(animated = true): Promise { @@ -258,8 +260,9 @@ export class Menu implements ComponentInterface, MenuI { } /** - * Closes the menu. If the menu is already closed or it can't be closed, - * it returns `false`. + * Close the menu. Returns `false` if the menu is already closed or it can't be closed. + * + * @param animated If `true`, the menu will animate on close. */ @Method() close(animated = true): Promise { @@ -267,8 +270,11 @@ export class Menu implements ComponentInterface, MenuI { } /** - * 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 the menu open or closed. If the menu is already open, it will try to + * close the menu, otherwise it will try to open it. Returns `false` if + * the operation can't be completed successfully. + * + * @param animated If `true`, the menu will animate on open and close. */ @Method() toggle(animated = true): Promise { @@ -276,8 +282,11 @@ export class Menu implements ComponentInterface, MenuI { } /** - * Opens or closes the button. - * If the operation can't be completed successfully, it returns `false`. + * Sets the menu to open or closed. + * Returns `false` if the operation can't be completed successfully. + * + * @param shouldOpen If `true`, the menu should open. + * @param animated If `true`, the menu will animate on open and close. */ @Method() setOpen(shouldOpen: boolean, animated = true): Promise { diff --git a/core/src/components/menu/readme.md b/core/src/components/menu/readme.md index 7d495c971cb..0a0dcb9532f 100644 --- a/core/src/components/menu/readme.md +++ b/core/src/components/menu/readme.md @@ -360,15 +360,15 @@ export default Example; ## Properties -| Property | Attribute | Description | Type | Default | -| -------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------ | --------------------- | ----------- | -| `contentId` | `content-id` | The content's id the menu should use. | `string \| undefined` | `undefined` | -| `disabled` | `disabled` | If `true`, the menu is disabled. | `boolean` | `false` | -| `maxEdgeStart` | `max-edge-start` | The edge threshold for dragging the menu open. If a drag/swipe happens over this value, the menu is not triggered. | `number` | `50` | -| `menuId` | `menu-id` | An id for the menu. | `string \| undefined` | `undefined` | -| `side` | `side` | Which side of the view the menu should be placed. | `"end" \| "start"` | `'start'` | -| `swipeGesture` | `swipe-gesture` | If `true`, swiping the menu is enabled. | `boolean` | `true` | -| `type` | `type` | The display type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`. | `string \| undefined` | `undefined` | +| Property | Attribute | Description | Type | Default | +| -------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- | +| `contentId` | `content-id` | The content's id the menu should use. | `string \| undefined` | `undefined` | +| `disabled` | `disabled` | If `true`, the menu is disabled. | `boolean` | `false` | +| `maxEdgeStart` | `max-edge-start` | The edge threshold for dragging the menu open. If a drag/swipe happens over this value, the menu is not triggered. | `number` | `50` | +| `menuId` | `menu-id` | An id for the menu. | `string \| undefined` | `undefined` | +| `side` | `side` | Which side of the view the menu should be placed. | `"end" \| "start"` | `'start'` | +| `swipeGesture` | `swipe-gesture` | If `true`, swiping the menu is enabled. | `boolean` | `true` | +| `type` | `type` | The animation type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`. Custom animations can be registered by the menu controller. | `string \| undefined` | `undefined` | ## Events @@ -385,14 +385,13 @@ export default Example; ### `close(animated?: boolean) => Promise` -Closes the menu. If the menu is already closed or it can't be closed, -it returns `false`. +Close the menu. Returns `false` if the menu is already closed or it can't be closed. #### Parameters -| Name | Type | Description | -| ---------- | --------- | ----------- | -| `animated` | `boolean` | | +| Name | Type | Description | +| ---------- | --------- | ------------------------------------------ | +| `animated` | `boolean` | If `true`, the menu will animate on close. | #### Returns @@ -402,10 +401,10 @@ Type: `Promise` ### `isActive() => Promise` -Returns `true` is the menu is active. +Get whether or not the menu is active. Returns `true` if 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`. +and it's not part of an `ion-split-pane`. #### Returns @@ -415,7 +414,7 @@ Type: `Promise` ### `isOpen() => Promise` -Returns `true` is the menu is open. +Get whether or not the menu is open. Returns `true` if the menu is open. #### Returns @@ -425,14 +424,13 @@ Type: `Promise` ### `open(animated?: boolean) => Promise` -Opens the menu. If the menu is already open or it can't be opened, -it returns `false`. +Open the menu. Returns `false` if the menu is already open or it can't be opened. #### Parameters -| Name | Type | Description | -| ---------- | --------- | ----------- | -| `animated` | `boolean` | | +| Name | Type | Description | +| ---------- | --------- | ----------------------------------------- | +| `animated` | `boolean` | If `true`, the menu will animate on open. | #### Returns @@ -442,15 +440,15 @@ Type: `Promise` ### `setOpen(shouldOpen: boolean, animated?: boolean) => Promise` -Opens or closes the button. -If the operation can't be completed successfully, it returns `false`. +Sets the menu to open or closed. +Returns `false` if the operation can't be completed successfully. #### Parameters -| Name | Type | Description | -| ------------ | --------- | ----------- | -| `shouldOpen` | `boolean` | | -| `animated` | `boolean` | | +| Name | Type | Description | +| ------------ | --------- | --------------------------------------------------- | +| `shouldOpen` | `boolean` | If `true`, the menu should open. | +| `animated` | `boolean` | If `true`, the menu will animate on open and close. | #### Returns @@ -460,14 +458,15 @@ 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`. +Toggle the menu open or closed. If the menu is already open, it will try to +close the menu, otherwise it will try to open it. Returns `false` if +the operation can't be completed successfully. #### Parameters -| Name | Type | Description | -| ---------- | --------- | ----------- | -| `animated` | `boolean` | | +| Name | Type | Description | +| ---------- | --------- | --------------------------------------------------- | +| `animated` | `boolean` | If `true`, the menu will animate on open and close. | #### Returns diff --git a/core/src/components/modal-controller/modal-controller.tsx b/core/src/components/modal-controller/modal-controller.tsx index 89bc59b033b..ab23d86b15d 100644 --- a/core/src/components/modal-controller/modal-controller.tsx +++ b/core/src/components/modal-controller/modal-controller.tsx @@ -12,14 +12,23 @@ export class ModalController implements ComponentInterface, OverlayController { /** * Create a modal overlay with modal options. + * + * @param options The options to use to create the modal. */ @Method() - create(opts: ModalOptions): Promise { - return createOverlay(this.doc.createElement('ion-modal'), opts); + create(options: ModalOptions): Promise { + return createOverlay(this.doc.createElement('ion-modal'), options); } /** * Dismiss the open modal overlay. + * + * @param data Any data to emit in the dismiss events. + * @param role The role of the element that is dismissing the modal. + * This can be useful in a button handler for determining which button was + * clicked to dismiss the modal. + * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. + * @param id The id of the modal to dismiss. If an id is not provided, it will dismiss the most recently opened modal. */ @Method() dismiss(data?: any, role?: string, id?: string) { diff --git a/core/src/components/modal-controller/readme.md b/core/src/components/modal-controller/readme.md index 4b4c89dd55c..037f62b7d34 100644 --- a/core/src/components/modal-controller/readme.md +++ b/core/src/components/modal-controller/readme.md @@ -8,15 +8,15 @@ Modal controllers programmatically control the modal component. Modals can be cr ## Methods -### `create(opts: ModalOptions) => Promise` +### `create(options: ModalOptions) => Promise` Create a modal overlay with modal options. #### Parameters -| Name | Type | Description | -| ------ | ----------------- | ----------- | -| `opts` | `ModalOptions` | | +| Name | Type | Description | +| --------- | ----------------- | --------------------------------------- | +| `options` | `ModalOptions` | The options to use to create the modal. | #### Returns @@ -30,11 +30,11 @@ Dismiss the open modal overlay. #### Parameters -| Name | Type | Description | -| ------ | --------------------- | ----------- | -| `data` | `any` | | -| `role` | `string \| undefined` | | -| `id` | `string \| undefined` | | +| Name | Type | Description | +| ------ | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `data` | `any` | Any data to emit in the dismiss events. | +| `role` | `string \| undefined` | The role of the element that is dismissing the modal. This can be useful in a button handler for determining which button was clicked to dismiss the modal. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. | +| `id` | `string \| undefined` | The id of the modal to dismiss. If an id is not provided, it will dismiss the most recently opened modal. | #### Returns diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx index e920555e69c..dc0ff8a50dd 100644 --- a/core/src/components/modal/modal.tsx +++ b/core/src/components/modal/modal.tsx @@ -160,6 +160,9 @@ export class Modal implements ComponentInterface, OverlayInterface { /** * Dismiss the modal overlay after it has been presented. + * + * @param data Any data to emit in the dismiss events. + * @param role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'. */ @Method() async dismiss(data?: any, role?: string): Promise { @@ -172,7 +175,6 @@ export class Modal implements ComponentInterface, OverlayInterface { /** * Returns a promise that resolves when the modal did dismiss. - * */ @Method() onDidDismiss(): Promise { @@ -181,7 +183,6 @@ export class Modal implements ComponentInterface, OverlayInterface { /** * Returns a promise that resolves when the modal will dismiss. - * */ @Method() onWillDismiss(): Promise { diff --git a/core/src/components/modal/readme.md b/core/src/components/modal/readme.md index 12d991086cb..fd6c59a2dd3 100644 --- a/core/src/components/modal/readme.md +++ b/core/src/components/modal/readme.md @@ -308,10 +308,10 @@ Dismiss the modal overlay after it has been presented. #### Parameters -| Name | Type | Description | -| ------ | --------------------- | ----------- | -| `data` | `any` | | -| `role` | `string \| undefined` | | +| Name | Type | Description | +| ------ | --------------------- | ------------------------------------------------------------------------------------------ | +| `data` | `any` | Any data to emit in the dismiss events. | +| `role` | `string \| undefined` | The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'. | #### Returns diff --git a/core/src/components/nav/nav.tsx b/core/src/components/nav/nav.tsx index d4fd51fa4b0..276277a3f57 100644 --- a/core/src/components/nav/nav.tsx +++ b/core/src/components/nav/nav.tsx @@ -139,7 +139,14 @@ export class Nav implements NavOutlet { } /** - * Push a new component onto the current navigation stack. Pass any additional information along as an object. This additional information is accessible through NavParams + * Push a new component onto the current navigation stack. Pass any additional + * information along as an object. This additional information is accessible + * through NavParams. + * + * @param component The component to push onto the navigation stack. + * @param componentProps Any properties of the component. + * @param opts The navigation options. + * @param done The transition complete function. */ @Method() push( @@ -159,7 +166,14 @@ export class Nav implements NavOutlet { } /** - * Inserts a component into the nav stack at the specified index. This is useful if you need to add a component at any point in your navigation stack. + * Inserts a component into the navigation stack at the specified index. + * This is useful to add a component at any point in the navigation stack. + * + * @param insertIndex The index to insert the component at in the stack. + * @param component The component to insert into the navigation stack. + * @param componentProps Any properties of the component. + * @param opts The navigation options. + * @param done The transition complete function. */ @Method() insert( @@ -180,7 +194,14 @@ export class Nav implements NavOutlet { } /** - * Inserts an array of components into the nav stack at the specified index. The last component in the array will become instantiated as a view, and animate in to become the active view. + * Inserts an array of components into the navigation stack at the specified index. + * The last component in the array will become instantiated as a view, and animate + * in to become the active view. + * + * @param insertIndex The index to insert the components at in the stack. + * @param insertComponents The components to insert into the navigation stack. + * @param opts The navigation options. + * @param done The transition complete function. */ @Method() insertPages( @@ -200,7 +221,11 @@ export class Nav implements NavOutlet { } /** - * Call to navigate back from a current component. Similar to push(), you can also pass navigation options. + * Pop a component off of the navigation stack. Navigates back from the current + * component. + * + * @param opts The navigation options. + * @param done The transition complete function. */ @Method() pop(opts?: NavOptions | null, done?: TransitionDoneFn): Promise { @@ -215,7 +240,11 @@ export class Nav implements NavOutlet { } /** - * Pop to a specific index in the navigation stack + * Pop to a specific index in the navigation stack. + * + * @param indexOrViewCtrl The index or view controller to pop to. + * @param opts The navigation options. + * @param done The transition complete function. */ @Method() popTo( @@ -239,6 +268,9 @@ export class Nav implements NavOutlet { /** * Navigate back to the root of the stack, no matter how far back that is. + * + * @param opts The navigation options. + * @param done The transition complete function. */ @Method() popToRoot( @@ -256,7 +288,12 @@ export class Nav implements NavOutlet { } /** - * Removes a page from the nav stack at the specified index. + * Removes a component from the navigation stack at the specified index. + * + * @param startIndex The number to begin removal at. + * @param removeCount The number of components to remove. + * @param opts The navigation options. + * @param done The transition complete function. */ @Method() removeIndex( @@ -276,7 +313,12 @@ export class Nav implements NavOutlet { } /** - * Set the root for the current navigation stack. + * Set the root for the current navigation stack to a component. + * + * @param component The component to set as the root of the navigation stack. + * @param componentProps Any properties of the component. + * @param opts The navigation options. + * @param done The transition complete function. */ @Method() setRoot( @@ -293,7 +335,14 @@ export class Nav implements NavOutlet { } /** - * Set the views of the current navigation stack and navigate to the last view. By default animations are disabled, but they can be enabled by passing options to the navigation controller.You can also pass any navigation params to the individual pages in the array. + * Set the views of the current navigation stack and navigate to the last view. + * By default animations are disabled, but they can be enabled by passing options + * to the navigation controller. Navigation parameters can also be passed to the + * individual pages in the array. + * + * @param views The list of views to set as the navigation stack. + * @param opts The navigation options. + * @param done The transition complete function. */ @Method() setPages( @@ -392,7 +441,7 @@ export class Nav implements NavOutlet { } /** - * Gets the active view + * Get the active view. */ @Method() getActive(): Promise { @@ -400,7 +449,9 @@ export class Nav implements NavOutlet { } /** - * Returns the view at the index + * Get the view at the specified index. + * + * @param index The index of the view. */ @Method() getByIndex(index: number): Promise { @@ -408,7 +459,9 @@ export class Nav implements NavOutlet { } /** - * Returns `true` or false if the current view can go back + * Returns `true` if the current view can go back. + * + * @param view The view to check. */ @Method() canGoBack(view?: ViewController): Promise { @@ -416,7 +469,9 @@ export class Nav implements NavOutlet { } /** - * Gets the previous view + * Get the previous view. + * + * @param view The view to get. */ @Method() getPrevious(view?: ViewController): Promise { diff --git a/core/src/components/nav/readme.md b/core/src/components/nav/readme.md index 0b5f2ff5cad..509644fbffd 100644 --- a/core/src/components/nav/readme.md +++ b/core/src/components/nav/readme.md @@ -30,13 +30,13 @@ 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` if the current view can go back. #### Parameters -| Name | Type | Description | -| ------ | ----------------------------- | ----------- | -| `view` | `ViewController \| undefined` | | +| Name | Type | Description | +| ------ | ----------------------------- | ------------------ | +| `view` | `ViewController \| undefined` | The view to check. | #### Returns @@ -46,7 +46,7 @@ Type: `Promise` ### `getActive() => Promise` -Gets the active view +Get the active view. #### Returns @@ -56,13 +56,13 @@ Type: `Promise` ### `getByIndex(index: number) => Promise` -Returns the view at the index +Get the view at the specified index. #### Parameters -| Name | Type | Description | -| ------- | -------- | ----------- | -| `index` | `number` | | +| Name | Type | Description | +| ------- | -------- | ---------------------- | +| `index` | `number` | The index of the view. | #### Returns @@ -72,13 +72,13 @@ Type: `Promise` ### `getPrevious(view?: ViewController | undefined) => Promise` -Gets the previous view +Get the previous view. #### Parameters -| Name | Type | Description | -| ------ | ----------------------------- | ----------- | -| `view` | `ViewController \| undefined` | | +| Name | Type | Description | +| ------ | ----------------------------- | ---------------- | +| `view` | `ViewController \| undefined` | The view to get. | #### Returns @@ -88,17 +88,18 @@ Type: `Promise` ### `insert(insertIndex: number, component: T, componentProps?: ComponentProps | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise` -Inserts a component into the nav stack at the specified index. This is useful if you need to add a component at any point in your navigation stack. +Inserts a component into the navigation stack at the specified index. +This is useful to add a component at any point in the navigation stack. #### Parameters -| Name | Type | Description | -| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `insertIndex` | `number` | | -| `component` | `T` | | -| `componentProps` | `T extends "object" \| "ion-icon" \| "ion-action-sheet-controller" \| "ion-action-sheet" \| "ion-alert-controller" \| "ion-alert" \| "ion-anchor" \| "ion-app" \| "ion-avatar" \| "ion-back-button" \| "ion-backdrop" \| "ion-badge" \| "ion-button" \| "ion-buttons" \| "ion-card-content" \| "ion-card-header" \| "ion-card-subtitle" \| "ion-card-title" \| "ion-card" \| "ion-checkbox" \| "ion-chip" \| "ion-col" \| "ion-content" \| "ion-datetime" \| "ion-fab-button" \| "ion-fab-list" \| "ion-fab" \| "ion-footer" \| "ion-grid" \| "ion-header" \| "ion-img" \| "ion-infinite-scroll-content" \| "ion-infinite-scroll" \| "ion-input" \| "ion-item-divider" \| "ion-item-group" \| "ion-item-option" \| "ion-item-options" \| "ion-item-sliding" \| "ion-item" \| "ion-label" \| "ion-list-header" \| "ion-list" \| "ion-loading-controller" \| "ion-loading" \| "ion-menu-button" \| "ion-menu-controller" \| "ion-menu-toggle" \| "ion-menu" \| "ion-modal-controller" \| "ion-modal" \| "ion-nav-pop" \| "ion-nav-push" \| "ion-nav-set-root" \| "ion-nav" \| "ion-note" \| "ion-picker-column" \| "ion-picker-controller" \| "ion-picker" \| "ion-popover-controller" \| "ion-popover" \| "ion-progress-bar" \| "ion-radio-group" \| "ion-radio" \| "ion-range" \| "ion-refresher-content" \| "ion-refresher" \| "ion-reorder-group" \| "ion-reorder" \| "ion-ripple-effect" \| "ion-route-redirect" \| "ion-route" \| "ion-router-outlet" \| "ion-router" \| "ion-row" \| "ion-searchbar" \| "ion-segment-button" \| "ion-segment" \| "ion-select-option" \| "ion-select-popover" \| "ion-select" \| "ion-skeleton-text" \| "ion-slide" \| "ion-slides" \| "ion-spinner" \| "ion-split-pane" \| "ion-tab-bar" \| "ion-tab-button" \| "ion-tab" \| "ion-tabs" \| "ion-text" \| "ion-textarea" \| "ion-thumbnail" \| "ion-title" \| "ion-toast-controller" \| "ion-toast" \| "ion-toggle" \| "ion-toolbar" \| "ion-virtual-scroll" \| "slot" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| "canvas" \| "caption" \| "cite" \| "code" \| "col" \| "colgroup" \| "data" \| "datalist" \| "dd" \| "del" \| "details" \| "dfn" \| "dialog" \| "div" \| "dl" \| "dt" \| "em" \| "embed" \| "fieldset" \| "figcaption" \| "figure" \| "footer" \| "form" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "head" \| "header" \| "hgroup" \| "hr" \| "html" \| "i" \| "iframe" \| "img" \| "input" \| "ins" \| "kbd" \| "keygen" \| "label" \| "legend" \| "li" \| "link" \| "main" \| "map" \| "mark" \| "menu" \| "menuitem" \| "meta" \| "meter" \| "nav" \| "noscript" \| "ol" \| "optgroup" \| "option" \| "output" \| "p" \| "param" \| "picture" \| "pre" \| "progress" \| "q" \| "rp" \| "rt" \| "ruby" \| "s" \| "samp" \| "script" \| "section" \| "select" \| "small" \| "source" \| "span" \| "strong" \| "style" \| "sub" \| "summary" \| "sup" \| "table" \| "tbody" \| "td" \| "textarea" \| "tfoot" \| "th" \| "thead" \| "time" \| "title" \| "tr" \| "track" \| "u" \| "ul" \| "var" \| "video" \| "wbr" ? StencilIntrinsicElements[T] : { [key: string]: any; } \| null \| undefined` | | -| `opts` | `NavOptions \| null \| undefined` | | -| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | | +| Name | Type | Description | +| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | +| `insertIndex` | `number` | The index to insert the component at in the stack. | +| `component` | `T` | The component to insert into the navigation stack. | +| `componentProps` | `T extends "object" \| "ion-icon" \| "ion-action-sheet-controller" \| "ion-action-sheet" \| "ion-alert-controller" \| "ion-alert" \| "ion-anchor" \| "ion-app" \| "ion-avatar" \| "ion-back-button" \| "ion-backdrop" \| "ion-badge" \| "ion-button" \| "ion-buttons" \| "ion-card-content" \| "ion-card-header" \| "ion-card-subtitle" \| "ion-card-title" \| "ion-card" \| "ion-checkbox" \| "ion-chip" \| "ion-col" \| "ion-content" \| "ion-datetime" \| "ion-fab-button" \| "ion-fab-list" \| "ion-fab" \| "ion-footer" \| "ion-grid" \| "ion-header" \| "ion-img" \| "ion-infinite-scroll-content" \| "ion-infinite-scroll" \| "ion-input" \| "ion-item-divider" \| "ion-item-group" \| "ion-item-option" \| "ion-item-options" \| "ion-item-sliding" \| "ion-item" \| "ion-label" \| "ion-list-header" \| "ion-list" \| "ion-loading-controller" \| "ion-loading" \| "ion-menu-button" \| "ion-menu-controller" \| "ion-menu-toggle" \| "ion-menu" \| "ion-modal-controller" \| "ion-modal" \| "ion-nav-pop" \| "ion-nav-push" \| "ion-nav-set-root" \| "ion-nav" \| "ion-note" \| "ion-picker-column" \| "ion-picker-controller" \| "ion-picker" \| "ion-popover-controller" \| "ion-popover" \| "ion-progress-bar" \| "ion-radio-group" \| "ion-radio" \| "ion-range" \| "ion-refresher-content" \| "ion-refresher" \| "ion-reorder-group" \| "ion-reorder" \| "ion-ripple-effect" \| "ion-route-redirect" \| "ion-route" \| "ion-router-outlet" \| "ion-router" \| "ion-row" \| "ion-searchbar" \| "ion-segment-button" \| "ion-segment" \| "ion-select-option" \| "ion-select-popover" \| "ion-select" \| "ion-skeleton-text" \| "ion-slide" \| "ion-slides" \| "ion-spinner" \| "ion-split-pane" \| "ion-tab-bar" \| "ion-tab-button" \| "ion-tab" \| "ion-tabs" \| "ion-text" \| "ion-textarea" \| "ion-thumbnail" \| "ion-title" \| "ion-toast-controller" \| "ion-toast" \| "ion-toggle" \| "ion-toolbar" \| "ion-virtual-scroll" \| "slot" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| "canvas" \| "caption" \| "cite" \| "code" \| "col" \| "colgroup" \| "data" \| "datalist" \| "dd" \| "del" \| "details" \| "dfn" \| "dialog" \| "div" \| "dl" \| "dt" \| "em" \| "embed" \| "fieldset" \| "figcaption" \| "figure" \| "footer" \| "form" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "head" \| "header" \| "hgroup" \| "hr" \| "html" \| "i" \| "iframe" \| "img" \| "input" \| "ins" \| "kbd" \| "keygen" \| "label" \| "legend" \| "li" \| "link" \| "main" \| "map" \| "mark" \| "menu" \| "menuitem" \| "meta" \| "meter" \| "nav" \| "noscript" \| "ol" \| "optgroup" \| "option" \| "output" \| "p" \| "param" \| "picture" \| "pre" \| "progress" \| "q" \| "rp" \| "rt" \| "ruby" \| "s" \| "samp" \| "script" \| "section" \| "select" \| "small" \| "source" \| "span" \| "strong" \| "style" \| "sub" \| "summary" \| "sup" \| "table" \| "tbody" \| "td" \| "textarea" \| "tfoot" \| "th" \| "thead" \| "time" \| "title" \| "tr" \| "track" \| "u" \| "ul" \| "var" \| "video" \| "wbr" ? StencilIntrinsicElements[T] : { [key: string]: any; } \| null \| undefined` | Any properties of the component. | +| `opts` | `NavOptions \| null \| undefined` | The navigation options. | +| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | The transition complete function. | #### Returns @@ -108,16 +109,18 @@ Type: `Promise` ### `insertPages(insertIndex: number, insertComponents: NavComponent[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise` -Inserts an array of components into the nav stack at the specified index. The last component in the array will become instantiated as a view, and animate in to become the active view. +Inserts an array of components into the navigation stack at the specified index. +The last component in the array will become instantiated as a view, and animate +in to become the active view. #### Parameters -| Name | Type | Description | -| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `insertIndex` | `number` | | -| `insertComponents` | `NavComponent[]` | | -| `opts` | `NavOptions \| null \| undefined` | | -| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | | +| Name | Type | Description | +| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- | +| `insertIndex` | `number` | The index to insert the components at in the stack. | +| `insertComponents` | `NavComponent[]` | The components to insert into the navigation stack. | +| `opts` | `NavOptions \| null \| undefined` | The navigation options. | +| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | The transition complete function. | #### Returns @@ -127,14 +130,15 @@ Type: `Promise` ### `pop(opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise` -Call to navigate back from a current component. Similar to push(), you can also pass navigation options. +Pop a component off of the navigation stack. Navigates back from the current +component. #### Parameters -| Name | Type | Description | -| ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `opts` | `NavOptions \| null \| undefined` | | -| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | | +| Name | Type | Description | +| ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | +| `opts` | `NavOptions \| null \| undefined` | The navigation options. | +| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | The transition complete function. | #### Returns @@ -144,15 +148,15 @@ Type: `Promise` ### `popTo(indexOrViewCtrl: number | ViewController, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise` -Pop to a specific index in the navigation stack +Pop to a specific index in the navigation stack. #### Parameters -| Name | Type | Description | -| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `indexOrViewCtrl` | `ViewController \| number` | | -| `opts` | `NavOptions \| null \| undefined` | | -| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | | +| Name | Type | Description | +| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | +| `indexOrViewCtrl` | `ViewController \| number` | The index or view controller to pop to. | +| `opts` | `NavOptions \| null \| undefined` | The navigation options. | +| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | The transition complete function. | #### Returns @@ -166,10 +170,10 @@ Navigate back to the root of the stack, no matter how far back that is. #### Parameters -| Name | Type | Description | -| ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `opts` | `NavOptions \| null \| undefined` | | -| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | | +| Name | Type | Description | +| ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | +| `opts` | `NavOptions \| null \| undefined` | The navigation options. | +| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | The transition complete function. | #### Returns @@ -179,16 +183,18 @@ Type: `Promise` ### `push(component: T, componentProps?: ComponentProps | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise` -Push a new component onto the current navigation stack. Pass any additional information along as an object. This additional information is accessible through NavParams +Push a new component onto the current navigation stack. Pass any additional +information along as an object. This additional information is accessible +through NavParams. #### Parameters -| Name | Type | Description | -| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `component` | `T` | | -| `componentProps` | `T extends "object" \| "ion-icon" \| "ion-action-sheet-controller" \| "ion-action-sheet" \| "ion-alert-controller" \| "ion-alert" \| "ion-anchor" \| "ion-app" \| "ion-avatar" \| "ion-back-button" \| "ion-backdrop" \| "ion-badge" \| "ion-button" \| "ion-buttons" \| "ion-card-content" \| "ion-card-header" \| "ion-card-subtitle" \| "ion-card-title" \| "ion-card" \| "ion-checkbox" \| "ion-chip" \| "ion-col" \| "ion-content" \| "ion-datetime" \| "ion-fab-button" \| "ion-fab-list" \| "ion-fab" \| "ion-footer" \| "ion-grid" \| "ion-header" \| "ion-img" \| "ion-infinite-scroll-content" \| "ion-infinite-scroll" \| "ion-input" \| "ion-item-divider" \| "ion-item-group" \| "ion-item-option" \| "ion-item-options" \| "ion-item-sliding" \| "ion-item" \| "ion-label" \| "ion-list-header" \| "ion-list" \| "ion-loading-controller" \| "ion-loading" \| "ion-menu-button" \| "ion-menu-controller" \| "ion-menu-toggle" \| "ion-menu" \| "ion-modal-controller" \| "ion-modal" \| "ion-nav-pop" \| "ion-nav-push" \| "ion-nav-set-root" \| "ion-nav" \| "ion-note" \| "ion-picker-column" \| "ion-picker-controller" \| "ion-picker" \| "ion-popover-controller" \| "ion-popover" \| "ion-progress-bar" \| "ion-radio-group" \| "ion-radio" \| "ion-range" \| "ion-refresher-content" \| "ion-refresher" \| "ion-reorder-group" \| "ion-reorder" \| "ion-ripple-effect" \| "ion-route-redirect" \| "ion-route" \| "ion-router-outlet" \| "ion-router" \| "ion-row" \| "ion-searchbar" \| "ion-segment-button" \| "ion-segment" \| "ion-select-option" \| "ion-select-popover" \| "ion-select" \| "ion-skeleton-text" \| "ion-slide" \| "ion-slides" \| "ion-spinner" \| "ion-split-pane" \| "ion-tab-bar" \| "ion-tab-button" \| "ion-tab" \| "ion-tabs" \| "ion-text" \| "ion-textarea" \| "ion-thumbnail" \| "ion-title" \| "ion-toast-controller" \| "ion-toast" \| "ion-toggle" \| "ion-toolbar" \| "ion-virtual-scroll" \| "slot" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| "canvas" \| "caption" \| "cite" \| "code" \| "col" \| "colgroup" \| "data" \| "datalist" \| "dd" \| "del" \| "details" \| "dfn" \| "dialog" \| "div" \| "dl" \| "dt" \| "em" \| "embed" \| "fieldset" \| "figcaption" \| "figure" \| "footer" \| "form" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "head" \| "header" \| "hgroup" \| "hr" \| "html" \| "i" \| "iframe" \| "img" \| "input" \| "ins" \| "kbd" \| "keygen" \| "label" \| "legend" \| "li" \| "link" \| "main" \| "map" \| "mark" \| "menu" \| "menuitem" \| "meta" \| "meter" \| "nav" \| "noscript" \| "ol" \| "optgroup" \| "option" \| "output" \| "p" \| "param" \| "picture" \| "pre" \| "progress" \| "q" \| "rp" \| "rt" \| "ruby" \| "s" \| "samp" \| "script" \| "section" \| "select" \| "small" \| "source" \| "span" \| "strong" \| "style" \| "sub" \| "summary" \| "sup" \| "table" \| "tbody" \| "td" \| "textarea" \| "tfoot" \| "th" \| "thead" \| "time" \| "title" \| "tr" \| "track" \| "u" \| "ul" \| "var" \| "video" \| "wbr" ? StencilIntrinsicElements[T] : { [key: string]: any; } \| null \| undefined` | | -| `opts` | `NavOptions \| null \| undefined` | | -| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | | +| Name | Type | Description | +| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | +| `component` | `T` | The component to push onto the navigation stack. | +| `componentProps` | `T extends "object" \| "ion-icon" \| "ion-action-sheet-controller" \| "ion-action-sheet" \| "ion-alert-controller" \| "ion-alert" \| "ion-anchor" \| "ion-app" \| "ion-avatar" \| "ion-back-button" \| "ion-backdrop" \| "ion-badge" \| "ion-button" \| "ion-buttons" \| "ion-card-content" \| "ion-card-header" \| "ion-card-subtitle" \| "ion-card-title" \| "ion-card" \| "ion-checkbox" \| "ion-chip" \| "ion-col" \| "ion-content" \| "ion-datetime" \| "ion-fab-button" \| "ion-fab-list" \| "ion-fab" \| "ion-footer" \| "ion-grid" \| "ion-header" \| "ion-img" \| "ion-infinite-scroll-content" \| "ion-infinite-scroll" \| "ion-input" \| "ion-item-divider" \| "ion-item-group" \| "ion-item-option" \| "ion-item-options" \| "ion-item-sliding" \| "ion-item" \| "ion-label" \| "ion-list-header" \| "ion-list" \| "ion-loading-controller" \| "ion-loading" \| "ion-menu-button" \| "ion-menu-controller" \| "ion-menu-toggle" \| "ion-menu" \| "ion-modal-controller" \| "ion-modal" \| "ion-nav-pop" \| "ion-nav-push" \| "ion-nav-set-root" \| "ion-nav" \| "ion-note" \| "ion-picker-column" \| "ion-picker-controller" \| "ion-picker" \| "ion-popover-controller" \| "ion-popover" \| "ion-progress-bar" \| "ion-radio-group" \| "ion-radio" \| "ion-range" \| "ion-refresher-content" \| "ion-refresher" \| "ion-reorder-group" \| "ion-reorder" \| "ion-ripple-effect" \| "ion-route-redirect" \| "ion-route" \| "ion-router-outlet" \| "ion-router" \| "ion-row" \| "ion-searchbar" \| "ion-segment-button" \| "ion-segment" \| "ion-select-option" \| "ion-select-popover" \| "ion-select" \| "ion-skeleton-text" \| "ion-slide" \| "ion-slides" \| "ion-spinner" \| "ion-split-pane" \| "ion-tab-bar" \| "ion-tab-button" \| "ion-tab" \| "ion-tabs" \| "ion-text" \| "ion-textarea" \| "ion-thumbnail" \| "ion-title" \| "ion-toast-controller" \| "ion-toast" \| "ion-toggle" \| "ion-toolbar" \| "ion-virtual-scroll" \| "slot" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| "canvas" \| "caption" \| "cite" \| "code" \| "col" \| "colgroup" \| "data" \| "datalist" \| "dd" \| "del" \| "details" \| "dfn" \| "dialog" \| "div" \| "dl" \| "dt" \| "em" \| "embed" \| "fieldset" \| "figcaption" \| "figure" \| "footer" \| "form" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "head" \| "header" \| "hgroup" \| "hr" \| "html" \| "i" \| "iframe" \| "img" \| "input" \| "ins" \| "kbd" \| "keygen" \| "label" \| "legend" \| "li" \| "link" \| "main" \| "map" \| "mark" \| "menu" \| "menuitem" \| "meta" \| "meter" \| "nav" \| "noscript" \| "ol" \| "optgroup" \| "option" \| "output" \| "p" \| "param" \| "picture" \| "pre" \| "progress" \| "q" \| "rp" \| "rt" \| "ruby" \| "s" \| "samp" \| "script" \| "section" \| "select" \| "small" \| "source" \| "span" \| "strong" \| "style" \| "sub" \| "summary" \| "sup" \| "table" \| "tbody" \| "td" \| "textarea" \| "tfoot" \| "th" \| "thead" \| "time" \| "title" \| "tr" \| "track" \| "u" \| "ul" \| "var" \| "video" \| "wbr" ? StencilIntrinsicElements[T] : { [key: string]: any; } \| null \| undefined` | Any properties of the component. | +| `opts` | `NavOptions \| null \| undefined` | The navigation options. | +| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | The transition complete function. | #### Returns @@ -198,16 +204,16 @@ Type: `Promise` ### `removeIndex(startIndex: number, removeCount?: number, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise` -Removes a page from the nav stack at the specified index. +Removes a component from the navigation stack at the specified index. #### Parameters -| Name | Type | Description | -| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `startIndex` | `number` | | -| `removeCount` | `number` | | -| `opts` | `NavOptions \| null \| undefined` | | -| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | | +| Name | Type | Description | +| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | +| `startIndex` | `number` | The number to begin removal at. | +| `removeCount` | `number` | The number of components to remove. | +| `opts` | `NavOptions \| null \| undefined` | The navigation options. | +| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | The transition complete function. | #### Returns @@ -217,15 +223,18 @@ Type: `Promise` ### `setPages(views: any[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise` -Set the views of the current navigation stack and navigate to the last view. By default animations are disabled, but they can be enabled by passing options to the navigation controller.You can also pass any navigation params to the individual pages in the array. +Set the views of the current navigation stack and navigate to the last view. +By default animations are disabled, but they can be enabled by passing options +to the navigation controller. Navigation parameters can also be passed to the +individual pages in the array. #### Parameters -| Name | Type | Description | -| ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `views` | `any[]` | | -| `opts` | `NavOptions \| null \| undefined` | | -| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | | +| Name | Type | Description | +| ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- | +| `views` | `any[]` | The list of views to set as the navigation stack. | +| `opts` | `NavOptions \| null \| undefined` | The navigation options. | +| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | The transition complete function. | #### Returns @@ -235,16 +244,16 @@ Type: `Promise` ### `setRoot(component: T, componentProps?: ComponentProps | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise` -Set the root for the current navigation stack. +Set the root for the current navigation stack to a component. #### Parameters -| Name | Type | Description | -| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `component` | `T` | | -| `componentProps` | `T extends "object" \| "ion-icon" \| "ion-action-sheet-controller" \| "ion-action-sheet" \| "ion-alert-controller" \| "ion-alert" \| "ion-anchor" \| "ion-app" \| "ion-avatar" \| "ion-back-button" \| "ion-backdrop" \| "ion-badge" \| "ion-button" \| "ion-buttons" \| "ion-card-content" \| "ion-card-header" \| "ion-card-subtitle" \| "ion-card-title" \| "ion-card" \| "ion-checkbox" \| "ion-chip" \| "ion-col" \| "ion-content" \| "ion-datetime" \| "ion-fab-button" \| "ion-fab-list" \| "ion-fab" \| "ion-footer" \| "ion-grid" \| "ion-header" \| "ion-img" \| "ion-infinite-scroll-content" \| "ion-infinite-scroll" \| "ion-input" \| "ion-item-divider" \| "ion-item-group" \| "ion-item-option" \| "ion-item-options" \| "ion-item-sliding" \| "ion-item" \| "ion-label" \| "ion-list-header" \| "ion-list" \| "ion-loading-controller" \| "ion-loading" \| "ion-menu-button" \| "ion-menu-controller" \| "ion-menu-toggle" \| "ion-menu" \| "ion-modal-controller" \| "ion-modal" \| "ion-nav-pop" \| "ion-nav-push" \| "ion-nav-set-root" \| "ion-nav" \| "ion-note" \| "ion-picker-column" \| "ion-picker-controller" \| "ion-picker" \| "ion-popover-controller" \| "ion-popover" \| "ion-progress-bar" \| "ion-radio-group" \| "ion-radio" \| "ion-range" \| "ion-refresher-content" \| "ion-refresher" \| "ion-reorder-group" \| "ion-reorder" \| "ion-ripple-effect" \| "ion-route-redirect" \| "ion-route" \| "ion-router-outlet" \| "ion-router" \| "ion-row" \| "ion-searchbar" \| "ion-segment-button" \| "ion-segment" \| "ion-select-option" \| "ion-select-popover" \| "ion-select" \| "ion-skeleton-text" \| "ion-slide" \| "ion-slides" \| "ion-spinner" \| "ion-split-pane" \| "ion-tab-bar" \| "ion-tab-button" \| "ion-tab" \| "ion-tabs" \| "ion-text" \| "ion-textarea" \| "ion-thumbnail" \| "ion-title" \| "ion-toast-controller" \| "ion-toast" \| "ion-toggle" \| "ion-toolbar" \| "ion-virtual-scroll" \| "slot" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| "canvas" \| "caption" \| "cite" \| "code" \| "col" \| "colgroup" \| "data" \| "datalist" \| "dd" \| "del" \| "details" \| "dfn" \| "dialog" \| "div" \| "dl" \| "dt" \| "em" \| "embed" \| "fieldset" \| "figcaption" \| "figure" \| "footer" \| "form" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "head" \| "header" \| "hgroup" \| "hr" \| "html" \| "i" \| "iframe" \| "img" \| "input" \| "ins" \| "kbd" \| "keygen" \| "label" \| "legend" \| "li" \| "link" \| "main" \| "map" \| "mark" \| "menu" \| "menuitem" \| "meta" \| "meter" \| "nav" \| "noscript" \| "ol" \| "optgroup" \| "option" \| "output" \| "p" \| "param" \| "picture" \| "pre" \| "progress" \| "q" \| "rp" \| "rt" \| "ruby" \| "s" \| "samp" \| "script" \| "section" \| "select" \| "small" \| "source" \| "span" \| "strong" \| "style" \| "sub" \| "summary" \| "sup" \| "table" \| "tbody" \| "td" \| "textarea" \| "tfoot" \| "th" \| "thead" \| "time" \| "title" \| "tr" \| "track" \| "u" \| "ul" \| "var" \| "video" \| "wbr" ? StencilIntrinsicElements[T] : { [key: string]: any; } \| null \| undefined` | | -| `opts` | `NavOptions \| null \| undefined` | | -| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | | +| Name | Type | Description | +| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | +| `component` | `T` | The component to set as the root of the navigation stack. | +| `componentProps` | `T extends "object" \| "ion-icon" \| "ion-action-sheet-controller" \| "ion-action-sheet" \| "ion-alert-controller" \| "ion-alert" \| "ion-anchor" \| "ion-app" \| "ion-avatar" \| "ion-back-button" \| "ion-backdrop" \| "ion-badge" \| "ion-button" \| "ion-buttons" \| "ion-card-content" \| "ion-card-header" \| "ion-card-subtitle" \| "ion-card-title" \| "ion-card" \| "ion-checkbox" \| "ion-chip" \| "ion-col" \| "ion-content" \| "ion-datetime" \| "ion-fab-button" \| "ion-fab-list" \| "ion-fab" \| "ion-footer" \| "ion-grid" \| "ion-header" \| "ion-img" \| "ion-infinite-scroll-content" \| "ion-infinite-scroll" \| "ion-input" \| "ion-item-divider" \| "ion-item-group" \| "ion-item-option" \| "ion-item-options" \| "ion-item-sliding" \| "ion-item" \| "ion-label" \| "ion-list-header" \| "ion-list" \| "ion-loading-controller" \| "ion-loading" \| "ion-menu-button" \| "ion-menu-controller" \| "ion-menu-toggle" \| "ion-menu" \| "ion-modal-controller" \| "ion-modal" \| "ion-nav-pop" \| "ion-nav-push" \| "ion-nav-set-root" \| "ion-nav" \| "ion-note" \| "ion-picker-column" \| "ion-picker-controller" \| "ion-picker" \| "ion-popover-controller" \| "ion-popover" \| "ion-progress-bar" \| "ion-radio-group" \| "ion-radio" \| "ion-range" \| "ion-refresher-content" \| "ion-refresher" \| "ion-reorder-group" \| "ion-reorder" \| "ion-ripple-effect" \| "ion-route-redirect" \| "ion-route" \| "ion-router-outlet" \| "ion-router" \| "ion-row" \| "ion-searchbar" \| "ion-segment-button" \| "ion-segment" \| "ion-select-option" \| "ion-select-popover" \| "ion-select" \| "ion-skeleton-text" \| "ion-slide" \| "ion-slides" \| "ion-spinner" \| "ion-split-pane" \| "ion-tab-bar" \| "ion-tab-button" \| "ion-tab" \| "ion-tabs" \| "ion-text" \| "ion-textarea" \| "ion-thumbnail" \| "ion-title" \| "ion-toast-controller" \| "ion-toast" \| "ion-toggle" \| "ion-toolbar" \| "ion-virtual-scroll" \| "slot" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| "canvas" \| "caption" \| "cite" \| "code" \| "col" \| "colgroup" \| "data" \| "datalist" \| "dd" \| "del" \| "details" \| "dfn" \| "dialog" \| "div" \| "dl" \| "dt" \| "em" \| "embed" \| "fieldset" \| "figcaption" \| "figure" \| "footer" \| "form" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "head" \| "header" \| "hgroup" \| "hr" \| "html" \| "i" \| "iframe" \| "img" \| "input" \| "ins" \| "kbd" \| "keygen" \| "label" \| "legend" \| "li" \| "link" \| "main" \| "map" \| "mark" \| "menu" \| "menuitem" \| "meta" \| "meter" \| "nav" \| "noscript" \| "ol" \| "optgroup" \| "option" \| "output" \| "p" \| "param" \| "picture" \| "pre" \| "progress" \| "q" \| "rp" \| "rt" \| "ruby" \| "s" \| "samp" \| "script" \| "section" \| "select" \| "small" \| "source" \| "span" \| "strong" \| "style" \| "sub" \| "summary" \| "sup" \| "table" \| "tbody" \| "td" \| "textarea" \| "tfoot" \| "th" \| "thead" \| "time" \| "title" \| "tr" \| "track" \| "u" \| "ul" \| "var" \| "video" \| "wbr" ? StencilIntrinsicElements[T] : { [key: string]: any; } \| null \| undefined` | Any properties of the component. | +| `opts` | `NavOptions \| null \| undefined` | The navigation options. | +| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | The transition complete function. | #### Returns diff --git a/core/src/components/nav/test/nav-controller.spec.ts b/core/src/components/nav/test/nav-controller.spec.ts index 427d113a44e..f312592a92b 100644 --- a/core/src/components/nav/test/nav-controller.spec.ts +++ b/core/src/components/nav/test/nav-controller.spec.ts @@ -945,7 +945,6 @@ describe('NavController', () => { navI.config = new Config({ animated: false }); navI._viewInit = (enteringView: ViewController) => { if (!enteringView.element) { - console.log(enteringView.component); enteringView.element = (typeof enteringView.component === 'string') ? win.document.createElement(enteringView.component) : enteringView.element = enteringView.component as HTMLElement; diff --git a/core/src/components/picker-controller/picker-controller.tsx b/core/src/components/picker-controller/picker-controller.tsx index 0acc56ccf75..d71b647af33 100644 --- a/core/src/components/picker-controller/picker-controller.tsx +++ b/core/src/components/picker-controller/picker-controller.tsx @@ -12,14 +12,23 @@ export class PickerController implements ComponentInterface, OverlayController { /** * Create a picker overlay with picker options. + * + * @param options The options to use to create the picker. */ @Method() - create(opts: PickerOptions): Promise { - return createOverlay(this.doc.createElement('ion-picker'), opts); + create(options: PickerOptions): Promise { + return createOverlay(this.doc.createElement('ion-picker'), options); } /** * Dismiss the open picker overlay. + * + * @param data Any data to emit in the dismiss events. + * @param role The role of the element that is dismissing the picker. + * This can be useful in a button handler for determining which button was + * clicked to dismiss the picker. + * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. + * @param id The id of the picker to dismiss. If an id is not provided, it will dismiss the most recently opened picker. */ @Method() dismiss(data?: any, role?: string, id?: string) { diff --git a/core/src/components/picker-controller/readme.md b/core/src/components/picker-controller/readme.md index 175e9cf5392..4761240631b 100644 --- a/core/src/components/picker-controller/readme.md +++ b/core/src/components/picker-controller/readme.md @@ -7,15 +7,15 @@ ## Methods -### `create(opts: PickerOptions) => Promise` +### `create(options: PickerOptions) => Promise` Create a picker overlay with picker options. #### Parameters -| Name | Type | Description | -| ------ | --------------- | ----------- | -| `opts` | `PickerOptions` | | +| Name | Type | Description | +| --------- | --------------- | ---------------------------------------- | +| `options` | `PickerOptions` | The options to use to create the picker. | #### Returns @@ -29,11 +29,11 @@ Dismiss the open picker overlay. #### Parameters -| Name | Type | Description | -| ------ | --------------------- | ----------- | -| `data` | `any` | | -| `role` | `string \| undefined` | | -| `id` | `string \| undefined` | | +| Name | Type | Description | +| ------ | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `data` | `any` | Any data to emit in the dismiss events. | +| `role` | `string \| undefined` | The role of the element that is dismissing the picker. This can be useful in a button handler for determining which button was clicked to dismiss the picker. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. | +| `id` | `string \| undefined` | The id of the picker to dismiss. If an id is not provided, it will dismiss the most recently opened picker. | #### Returns diff --git a/core/src/components/picker/picker.tsx b/core/src/components/picker/picker.tsx index 510a82013f5..9bc848bc779 100644 --- a/core/src/components/picker/picker.tsx +++ b/core/src/components/picker/picker.tsx @@ -129,6 +129,12 @@ export class Picker implements ComponentInterface, OverlayInterface { /** * Dismiss the picker overlay after it has been presented. + * + * @param data Any data to emit in the dismiss events. + * @param role The role of the element that is dismissing the picker. + * This can be useful in a button handler for determining which button was + * clicked to dismiss the picker. + * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. */ @Method() dismiss(data?: any, role?: string): Promise { @@ -155,7 +161,9 @@ export class Picker implements ComponentInterface, OverlayInterface { } /** - * Returns the column the matches the specified name + * Get the column that matches the specified name. + * + * @param name The name of the column. */ @Method() getColumn(name: string): Promise { diff --git a/core/src/components/picker/readme.md b/core/src/components/picker/readme.md index b3a1ef9e12a..f5f397a2927 100644 --- a/core/src/components/picker/readme.md +++ b/core/src/components/picker/readme.md @@ -42,10 +42,10 @@ Dismiss the picker overlay after it has been presented. #### Parameters -| Name | Type | Description | -| ------ | --------------------- | ----------- | -| `data` | `any` | | -| `role` | `string \| undefined` | | +| Name | Type | Description | +| ------ | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `data` | `any` | Any data to emit in the dismiss events. | +| `role` | `string \| undefined` | The role of the element that is dismissing the picker. This can be useful in a button handler for determining which button was clicked to dismiss the picker. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. | #### Returns @@ -55,13 +55,13 @@ Type: `Promise` ### `getColumn(name: string) => Promise` -Returns the column the matches the specified name +Get the column that matches the specified name. #### Parameters -| Name | Type | Description | -| ------ | -------- | ----------- | -| `name` | `string` | | +| Name | Type | Description | +| ------ | -------- | ----------------------- | +| `name` | `string` | The name of the column. | #### Returns diff --git a/core/src/components/popover-controller/popover-controller.tsx b/core/src/components/popover-controller/popover-controller.tsx index 58bf78f0866..f0b2e963c1d 100644 --- a/core/src/components/popover-controller/popover-controller.tsx +++ b/core/src/components/popover-controller/popover-controller.tsx @@ -12,14 +12,23 @@ export class PopoverController implements ComponentInterface, OverlayController /** * Create a popover overlay with popover options. + * + * @param options The options to use to create the popover. */ @Method() - create(opts: PopoverOptions): Promise { - return createOverlay(this.doc.createElement('ion-popover'), opts); + create(options: PopoverOptions): Promise { + return createOverlay(this.doc.createElement('ion-popover'), options); } /** * Dismiss the open popover overlay. + * + * @param data Any data to emit in the dismiss events. + * @param role The role of the element that is dismissing the popover. + * This can be useful in a button handler for determining which button was + * clicked to dismiss the popover. + * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. + * @param id The id of the popover to dismiss. If an id is not provided, it will dismiss the most recently opened popover. */ @Method() dismiss(data?: any, role?: string, id?: string) { diff --git a/core/src/components/popover-controller/readme.md b/core/src/components/popover-controller/readme.md index e39f36f241a..bf0ac1ffc3f 100644 --- a/core/src/components/popover-controller/readme.md +++ b/core/src/components/popover-controller/readme.md @@ -27,15 +27,15 @@ async function presentPopover() { ## Methods -### `create(opts: PopoverOptions) => Promise` +### `create(options: PopoverOptions) => Promise` Create a popover overlay with popover options. #### Parameters -| Name | Type | Description | -| ------ | ------------------- | ----------- | -| `opts` | `PopoverOptions` | | +| Name | Type | Description | +| --------- | ------------------- | ----------------------------------------- | +| `options` | `PopoverOptions` | The options to use to create the popover. | #### Returns @@ -49,11 +49,11 @@ Dismiss the open popover overlay. #### Parameters -| Name | Type | Description | -| ------ | --------------------- | ----------- | -| `data` | `any` | | -| `role` | `string \| undefined` | | -| `id` | `string \| undefined` | | +| Name | Type | Description | +| ------ | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `data` | `any` | Any data to emit in the dismiss events. | +| `role` | `string \| undefined` | The role of the element that is dismissing the popover. This can be useful in a button handler for determining which button was clicked to dismiss the popover. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. | +| `id` | `string \| undefined` | The id of the popover to dismiss. If an id is not provided, it will dismiss the most recently opened popover. | #### Returns diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx index e9e354a905c..7394d50c58f 100644 --- a/core/src/components/popover/popover.tsx +++ b/core/src/components/popover/popover.tsx @@ -170,6 +170,9 @@ export class Popover implements ComponentInterface, OverlayInterface { /** * Dismiss the popover overlay after it has been presented. + * + * @param data Any data to emit in the dismiss events. + * @param role The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'. */ @Method() async dismiss(data?: any, role?: string): Promise { diff --git a/core/src/components/popover/readme.md b/core/src/components/popover/readme.md index b95afa374ca..4c14907ea5f 100644 --- a/core/src/components/popover/readme.md +++ b/core/src/components/popover/readme.md @@ -131,10 +131,10 @@ Dismiss the popover overlay after it has been presented. #### Parameters -| Name | Type | Description | -| ------ | --------------------- | ----------- | -| `data` | `any` | | -| `role` | `string \| undefined` | | +| Name | Type | Description | +| ------ | --------------------- | -------------------------------------------------------------------------------------------- | +| `data` | `any` | Any data to emit in the dismiss events. | +| `role` | `string \| undefined` | The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'. | #### Returns diff --git a/core/src/components/ripple-effect/readme.md b/core/src/components/ripple-effect/readme.md index 1ef5e31ac1e..213131b0019 100644 --- a/core/src/components/ripple-effect/readme.md +++ b/core/src/components/ripple-effect/readme.md @@ -33,16 +33,16 @@ The ripple effect component adds the [Material Design ink ripple interaction eff ## Methods -### `addRipple(pageX: number, pageY: number) => Promise<() => void>` +### `addRipple(x: number, y: number) => Promise<() => void>` -Adds the ripple effect to the parent element +Adds the ripple effect to the parent element. #### Parameters -| Name | Type | Description | -| ------- | -------- | ----------- | -| `pageX` | `number` | | -| `pageY` | `number` | | +| Name | Type | Description | +| ---- | -------- | ----------------------------------------------------------- | +| `x` | `number` | The horizontal coordinate of where the ripple should start. | +| `y` | `number` | The vertical coordinate of where the ripple should start. | #### Returns diff --git a/core/src/components/ripple-effect/ripple-effect.tsx b/core/src/components/ripple-effect/ripple-effect.tsx index 066967c45b9..9806ab909f9 100644 --- a/core/src/components/ripple-effect/ripple-effect.tsx +++ b/core/src/components/ripple-effect/ripple-effect.tsx @@ -27,10 +27,13 @@ export class RippleEffect implements ComponentInterface { @Prop() type: 'bounded' | 'unbounded' = 'bounded'; /** - * Adds the ripple effect to the parent element + * Adds the ripple effect to the parent element. + * + * @param x The horizontal coordinate of where the ripple should start. + * @param y The vertical coordinate of where the ripple should start. */ @Method() - async addRipple(pageX: number, pageY: number) { + async addRipple(x: number, y: number) { return new Promise<() => void>(resolve => { this.queue.read(() => { const rect = this.el.getBoundingClientRect(); @@ -41,14 +44,14 @@ export class RippleEffect implements ComponentInterface { const maxRadius = this.unbounded ? maxDim : hypotenuse + PADDING; const initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE); const finalScale = maxRadius / initialSize; - let posX = pageX - rect.left; - let posY = pageY - rect.top; + let posX = x - rect.left; + let posY = y - rect.top; if (this.unbounded) { posX = width * 0.5; posY = height * 0.5; } - const x = posX - initialSize * 0.5; - const y = posY - initialSize * 0.5; + const styleX = posX - initialSize * 0.5; + const styleY = posY - initialSize * 0.5; const moveX = width * 0.5 - posX; const moveY = height * 0.5 - posY; @@ -56,8 +59,8 @@ export class RippleEffect implements ComponentInterface { const div = this.win.document.createElement('div'); div.classList.add('ripple-effect'); const style = div.style; - style.top = y + 'px'; - style.left = x + 'px'; + style.top = styleY + 'px'; + style.left = styleX + 'px'; style.width = style.height = initialSize + 'px'; style.setProperty('--final-scale', `${finalScale}`); style.setProperty('--translate-end', `${moveX}px, ${moveY}px`); diff --git a/core/src/components/router/readme.md b/core/src/components/router/readme.md index 1e4d7cae91d..129a974fdae 100644 --- a/core/src/components/router/readme.md +++ b/core/src/components/router/readme.md @@ -85,10 +85,10 @@ Navigate to the specified URL. #### Parameters -| Name | Type | Description | -| ----------- | ------------------------------- | ----------- | -| `url` | `string` | | -| `direction` | `"back" \| "forward" \| "root"` | | +| Name | Type | Description | +| ----------- | ------------------------------- | -------------------------------------------------------- | +| `url` | `string` | The url to navigate to. | +| `direction` | `"back" \| "forward" \| "root"` | The direction of the animation. Defaults to `"forward"`. | #### Returns diff --git a/core/src/components/router/router.tsx b/core/src/components/router/router.tsx index c28fada1fd6..454c7a38f63 100644 --- a/core/src/components/router/router.tsx +++ b/core/src/components/router/router.tsx @@ -88,6 +88,9 @@ export class Router implements ComponentInterface { /** * Navigate to the specified URL. + * + * @param url The url to navigate to. + * @param direction The direction of the animation. Defaults to `"forward"`. */ @Method() push(url: string, direction: RouterDirection = 'forward') { diff --git a/core/src/components/select/readme.md b/core/src/components/select/readme.md index a643304915d..b89e2a8f1b2 100644 --- a/core/src/components/select/readme.md +++ b/core/src/components/select/readme.md @@ -766,16 +766,16 @@ export default Example; ## Methods -### `open(ev?: UIEvent | undefined) => Promise` +### `open(event?: UIEvent | undefined) => Promise` -Opens the select overlay, it could be an alert, action-sheet or popover, -based in `ion-select` settings. +Open the select overlay. The overlay is either an alert, action sheet, or popover, +depending on the `interface` property on the `ion-select`. #### Parameters -| Name | Type | Description | -| ---- | ---------------------- | ----------- | -| `ev` | `UIEvent \| undefined` | | +| Name | Type | Description | +| ------- | ---------------------- | ---------------------------------------------- | +| `event` | `UIEvent \| undefined` | The user interface event that called the open. | #### Returns diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx index 4f42c5adfe4..d9783a6135a 100644 --- a/core/src/components/select/select.tsx +++ b/core/src/components/select/select.tsx @@ -189,15 +189,17 @@ export class Select implements ComponentInterface { } /** - * Opens the select overlay, it could be an alert, action-sheet or popover, - * based in `ion-select` settings. + * Open the select overlay. The overlay is either an alert, action sheet, or popover, + * depending on the `interface` property on the `ion-select`. + * + * @param event The user interface event that called the open. */ @Method() - async open(ev?: UIEvent): Promise { + async open(event?: UIEvent): Promise { if (this.disabled || this.isExpanded) { return undefined; } - const overlay = this.overlay = await this.createOverlay(ev); + const overlay = this.overlay = await this.createOverlay(event); this.isExpanded = true; overlay.onDidDismiss().then(() => { this.overlay = undefined; diff --git a/core/src/components/slides/readme.md b/core/src/components/slides/readme.md index 6ee310197ab..bd64cc64e7f 100644 --- a/core/src/components/slides/readme.md +++ b/core/src/components/slides/readme.md @@ -645,15 +645,15 @@ Type: `Promise` -### `lockSwipeToNext(shouldLockSwipeToNext: boolean) => Promise` +### `lockSwipeToNext(lock: boolean) => Promise` -Lock or unlock the ability to slide to the next slides. +Lock or unlock the ability to slide to the next slide. #### Parameters -| Name | Type | Description | -| ----------------------- | --------- | ----------- | -| `shouldLockSwipeToNext` | `boolean` | | +| Name | Type | Description | +| ------ | --------- | --------------------------------------------- | +| `lock` | `boolean` | If `true`, disable swiping to the next slide. | #### Returns @@ -661,15 +661,15 @@ Type: `Promise` -### `lockSwipeToPrev(shouldLockSwipeToPrev: boolean) => Promise` +### `lockSwipeToPrev(lock: boolean) => Promise` -Lock or unlock the ability to slide to the previous slides. +Lock or unlock the ability to slide to the previous slide. #### Parameters -| Name | Type | Description | -| ----------------------- | --------- | ----------- | -| `shouldLockSwipeToPrev` | `boolean` | | +| Name | Type | Description | +| ------ | --------- | ------------------------------------------------- | +| `lock` | `boolean` | If `true`, disable swiping to the previous slide. | #### Returns @@ -677,15 +677,15 @@ Type: `Promise` -### `lockSwipes(shouldLockSwipes: boolean) => Promise` +### `lockSwipes(lock: boolean) => Promise` -Lock or unlock the ability to slide to change slides. +Lock or unlock the ability to slide to the next or previous slide. #### Parameters -| Name | Type | Description | -| ------------------ | --------- | ----------- | -| `shouldLockSwipes` | `boolean` | | +| Name | Type | Description | +| ------ | --------- | ---------------------------------------------------------- | +| `lock` | `boolean` | If `true`, disable swiping to the next and previous slide. | #### Returns @@ -699,10 +699,10 @@ Transition to the next slide. #### Parameters -| Name | Type | Description | -| -------------- | ---------------------- | ----------- | -| `speed` | `number \| undefined` | | -| `runCallbacks` | `boolean \| undefined` | | +| Name | Type | Description | +| -------------- | ---------------------- | ------------------------------------------------------------------------------------------- | +| `speed` | `number \| undefined` | The transition duration (in ms). | +| `runCallbacks` | `boolean \| undefined` | If true, the transition will produce [Transition/SlideChange][Start/End] transition events. | #### Returns @@ -716,10 +716,10 @@ Transition to the previous slide. #### Parameters -| Name | Type | Description | -| -------------- | ---------------------- | ----------- | -| `speed` | `number \| undefined` | | -| `runCallbacks` | `boolean \| undefined` | | +| Name | Type | Description | +| -------------- | ---------------------- | ----------------------------------------------------------------------------------------------- | +| `speed` | `number \| undefined` | The transition duration (in ms). | +| `runCallbacks` | `boolean \| undefined` | If true, the transition will produce the [Transition/SlideChange][Start/End] transition events. | #### Returns @@ -733,11 +733,11 @@ Transition to the specified slide. #### Parameters -| Name | Type | Description | -| -------------- | ---------------------- | ----------- | -| `index` | `number` | | -| `speed` | `number \| undefined` | | -| `runCallbacks` | `boolean \| undefined` | | +| Name | Type | Description | +| -------------- | ---------------------- | ------------------------------------------------------------------------------------------- | +| `index` | `number` | The index of the slide to transition to. | +| `speed` | `number \| undefined` | The transition duration (in ms). | +| `runCallbacks` | `boolean \| undefined` | If true, the transition will produce [Transition/SlideChange][Start/End] transition events. | #### Returns @@ -778,13 +778,14 @@ Type: `Promise` ### `updateAutoHeight(speed?: number | undefined) => Promise` -Force swiper to update its height (when autoHeight enabled) for the duration equal to 'speed' parameter +Force swiper to update its height (when autoHeight is enabled) for the duration +equal to 'speed' parameter. #### Parameters -| Name | Type | Description | -| ------- | --------------------- | ----------- | -| `speed` | `number \| undefined` | | +| Name | Type | Description | +| ------- | --------------------- | -------------------------------- | +| `speed` | `number \| undefined` | The transition duration (in ms). | #### Returns diff --git a/core/src/components/slides/slides.tsx b/core/src/components/slides/slides.tsx index 097539c780a..0255cfa85fa 100644 --- a/core/src/components/slides/slides.tsx +++ b/core/src/components/slides/slides.tsx @@ -161,7 +161,10 @@ export class Slides implements ComponentInterface { } /** - * Force swiper to update its height (when autoHeight enabled) for the duration equal to 'speed' parameter + * Force swiper to update its height (when autoHeight is enabled) for the duration + * equal to 'speed' parameter. + * + * @param speed The transition duration (in ms). */ @Method() async updateAutoHeight(speed?: number) { @@ -171,6 +174,10 @@ export class Slides implements ComponentInterface { /** * Transition to the specified slide. + * + * @param index The index of the slide to transition to. + * @param speed The transition duration (in ms). + * @param runCallbacks If true, the transition will produce [Transition/SlideChange][Start/End] transition events. */ @Method() async slideTo(index: number, speed?: number, runCallbacks?: boolean) { @@ -180,6 +187,9 @@ export class Slides implements ComponentInterface { /** * Transition to the next slide. + * + * @param speed The transition duration (in ms). + * @param runCallbacks If true, the transition will produce [Transition/SlideChange][Start/End] transition events. */ @Method() async slideNext(speed?: number, runCallbacks?: boolean) { @@ -189,6 +199,9 @@ export class Slides implements ComponentInterface { /** * Transition to the previous slide. + * + * @param speed The transition duration (in ms). + * @param runCallbacks If true, the transition will produce the [Transition/SlideChange][Start/End] transition events. */ @Method() async slidePrev(speed?: number, runCallbacks?: boolean) { @@ -225,7 +238,6 @@ export class Slides implements ComponentInterface { /** * Get whether or not the current slide is the last slide. - * */ @Method() async isEnd(): Promise { @@ -265,32 +277,38 @@ export class Slides implements ComponentInterface { } /** - * Lock or unlock the ability to slide to the next slides. + * Lock or unlock the ability to slide to the next slide. + * + * @param lock If `true`, disable swiping to the next slide. */ @Method() - async lockSwipeToNext(shouldLockSwipeToNext: boolean) { + async lockSwipeToNext(lock: boolean) { const swiper = await this.getSwiper(); - swiper.allowSlideNext = !shouldLockSwipeToNext; + swiper.allowSlideNext = !lock; } /** - * Lock or unlock the ability to slide to the previous slides. + * Lock or unlock the ability to slide to the previous slide. + * + * @param lock If `true`, disable swiping to the previous slide. */ @Method() - async lockSwipeToPrev(shouldLockSwipeToPrev: boolean) { + async lockSwipeToPrev(lock: boolean) { const swiper = await this.getSwiper(); - swiper.allowSlidePrev = !shouldLockSwipeToPrev; + swiper.allowSlidePrev = !lock; } /** - * Lock or unlock the ability to slide to change slides. + * Lock or unlock the ability to slide to the next or previous slide. + * + * @param lock If `true`, disable swiping to the next and previous slide. */ @Method() - async lockSwipes(shouldLockSwipes: boolean) { + async lockSwipes(lock: boolean) { const swiper = await this.getSwiper(); - swiper.allowSlideNext = !shouldLockSwipes; - swiper.allowSlidePrev = !shouldLockSwipes; - swiper.allowTouchMove = !shouldLockSwipes; + swiper.allowSlideNext = !lock; + swiper.allowSlidePrev = !lock; + swiper.allowTouchMove = !lock; } private async initSwiper() { diff --git a/core/src/components/split-pane/readme.md b/core/src/components/split-pane/readme.md index 31aea0d5eb5..ac9f1fb25b0 100644 --- a/core/src/components/split-pane/readme.md +++ b/core/src/components/split-pane/readme.md @@ -134,11 +134,11 @@ export default Example; ## Properties -| Property | Attribute | Description | Type | Default | -| ----------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ------------- | -| `contentId` | `content-id` | The content `id` of the split-pane's main content. This property can be used instead of the `[main]` attribute to select the `main` content of the split-pane. ```html * * *
* * ``` | `string \| undefined` | `undefined` | -| `disabled` | `disabled` | If `true`, the split pane will be hidden. | `boolean` | `false` | -| `when` | `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. | `boolean \| string` | `QUERY['lg']` | +| Property | Attribute | Description | Type | Default | +| ----------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ------------- | +| `contentId` | `content-id` | The content `id` of the split-pane's main content. This property can be used instead of the `[main]` attribute to select the `main` content of the split-pane. | `string \| undefined` | `undefined` | +| `disabled` | `disabled` | If `true`, the split pane will be hidden. | `boolean` | `false` | +| `when` | `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. | `boolean \| string` | `QUERY['lg']` | ## Events diff --git a/core/src/components/split-pane/split-pane.tsx b/core/src/components/split-pane/split-pane.tsx index 841f41daff8..6f9f4c6bfba 100644 --- a/core/src/components/split-pane/split-pane.tsx +++ b/core/src/components/split-pane/split-pane.tsx @@ -36,14 +36,6 @@ export class SplitPane implements ComponentInterface { * The content `id` of the split-pane's main content. * This property can be used instead of the `[main]` attribute to select the `main` * content of the split-pane. - * - * ```html - * - * - *
- * - * ``` - * */ @Prop() contentId?: string; diff --git a/core/src/components/tabs/readme.md b/core/src/components/tabs/readme.md index ef001352dde..017f2d6cf8a 100644 --- a/core/src/components/tabs/readme.md +++ b/core/src/components/tabs/readme.md @@ -273,7 +273,7 @@ export default Example; ### `getSelected() => Promise` -Get the currently selected tab +Get the currently selected tab. #### Returns @@ -283,13 +283,13 @@ Type: `Promise` ### `getTab(tab: string | HTMLIonTabElement) => Promise` -Get the tab element given the tab name +Get a specific tab by the value of its `tab` property or an element reference. #### Parameters -| Name | Type | Description | -| ----- | ----------------------------- | ----------- | -| `tab` | `HTMLIonTabElement \| string` | | +| Name | Type | Description | +| ----- | ----------------------------- | --------------------------------------------------------------------------------------------------- | +| `tab` | `HTMLIonTabElement \| string` | The tab instance to select. If passed a string, it should be the value of the tab's `tab` property. | #### Returns @@ -299,13 +299,13 @@ Type: `Promise` ### `select(tab: string | HTMLIonTabElement) => Promise` -Index or the Tab instance, of the tab to select. +Select a tab by the value of its `tab` property or an element reference. #### Parameters -| Name | Type | Description | -| ----- | ----------------------------- | ----------- | -| `tab` | `HTMLIonTabElement \| string` | | +| Name | Type | Description | +| ----- | ----------------------------- | --------------------------------------------------------------------------------------------------- | +| `tab` | `HTMLIonTabElement \| string` | The tab instance to select. If passed a string, it should be the value of the tab's `tab` property. | #### Returns diff --git a/core/src/components/tabs/tabs.tsx b/core/src/components/tabs/tabs.tsx index 3ba5c581bd7..ca144a762b4 100644 --- a/core/src/components/tabs/tabs.tsx +++ b/core/src/components/tabs/tabs.tsx @@ -85,7 +85,9 @@ export class Tabs implements NavOutlet { } /** - * Index or the Tab instance, of the tab to select. + * Select a tab by the value of its `tab` property or an element reference. + * + * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property. */ @Method() async select(tab: string | HTMLIonTabElement): Promise { @@ -101,7 +103,9 @@ export class Tabs implements NavOutlet { } /** - * Get the tab element given the tab name + * Get a specific tab by the value of its `tab` property or an element reference. + * + * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property. */ @Method() async getTab(tab: string | HTMLIonTabElement): Promise { @@ -116,7 +120,7 @@ export class Tabs implements NavOutlet { } /** - * Get the currently selected tab + * Get the currently selected tab. */ @Method() getSelected(): Promise { diff --git a/core/src/components/toast-controller/readme.md b/core/src/components/toast-controller/readme.md index 6a643c71370..aa00bec9dcf 100644 --- a/core/src/components/toast-controller/readme.md +++ b/core/src/components/toast-controller/readme.md @@ -8,15 +8,15 @@ ToastController is a component use to create Toast components. Please see the do ## Methods -### `create(opts?: ToastOptions | undefined) => Promise` +### `create(options?: ToastOptions | undefined) => Promise` Create a toast overlay with toast options. #### Parameters -| Name | Type | Description | -| ------ | --------------------------- | ----------- | -| `opts` | `ToastOptions \| undefined` | | +| Name | Type | Description | +| --------- | --------------------------- | --------------------------------------- | +| `options` | `ToastOptions \| undefined` | The options to use to create the toast. | #### Returns @@ -30,11 +30,11 @@ Dismiss the open toast overlay. #### Parameters -| Name | Type | Description | -| ------ | --------------------- | ----------- | -| `data` | `any` | | -| `role` | `string \| undefined` | | -| `id` | `string \| undefined` | | +| Name | Type | Description | +| ------ | --------------------- | --------------------------------------------------------------------------------------------------------- | +| `data` | `any` | Any data to emit in the dismiss events. | +| `role` | `string \| undefined` | The role of the element that is dismissing the toast. For example, 'cancel' or 'backdrop'. | +| `id` | `string \| undefined` | The id of the toast to dismiss. If an id is not provided, it will dismiss the most recently opened toast. | #### Returns diff --git a/core/src/components/toast-controller/toast-controller.tsx b/core/src/components/toast-controller/toast-controller.tsx index 2f4458c9232..ec00e695459 100644 --- a/core/src/components/toast-controller/toast-controller.tsx +++ b/core/src/components/toast-controller/toast-controller.tsx @@ -12,14 +12,20 @@ export class ToastController implements ComponentInterface, OverlayController { /** * Create a toast overlay with toast options. + * + * @param options The options to use to create the toast. */ @Method() - create(opts?: ToastOptions): Promise { - return createOverlay(this.doc.createElement('ion-toast'), opts); + create(options?: ToastOptions): Promise { + return createOverlay(this.doc.createElement('ion-toast'), options); } /** * Dismiss the open toast overlay. + * + * @param data Any data to emit in the dismiss events. + * @param role The role of the element that is dismissing the toast. For example, 'cancel' or 'backdrop'. + * @param id The id of the toast to dismiss. If an id is not provided, it will dismiss the most recently opened toast. */ @Method() dismiss(data?: any, role?: string, id?: string) { diff --git a/core/src/components/toast/readme.md b/core/src/components/toast/readme.md index 5347884a749..8d1ca36f520 100644 --- a/core/src/components/toast/readme.md +++ b/core/src/components/toast/readme.md @@ -216,10 +216,10 @@ Dismiss the toast overlay after it has been presented. #### Parameters -| Name | Type | Description | -| ------ | --------------------- | ----------- | -| `data` | `any` | | -| `role` | `string \| undefined` | | +| Name | Type | Description | +| ------ | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `data` | `any` | Any data to emit in the dismiss events. | +| `role` | `string \| undefined` | The role of the element that is dismissing the toast. This can be useful in a button handler for determining which button was clicked to dismiss the toast. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. | #### Returns diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx index 3a160d4f6fa..b6029b409b9 100644 --- a/core/src/components/toast/toast.tsx +++ b/core/src/components/toast/toast.tsx @@ -147,6 +147,12 @@ export class Toast implements ComponentInterface, OverlayInterface { /** * Dismiss the toast overlay after it has been presented. + * + * @param data Any data to emit in the dismiss events. + * @param role The role of the element that is dismissing the toast. + * This can be useful in a button handler for determining which button was + * clicked to dismiss the toast. + * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. */ @Method() dismiss(data?: any, role?: string): Promise { diff --git a/core/src/components/virtual-scroll/readme.md b/core/src/components/virtual-scroll/readme.md index 679cdb942d2..4250d0ae9b8 100644 --- a/core/src/components/virtual-scroll/readme.md +++ b/core/src/components/virtual-scroll/readme.md @@ -343,13 +343,9 @@ export default Example; ### `checkEnd() => void` -This method marks the tail the items array as dirty, so they can be re-rendered. - -It's equivalent to calling: - -```js - * virtualScroll.checkRange(lastItemLen); - * ``` +Marks the tail of the items array as dirty, so they can be re-rendered. +It's equivalent to calling `checkRange(length)` where `length` is the +total length of the items. #### Returns @@ -357,19 +353,21 @@ Type: `void` -### `checkRange(offset: number, len?: number) => void` +### `checkRange(offset: number, length?: 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. +Marks a subset of the 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. +The subset of items to be updated are specified by an offset and a length. +If a length is not provided it will check all of the items beginning at +the offset. #### Parameters -| Name | Type | Description | -| -------- | -------- | ----------- | -| `offset` | `number` | | -| `len` | `number` | | +| Name | Type | Description | +| -------- | -------- | --------------------------------------------- | +| `offset` | `number` | The index of the item to start marking dirty. | +| `length` | `number` | The number of items to mark dirty. | #### Returns @@ -383,9 +381,9 @@ Returns the position of the virtual item at the given index. #### Parameters -| Name | Type | Description | -| ------- | -------- | ----------- | -| `index` | `number` | | +| Name | Type | Description | +| ------- | -------- | ---------------------- | +| `index` | `number` | The index of the item. | #### Returns diff --git a/core/src/components/virtual-scroll/virtual-scroll.tsx b/core/src/components/virtual-scroll/virtual-scroll.tsx index e8b07adfd38..9d8c462256c 100644 --- a/core/src/components/virtual-scroll/virtual-scroll.tsx +++ b/core/src/components/virtual-scroll/virtual-scroll.tsx @@ -177,6 +177,8 @@ export class VirtualScroll implements ComponentInterface { /** * Returns the position of the virtual item at the given index. + * + * @param index The index of the item. */ @Method() positionForItem(index: number): Promise { @@ -184,21 +186,26 @@ export class VirtualScroll implements ComponentInterface { } /** - * 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. + * Marks a subset of the 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 are specified by an offset and a length. + * If a length is not provided it will check all of the items beginning at + * the offset. * - * The subset of items to be updated can are specifing by an offset and a length. + * @param offset The index of the item to start marking dirty. + * @param length The number of items to mark dirty. */ @Method() - checkRange(offset: number, len = -1) { + checkRange(offset: number, length = -1) { // TODO: kind of hacky how we do in-place updated of the cells // array. this part needs a complete refactor if (!this.items) { return; } - const length = (len === -1) + const len = (length === -1) ? this.items.length - offset - : len; + : length; const cellIndex = findCellIndex(this.cells, offset); const cells = calcCells( @@ -209,7 +216,7 @@ export class VirtualScroll implements ComponentInterface { this.approxHeaderHeight, this.approxFooterHeight, this.approxItemHeight, - cellIndex, offset, length + cellIndex, offset, len ); console.debug('[virtual] cells recalculated', cells.length); this.cells = inplaceUpdate(this.cells, cells, cellIndex); @@ -220,13 +227,9 @@ export class VirtualScroll implements ComponentInterface { } /** - * This method marks the tail the items array as dirty, so they can be re-rendered. - * - * It's equivalent to calling: - * - * ```js - * virtualScroll.checkRange(lastItemLen); - * ``` + * Marks the tail of the items array as dirty, so they can be re-rendered. + * It's equivalent to calling `checkRange(length)` where `length` is the + * total length of the items. */ @Method() checkEnd() {