mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 13:32:54 +08:00
refactor(): remove deprecated controllers (#20165)
* remove action-sheet-controller and alert-controller * rmeove loading controller * remove popover controller * remove toast controller * remove picker-controller * remove modal controller * remove menu controller * update menu ctrl in tests * run linter * remove window refs * Update core/src/components/loading/test/standalone/index.html Co-Authored-By: Brandy Carney <brandyscarney@users.noreply.github.com> * remove window from modal tests * test * testing timeout * change timeout Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
This commit is contained in:
Liam DeBeasi
49
core/api.txt
49
core/api.txt
@ -31,11 +31,6 @@ ion-action-sheet,css-prop,--min-height
|
|||||||
ion-action-sheet,css-prop,--min-width
|
ion-action-sheet,css-prop,--min-width
|
||||||
ion-action-sheet,css-prop,--width
|
ion-action-sheet,css-prop,--width
|
||||||
|
|
||||||
ion-action-sheet-controller,none
|
|
||||||
ion-action-sheet-controller,method,create,create(options: ActionSheetOptions) => Promise<HTMLIonActionSheetElement>
|
|
||||||
ion-action-sheet-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
|
|
||||||
ion-action-sheet-controller,method,getTop,getTop() => Promise<HTMLIonActionSheetElement | undefined>
|
|
||||||
|
|
||||||
ion-alert,scoped
|
ion-alert,scoped
|
||||||
ion-alert,prop,animated,boolean,true,false,false
|
ion-alert,prop,animated,boolean,true,false,false
|
||||||
ion-alert,prop,backdropDismiss,boolean,true,false,false
|
ion-alert,prop,backdropDismiss,boolean,true,false,false
|
||||||
@ -67,11 +62,6 @@ ion-alert,css-prop,--min-height
|
|||||||
ion-alert,css-prop,--min-width
|
ion-alert,css-prop,--min-width
|
||||||
ion-alert,css-prop,--width
|
ion-alert,css-prop,--width
|
||||||
|
|
||||||
ion-alert-controller,none
|
|
||||||
ion-alert-controller,method,create,create(options: AlertOptions) => Promise<HTMLIonAlertElement>
|
|
||||||
ion-alert-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
|
|
||||||
ion-alert-controller,method,getTop,getTop() => Promise<HTMLIonAlertElement | undefined>
|
|
||||||
|
|
||||||
ion-app,none
|
ion-app,none
|
||||||
|
|
||||||
ion-avatar,shadow
|
ion-avatar,shadow
|
||||||
@ -608,11 +598,6 @@ ion-loading,css-prop,--min-width
|
|||||||
ion-loading,css-prop,--spinner-color
|
ion-loading,css-prop,--spinner-color
|
||||||
ion-loading,css-prop,--width
|
ion-loading,css-prop,--width
|
||||||
|
|
||||||
ion-loading-controller,none
|
|
||||||
ion-loading-controller,method,create,create(options?: LoadingOptions | undefined) => Promise<HTMLIonLoadingElement>
|
|
||||||
ion-loading-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
|
|
||||||
ion-loading-controller,method,getTop,getTop() => Promise<HTMLIonLoadingElement | undefined>
|
|
||||||
|
|
||||||
ion-menu,shadow
|
ion-menu,shadow
|
||||||
ion-menu,prop,contentId,string | undefined,undefined,false,true
|
ion-menu,prop,contentId,string | undefined,undefined,false,true
|
||||||
ion-menu,prop,disabled,boolean,false,false,false
|
ion-menu,prop,disabled,boolean,false,false,false
|
||||||
@ -657,20 +642,6 @@ ion-menu-button,css-prop,--padding-end
|
|||||||
ion-menu-button,css-prop,--padding-start
|
ion-menu-button,css-prop,--padding-start
|
||||||
ion-menu-button,css-prop,--padding-top
|
ion-menu-button,css-prop,--padding-top
|
||||||
|
|
||||||
ion-menu-controller,none
|
|
||||||
ion-menu-controller,method,close,close(menu?: string | null | undefined) => Promise<boolean>
|
|
||||||
ion-menu-controller,method,enable,enable(enable: boolean, menu?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>
|
|
||||||
ion-menu-controller,method,get,get(menu?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>
|
|
||||||
ion-menu-controller,method,getMenus,getMenus() => Promise<HTMLIonMenuElement[]>
|
|
||||||
ion-menu-controller,method,getOpen,getOpen() => Promise<HTMLIonMenuElement | undefined>
|
|
||||||
ion-menu-controller,method,isAnimating,isAnimating() => Promise<boolean>
|
|
||||||
ion-menu-controller,method,isEnabled,isEnabled(menu?: string | null | undefined) => Promise<boolean>
|
|
||||||
ion-menu-controller,method,isOpen,isOpen(menu?: string | null | undefined) => Promise<boolean>
|
|
||||||
ion-menu-controller,method,open,open(menu?: string | null | undefined) => Promise<boolean>
|
|
||||||
ion-menu-controller,method,registerAnimation,registerAnimation(name: string, animation: AnimationBuilder) => Promise<void>
|
|
||||||
ion-menu-controller,method,swipeGesture,swipeGesture(enable: boolean, menu?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>
|
|
||||||
ion-menu-controller,method,toggle,toggle(menu?: string | null | undefined) => Promise<boolean>
|
|
||||||
|
|
||||||
ion-menu-toggle,shadow
|
ion-menu-toggle,shadow
|
||||||
ion-menu-toggle,prop,autoHide,boolean,true,false,false
|
ion-menu-toggle,prop,autoHide,boolean,true,false,false
|
||||||
ion-menu-toggle,prop,menu,string | undefined,undefined,false,false
|
ion-menu-toggle,prop,menu,string | undefined,undefined,false,false
|
||||||
@ -709,11 +680,6 @@ ion-modal,css-prop,--min-height
|
|||||||
ion-modal,css-prop,--min-width
|
ion-modal,css-prop,--min-width
|
||||||
ion-modal,css-prop,--width
|
ion-modal,css-prop,--width
|
||||||
|
|
||||||
ion-modal-controller,none
|
|
||||||
ion-modal-controller,method,create,create<T extends ComponentRef>(options: ModalOptions<T>) => Promise<HTMLIonModalElement>
|
|
||||||
ion-modal-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
|
|
||||||
ion-modal-controller,method,getTop,getTop() => Promise<HTMLIonModalElement | undefined>
|
|
||||||
|
|
||||||
ion-nav,shadow
|
ion-nav,shadow
|
||||||
ion-nav,prop,animated,boolean,true,false,false
|
ion-nav,prop,animated,boolean,true,false,false
|
||||||
ion-nav,prop,animation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
|
ion-nav,prop,animation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
|
||||||
@ -781,11 +747,6 @@ ion-picker,css-prop,--min-height
|
|||||||
ion-picker,css-prop,--min-width
|
ion-picker,css-prop,--min-width
|
||||||
ion-picker,css-prop,--width
|
ion-picker,css-prop,--width
|
||||||
|
|
||||||
ion-picker-controller,none
|
|
||||||
ion-picker-controller,method,create,create(options: PickerOptions) => Promise<HTMLIonPickerElement>
|
|
||||||
ion-picker-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
|
|
||||||
ion-picker-controller,method,getTop,getTop() => Promise<HTMLIonPickerElement | undefined>
|
|
||||||
|
|
||||||
ion-popover,scoped
|
ion-popover,scoped
|
||||||
ion-popover,prop,animated,boolean,true,false,false
|
ion-popover,prop,animated,boolean,true,false,false
|
||||||
ion-popover,prop,backdropDismiss,boolean,true,false,false
|
ion-popover,prop,backdropDismiss,boolean,true,false,false
|
||||||
@ -817,11 +778,6 @@ ion-popover,css-prop,--min-height
|
|||||||
ion-popover,css-prop,--min-width
|
ion-popover,css-prop,--min-width
|
||||||
ion-popover,css-prop,--width
|
ion-popover,css-prop,--width
|
||||||
|
|
||||||
ion-popover-controller,none
|
|
||||||
ion-popover-controller,method,create,create<T extends ComponentRef>(options: PopoverOptions<T>) => Promise<HTMLIonPopoverElement>
|
|
||||||
ion-popover-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
|
|
||||||
ion-popover-controller,method,getTop,getTop() => Promise<HTMLIonPopoverElement | undefined>
|
|
||||||
|
|
||||||
ion-progress-bar,shadow
|
ion-progress-bar,shadow
|
||||||
ion-progress-bar,prop,buffer,number,1,false,false
|
ion-progress-bar,prop,buffer,number,1,false,false
|
||||||
ion-progress-bar,prop,color,string | undefined,undefined,false,false
|
ion-progress-bar,prop,color,string | undefined,undefined,false,false
|
||||||
@ -1259,11 +1215,6 @@ ion-toast,css-prop,--min-width
|
|||||||
ion-toast,css-prop,--start
|
ion-toast,css-prop,--start
|
||||||
ion-toast,css-prop,--width
|
ion-toast,css-prop,--width
|
||||||
|
|
||||||
ion-toast-controller,none
|
|
||||||
ion-toast-controller,method,create,create(options?: ToastOptions | undefined) => Promise<HTMLIonToastElement>
|
|
||||||
ion-toast-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
|
|
||||||
ion-toast-controller,method,getTop,getTop() => Promise<HTMLIonToastElement | undefined>
|
|
||||||
|
|
||||||
ion-toggle,shadow
|
ion-toggle,shadow
|
||||||
ion-toggle,prop,checked,boolean,false,false,false
|
ion-toggle,prop,checked,boolean,false,false,false
|
||||||
ion-toggle,prop,color,string | undefined,undefined,false,false
|
ion-toggle,prop,color,string | undefined,undefined,false,false
|
||||||
|
|||||||
275
core/src/components.d.ts
vendored
275
core/src/components.d.ts
vendored
@ -9,10 +9,8 @@
|
|||||||
import { HTMLStencilElement, JSXBase } from '@stencil/core/internal';
|
import { HTMLStencilElement, JSXBase } from '@stencil/core/internal';
|
||||||
import {
|
import {
|
||||||
ActionSheetButton,
|
ActionSheetButton,
|
||||||
ActionSheetOptions,
|
|
||||||
AlertButton,
|
AlertButton,
|
||||||
AlertInput,
|
AlertInput,
|
||||||
AlertOptions,
|
|
||||||
AnimationBuilder,
|
AnimationBuilder,
|
||||||
CheckboxChangeEventDetail,
|
CheckboxChangeEventDetail,
|
||||||
Color,
|
Color,
|
||||||
@ -29,16 +27,12 @@ import {
|
|||||||
ItemHeightFn,
|
ItemHeightFn,
|
||||||
ItemRenderFn,
|
ItemRenderFn,
|
||||||
ItemReorderEventDetail,
|
ItemReorderEventDetail,
|
||||||
LoadingOptions,
|
|
||||||
MenuChangeEventDetail,
|
MenuChangeEventDetail,
|
||||||
ModalOptions,
|
|
||||||
NavComponent,
|
NavComponent,
|
||||||
NavOptions,
|
NavOptions,
|
||||||
OverlayEventDetail,
|
OverlayEventDetail,
|
||||||
PickerButton,
|
PickerButton,
|
||||||
PickerColumn,
|
PickerColumn,
|
||||||
PickerOptions,
|
|
||||||
PopoverOptions,
|
|
||||||
RadioChangeEventDetail,
|
RadioChangeEventDetail,
|
||||||
RadioGroupChangeEventDetail,
|
RadioGroupChangeEventDetail,
|
||||||
RangeChangeEventDetail,
|
RangeChangeEventDetail,
|
||||||
@ -67,7 +61,6 @@ import {
|
|||||||
TextareaChangeEventDetail,
|
TextareaChangeEventDetail,
|
||||||
TextFieldTypes,
|
TextFieldTypes,
|
||||||
ToastButton,
|
ToastButton,
|
||||||
ToastOptions,
|
|
||||||
ToggleChangeEventDetail,
|
ToggleChangeEventDetail,
|
||||||
TransitionDoneFn,
|
TransitionDoneFn,
|
||||||
TransitionInstruction,
|
TransitionInstruction,
|
||||||
@ -143,24 +136,6 @@ export namespace Components {
|
|||||||
*/
|
*/
|
||||||
'translucent': boolean;
|
'translucent': boolean;
|
||||||
}
|
}
|
||||||
interface IonActionSheetController {
|
|
||||||
/**
|
|
||||||
* Create an action sheet overlay with action sheet options.
|
|
||||||
* @param options The options to use to create the action sheet.
|
|
||||||
*/
|
|
||||||
'create': (options: ActionSheetOptions) => Promise<HTMLIonActionSheetElement>;
|
|
||||||
/**
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>;
|
|
||||||
/**
|
|
||||||
* Get the most recently opened action sheet overlay.
|
|
||||||
*/
|
|
||||||
'getTop': () => Promise<HTMLIonActionSheetElement | undefined>;
|
|
||||||
}
|
|
||||||
interface IonAlert {
|
interface IonAlert {
|
||||||
/**
|
/**
|
||||||
* If `true`, the alert will animate.
|
* If `true`, the alert will animate.
|
||||||
@ -234,24 +209,6 @@ export namespace Components {
|
|||||||
*/
|
*/
|
||||||
'translucent': boolean;
|
'translucent': boolean;
|
||||||
}
|
}
|
||||||
interface IonAlertController {
|
|
||||||
/**
|
|
||||||
* Create an alert overlay with alert options.
|
|
||||||
* @param options The options to use to create the alert.
|
|
||||||
*/
|
|
||||||
'create': (options: AlertOptions) => Promise<HTMLIonAlertElement>;
|
|
||||||
/**
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>;
|
|
||||||
/**
|
|
||||||
* Get the most recently opened alert overlay.
|
|
||||||
*/
|
|
||||||
'getTop': () => Promise<HTMLIonAlertElement | undefined>;
|
|
||||||
}
|
|
||||||
interface IonApp {}
|
interface IonApp {}
|
||||||
interface IonAvatar {}
|
interface IonAvatar {}
|
||||||
interface IonBackButton {
|
interface IonBackButton {
|
||||||
@ -1280,24 +1237,6 @@ export namespace Components {
|
|||||||
*/
|
*/
|
||||||
'translucent': boolean;
|
'translucent': boolean;
|
||||||
}
|
}
|
||||||
interface IonLoadingController {
|
|
||||||
/**
|
|
||||||
* Create a loading overlay with loading options.
|
|
||||||
* @param options The options to use to create the loading.
|
|
||||||
*/
|
|
||||||
'create': (options?: LoadingOptions | undefined) => Promise<HTMLIonLoadingElement>;
|
|
||||||
/**
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>;
|
|
||||||
/**
|
|
||||||
* Get the most recently opened loading overlay.
|
|
||||||
*/
|
|
||||||
'getTop': () => Promise<HTMLIonLoadingElement | undefined>;
|
|
||||||
}
|
|
||||||
interface IonMenu {
|
interface IonMenu {
|
||||||
/**
|
/**
|
||||||
* Closes the menu. If the menu is already closed or it can't be closed, it returns `false`.
|
* Closes the menu. If the menu is already closed or it can't be closed, it returns `false`.
|
||||||
@ -1374,68 +1313,6 @@ export namespace Components {
|
|||||||
*/
|
*/
|
||||||
'type': 'submit' | 'reset' | 'button';
|
'type': 'submit' | 'reset' | 'button';
|
||||||
}
|
}
|
||||||
interface IonMenuController {
|
|
||||||
/**
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
'close': (menu?: string | null | undefined) => Promise<boolean>;
|
|
||||||
/**
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
'enable': (enable: boolean, menu?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>;
|
|
||||||
/**
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
'get': (menu?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>;
|
|
||||||
/**
|
|
||||||
* Get all menu instances.
|
|
||||||
*/
|
|
||||||
'getMenus': () => Promise<HTMLIonMenuElement[]>;
|
|
||||||
/**
|
|
||||||
* Get the instance of the opened menu. Returns `null` if a menu is not found.
|
|
||||||
*/
|
|
||||||
'getOpen': () => Promise<HTMLIonMenuElement | undefined>;
|
|
||||||
/**
|
|
||||||
* Get whether or not a menu is animating. Returns `true` if any menu is currently animating.
|
|
||||||
*/
|
|
||||||
'isAnimating': () => Promise<boolean>;
|
|
||||||
/**
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
'isEnabled': (menu?: string | null | undefined) => Promise<boolean>;
|
|
||||||
/**
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
'isOpen': (menu?: string | null | undefined) => Promise<boolean>;
|
|
||||||
/**
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
'open': (menu?: string | null | undefined) => Promise<boolean>;
|
|
||||||
/**
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
'registerAnimation': (name: string, animation: AnimationBuilder) => Promise<void>;
|
|
||||||
/**
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
'swipeGesture': (enable: boolean, menu?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>;
|
|
||||||
/**
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
'toggle': (menu?: string | null | undefined) => Promise<boolean>;
|
|
||||||
}
|
|
||||||
interface IonMenuToggle {
|
interface IonMenuToggle {
|
||||||
/**
|
/**
|
||||||
* Automatically hides the content when the corresponding menu is not active. By default, it's `true`. Change it to `false` in order to keep `ion-menu-toggle` always visible regardless the state of the menu.
|
* Automatically hides the content when the corresponding menu is not active. By default, it's `true`. Change it to `false` in order to keep `ion-menu-toggle` always visible regardless the state of the menu.
|
||||||
@ -1516,24 +1393,6 @@ export namespace Components {
|
|||||||
*/
|
*/
|
||||||
'swipeToClose': boolean;
|
'swipeToClose': boolean;
|
||||||
}
|
}
|
||||||
interface IonModalController {
|
|
||||||
/**
|
|
||||||
* Create a modal overlay with modal options.
|
|
||||||
* @param options The options to use to create the modal.
|
|
||||||
*/
|
|
||||||
'create': <T extends ComponentRef>(options: ModalOptions<T>) => Promise<HTMLIonModalElement>;
|
|
||||||
/**
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>;
|
|
||||||
/**
|
|
||||||
* Get the most recently opened modal overlay.
|
|
||||||
*/
|
|
||||||
'getTop': () => Promise<HTMLIonModalElement | undefined>;
|
|
||||||
}
|
|
||||||
interface IonNav {
|
interface IonNav {
|
||||||
/**
|
/**
|
||||||
* If `true`, the nav should animate the transition of components.
|
* If `true`, the nav should animate the transition of components.
|
||||||
@ -1745,24 +1604,6 @@ export namespace Components {
|
|||||||
*/
|
*/
|
||||||
'col': PickerColumn;
|
'col': PickerColumn;
|
||||||
}
|
}
|
||||||
interface IonPickerController {
|
|
||||||
/**
|
|
||||||
* Create a picker overlay with picker options.
|
|
||||||
* @param options The options to use to create the picker.
|
|
||||||
*/
|
|
||||||
'create': (options: PickerOptions) => Promise<HTMLIonPickerElement>;
|
|
||||||
/**
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>;
|
|
||||||
/**
|
|
||||||
* Get the most recently opened picker overlay.
|
|
||||||
*/
|
|
||||||
'getTop': () => Promise<HTMLIonPickerElement | undefined>;
|
|
||||||
}
|
|
||||||
interface IonPopover {
|
interface IonPopover {
|
||||||
/**
|
/**
|
||||||
* If `true`, the popover will animate.
|
* If `true`, the popover will animate.
|
||||||
@ -1833,24 +1674,6 @@ export namespace Components {
|
|||||||
*/
|
*/
|
||||||
'translucent': boolean;
|
'translucent': boolean;
|
||||||
}
|
}
|
||||||
interface IonPopoverController {
|
|
||||||
/**
|
|
||||||
* Create a popover overlay with popover options.
|
|
||||||
* @param options The options to use to create the popover.
|
|
||||||
*/
|
|
||||||
'create': <T extends ComponentRef>(options: PopoverOptions<T>) => Promise<HTMLIonPopoverElement>;
|
|
||||||
/**
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>;
|
|
||||||
/**
|
|
||||||
* Get the most recently opened popover overlay.
|
|
||||||
*/
|
|
||||||
'getTop': () => Promise<HTMLIonPopoverElement | undefined>;
|
|
||||||
}
|
|
||||||
interface IonProgressBar {
|
interface IonProgressBar {
|
||||||
/**
|
/**
|
||||||
* If the buffer and value are smaller than 1, the buffer circles will show. The buffer should be between [0, 1].
|
* If the buffer and value are smaller than 1, the buffer circles will show. The buffer should be between [0, 1].
|
||||||
@ -2755,24 +2578,6 @@ export namespace Components {
|
|||||||
*/
|
*/
|
||||||
'translucent': boolean;
|
'translucent': boolean;
|
||||||
}
|
}
|
||||||
interface IonToastController {
|
|
||||||
/**
|
|
||||||
* Create a toast overlay with toast options.
|
|
||||||
* @param options The options to use to create the toast.
|
|
||||||
*/
|
|
||||||
'create': (options?: ToastOptions | undefined) => Promise<HTMLIonToastElement>;
|
|
||||||
/**
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>;
|
|
||||||
/**
|
|
||||||
* Get the most recently opened toast overlay.
|
|
||||||
*/
|
|
||||||
'getTop': () => Promise<HTMLIonToastElement | undefined>;
|
|
||||||
}
|
|
||||||
interface IonToggle {
|
interface IonToggle {
|
||||||
/**
|
/**
|
||||||
* If `true`, the toggle is selected.
|
* If `true`, the toggle is selected.
|
||||||
@ -2887,24 +2692,12 @@ declare global {
|
|||||||
new (): HTMLIonActionSheetElement;
|
new (): HTMLIonActionSheetElement;
|
||||||
};
|
};
|
||||||
|
|
||||||
interface HTMLIonActionSheetControllerElement extends Components.IonActionSheetController, HTMLStencilElement {}
|
|
||||||
var HTMLIonActionSheetControllerElement: {
|
|
||||||
prototype: HTMLIonActionSheetControllerElement;
|
|
||||||
new (): HTMLIonActionSheetControllerElement;
|
|
||||||
};
|
|
||||||
|
|
||||||
interface HTMLIonAlertElement extends Components.IonAlert, HTMLStencilElement {}
|
interface HTMLIonAlertElement extends Components.IonAlert, HTMLStencilElement {}
|
||||||
var HTMLIonAlertElement: {
|
var HTMLIonAlertElement: {
|
||||||
prototype: HTMLIonAlertElement;
|
prototype: HTMLIonAlertElement;
|
||||||
new (): HTMLIonAlertElement;
|
new (): HTMLIonAlertElement;
|
||||||
};
|
};
|
||||||
|
|
||||||
interface HTMLIonAlertControllerElement extends Components.IonAlertController, HTMLStencilElement {}
|
|
||||||
var HTMLIonAlertControllerElement: {
|
|
||||||
prototype: HTMLIonAlertControllerElement;
|
|
||||||
new (): HTMLIonAlertControllerElement;
|
|
||||||
};
|
|
||||||
|
|
||||||
interface HTMLIonAppElement extends Components.IonApp, HTMLStencilElement {}
|
interface HTMLIonAppElement extends Components.IonApp, HTMLStencilElement {}
|
||||||
var HTMLIonAppElement: {
|
var HTMLIonAppElement: {
|
||||||
prototype: HTMLIonAppElement;
|
prototype: HTMLIonAppElement;
|
||||||
@ -3127,12 +2920,6 @@ declare global {
|
|||||||
new (): HTMLIonLoadingElement;
|
new (): HTMLIonLoadingElement;
|
||||||
};
|
};
|
||||||
|
|
||||||
interface HTMLIonLoadingControllerElement extends Components.IonLoadingController, HTMLStencilElement {}
|
|
||||||
var HTMLIonLoadingControllerElement: {
|
|
||||||
prototype: HTMLIonLoadingControllerElement;
|
|
||||||
new (): HTMLIonLoadingControllerElement;
|
|
||||||
};
|
|
||||||
|
|
||||||
interface HTMLIonMenuElement extends Components.IonMenu, HTMLStencilElement {}
|
interface HTMLIonMenuElement extends Components.IonMenu, HTMLStencilElement {}
|
||||||
var HTMLIonMenuElement: {
|
var HTMLIonMenuElement: {
|
||||||
prototype: HTMLIonMenuElement;
|
prototype: HTMLIonMenuElement;
|
||||||
@ -3145,12 +2932,6 @@ declare global {
|
|||||||
new (): HTMLIonMenuButtonElement;
|
new (): HTMLIonMenuButtonElement;
|
||||||
};
|
};
|
||||||
|
|
||||||
interface HTMLIonMenuControllerElement extends Components.IonMenuController, HTMLStencilElement {}
|
|
||||||
var HTMLIonMenuControllerElement: {
|
|
||||||
prototype: HTMLIonMenuControllerElement;
|
|
||||||
new (): HTMLIonMenuControllerElement;
|
|
||||||
};
|
|
||||||
|
|
||||||
interface HTMLIonMenuToggleElement extends Components.IonMenuToggle, HTMLStencilElement {}
|
interface HTMLIonMenuToggleElement extends Components.IonMenuToggle, HTMLStencilElement {}
|
||||||
var HTMLIonMenuToggleElement: {
|
var HTMLIonMenuToggleElement: {
|
||||||
prototype: HTMLIonMenuToggleElement;
|
prototype: HTMLIonMenuToggleElement;
|
||||||
@ -3163,12 +2944,6 @@ declare global {
|
|||||||
new (): HTMLIonModalElement;
|
new (): HTMLIonModalElement;
|
||||||
};
|
};
|
||||||
|
|
||||||
interface HTMLIonModalControllerElement extends Components.IonModalController, HTMLStencilElement {}
|
|
||||||
var HTMLIonModalControllerElement: {
|
|
||||||
prototype: HTMLIonModalControllerElement;
|
|
||||||
new (): HTMLIonModalControllerElement;
|
|
||||||
};
|
|
||||||
|
|
||||||
interface HTMLIonNavElement extends Components.IonNav, HTMLStencilElement {}
|
interface HTMLIonNavElement extends Components.IonNav, HTMLStencilElement {}
|
||||||
var HTMLIonNavElement: {
|
var HTMLIonNavElement: {
|
||||||
prototype: HTMLIonNavElement;
|
prototype: HTMLIonNavElement;
|
||||||
@ -3199,24 +2974,12 @@ declare global {
|
|||||||
new (): HTMLIonPickerColumnElement;
|
new (): HTMLIonPickerColumnElement;
|
||||||
};
|
};
|
||||||
|
|
||||||
interface HTMLIonPickerControllerElement extends Components.IonPickerController, HTMLStencilElement {}
|
|
||||||
var HTMLIonPickerControllerElement: {
|
|
||||||
prototype: HTMLIonPickerControllerElement;
|
|
||||||
new (): HTMLIonPickerControllerElement;
|
|
||||||
};
|
|
||||||
|
|
||||||
interface HTMLIonPopoverElement extends Components.IonPopover, HTMLStencilElement {}
|
interface HTMLIonPopoverElement extends Components.IonPopover, HTMLStencilElement {}
|
||||||
var HTMLIonPopoverElement: {
|
var HTMLIonPopoverElement: {
|
||||||
prototype: HTMLIonPopoverElement;
|
prototype: HTMLIonPopoverElement;
|
||||||
new (): HTMLIonPopoverElement;
|
new (): HTMLIonPopoverElement;
|
||||||
};
|
};
|
||||||
|
|
||||||
interface HTMLIonPopoverControllerElement extends Components.IonPopoverController, HTMLStencilElement {}
|
|
||||||
var HTMLIonPopoverControllerElement: {
|
|
||||||
prototype: HTMLIonPopoverControllerElement;
|
|
||||||
new (): HTMLIonPopoverControllerElement;
|
|
||||||
};
|
|
||||||
|
|
||||||
interface HTMLIonProgressBarElement extends Components.IonProgressBar, HTMLStencilElement {}
|
interface HTMLIonProgressBarElement extends Components.IonProgressBar, HTMLStencilElement {}
|
||||||
var HTMLIonProgressBarElement: {
|
var HTMLIonProgressBarElement: {
|
||||||
prototype: HTMLIonProgressBarElement;
|
prototype: HTMLIonProgressBarElement;
|
||||||
@ -3427,12 +3190,6 @@ declare global {
|
|||||||
new (): HTMLIonToastElement;
|
new (): HTMLIonToastElement;
|
||||||
};
|
};
|
||||||
|
|
||||||
interface HTMLIonToastControllerElement extends Components.IonToastController, HTMLStencilElement {}
|
|
||||||
var HTMLIonToastControllerElement: {
|
|
||||||
prototype: HTMLIonToastControllerElement;
|
|
||||||
new (): HTMLIonToastControllerElement;
|
|
||||||
};
|
|
||||||
|
|
||||||
interface HTMLIonToggleElement extends Components.IonToggle, HTMLStencilElement {}
|
interface HTMLIonToggleElement extends Components.IonToggle, HTMLStencilElement {}
|
||||||
var HTMLIonToggleElement: {
|
var HTMLIonToggleElement: {
|
||||||
prototype: HTMLIonToggleElement;
|
prototype: HTMLIonToggleElement;
|
||||||
@ -3452,9 +3209,7 @@ declare global {
|
|||||||
};
|
};
|
||||||
interface HTMLElementTagNameMap {
|
interface HTMLElementTagNameMap {
|
||||||
'ion-action-sheet': HTMLIonActionSheetElement;
|
'ion-action-sheet': HTMLIonActionSheetElement;
|
||||||
'ion-action-sheet-controller': HTMLIonActionSheetControllerElement;
|
|
||||||
'ion-alert': HTMLIonAlertElement;
|
'ion-alert': HTMLIonAlertElement;
|
||||||
'ion-alert-controller': HTMLIonAlertControllerElement;
|
|
||||||
'ion-app': HTMLIonAppElement;
|
'ion-app': HTMLIonAppElement;
|
||||||
'ion-avatar': HTMLIonAvatarElement;
|
'ion-avatar': HTMLIonAvatarElement;
|
||||||
'ion-back-button': HTMLIonBackButtonElement;
|
'ion-back-button': HTMLIonBackButtonElement;
|
||||||
@ -3492,21 +3247,16 @@ declare global {
|
|||||||
'ion-list': HTMLIonListElement;
|
'ion-list': HTMLIonListElement;
|
||||||
'ion-list-header': HTMLIonListHeaderElement;
|
'ion-list-header': HTMLIonListHeaderElement;
|
||||||
'ion-loading': HTMLIonLoadingElement;
|
'ion-loading': HTMLIonLoadingElement;
|
||||||
'ion-loading-controller': HTMLIonLoadingControllerElement;
|
|
||||||
'ion-menu': HTMLIonMenuElement;
|
'ion-menu': HTMLIonMenuElement;
|
||||||
'ion-menu-button': HTMLIonMenuButtonElement;
|
'ion-menu-button': HTMLIonMenuButtonElement;
|
||||||
'ion-menu-controller': HTMLIonMenuControllerElement;
|
|
||||||
'ion-menu-toggle': HTMLIonMenuToggleElement;
|
'ion-menu-toggle': HTMLIonMenuToggleElement;
|
||||||
'ion-modal': HTMLIonModalElement;
|
'ion-modal': HTMLIonModalElement;
|
||||||
'ion-modal-controller': HTMLIonModalControllerElement;
|
|
||||||
'ion-nav': HTMLIonNavElement;
|
'ion-nav': HTMLIonNavElement;
|
||||||
'ion-nav-link': HTMLIonNavLinkElement;
|
'ion-nav-link': HTMLIonNavLinkElement;
|
||||||
'ion-note': HTMLIonNoteElement;
|
'ion-note': HTMLIonNoteElement;
|
||||||
'ion-picker': HTMLIonPickerElement;
|
'ion-picker': HTMLIonPickerElement;
|
||||||
'ion-picker-column': HTMLIonPickerColumnElement;
|
'ion-picker-column': HTMLIonPickerColumnElement;
|
||||||
'ion-picker-controller': HTMLIonPickerControllerElement;
|
|
||||||
'ion-popover': HTMLIonPopoverElement;
|
'ion-popover': HTMLIonPopoverElement;
|
||||||
'ion-popover-controller': HTMLIonPopoverControllerElement;
|
|
||||||
'ion-progress-bar': HTMLIonProgressBarElement;
|
'ion-progress-bar': HTMLIonProgressBarElement;
|
||||||
'ion-radio': HTMLIonRadioElement;
|
'ion-radio': HTMLIonRadioElement;
|
||||||
'ion-radio-group': HTMLIonRadioGroupElement;
|
'ion-radio-group': HTMLIonRadioGroupElement;
|
||||||
@ -3542,7 +3292,6 @@ declare global {
|
|||||||
'ion-thumbnail': HTMLIonThumbnailElement;
|
'ion-thumbnail': HTMLIonThumbnailElement;
|
||||||
'ion-title': HTMLIonTitleElement;
|
'ion-title': HTMLIonTitleElement;
|
||||||
'ion-toast': HTMLIonToastElement;
|
'ion-toast': HTMLIonToastElement;
|
||||||
'ion-toast-controller': HTMLIonToastControllerElement;
|
|
||||||
'ion-toggle': HTMLIonToggleElement;
|
'ion-toggle': HTMLIonToggleElement;
|
||||||
'ion-toolbar': HTMLIonToolbarElement;
|
'ion-toolbar': HTMLIonToolbarElement;
|
||||||
'ion-virtual-scroll': HTMLIonVirtualScrollElement;
|
'ion-virtual-scroll': HTMLIonVirtualScrollElement;
|
||||||
@ -3612,7 +3361,6 @@ declare namespace LocalJSX {
|
|||||||
*/
|
*/
|
||||||
'translucent'?: boolean;
|
'translucent'?: boolean;
|
||||||
}
|
}
|
||||||
interface IonActionSheetController {}
|
|
||||||
interface IonAlert {
|
interface IonAlert {
|
||||||
/**
|
/**
|
||||||
* If `true`, the alert will animate.
|
* If `true`, the alert will animate.
|
||||||
@ -3683,7 +3431,6 @@ declare namespace LocalJSX {
|
|||||||
*/
|
*/
|
||||||
'translucent'?: boolean;
|
'translucent'?: boolean;
|
||||||
}
|
}
|
||||||
interface IonAlertController {}
|
|
||||||
interface IonApp {}
|
interface IonApp {}
|
||||||
interface IonAvatar {}
|
interface IonAvatar {}
|
||||||
interface IonBackButton {
|
interface IonBackButton {
|
||||||
@ -4735,7 +4482,6 @@ declare namespace LocalJSX {
|
|||||||
*/
|
*/
|
||||||
'translucent'?: boolean;
|
'translucent'?: boolean;
|
||||||
}
|
}
|
||||||
interface IonLoadingController {}
|
|
||||||
interface IonMenu {
|
interface IonMenu {
|
||||||
/**
|
/**
|
||||||
* The content's id the menu should use.
|
* The content's id the menu should use.
|
||||||
@ -4804,7 +4550,6 @@ declare namespace LocalJSX {
|
|||||||
*/
|
*/
|
||||||
'type'?: 'submit' | 'reset' | 'button';
|
'type'?: 'submit' | 'reset' | 'button';
|
||||||
}
|
}
|
||||||
interface IonMenuController {}
|
|
||||||
interface IonMenuToggle {
|
interface IonMenuToggle {
|
||||||
/**
|
/**
|
||||||
* Automatically hides the content when the corresponding menu is not active. By default, it's `true`. Change it to `false` in order to keep `ion-menu-toggle` always visible regardless the state of the menu.
|
* Automatically hides the content when the corresponding menu is not active. By default, it's `true`. Change it to `false` in order to keep `ion-menu-toggle` always visible regardless the state of the menu.
|
||||||
@ -4881,7 +4626,6 @@ declare namespace LocalJSX {
|
|||||||
*/
|
*/
|
||||||
'swipeToClose'?: boolean;
|
'swipeToClose'?: boolean;
|
||||||
}
|
}
|
||||||
interface IonModalController {}
|
|
||||||
interface IonNav {
|
interface IonNav {
|
||||||
/**
|
/**
|
||||||
* If `true`, the nav should animate the transition of components.
|
* If `true`, the nav should animate the transition of components.
|
||||||
@ -5004,7 +4748,6 @@ declare namespace LocalJSX {
|
|||||||
*/
|
*/
|
||||||
'col': PickerColumn;
|
'col': PickerColumn;
|
||||||
}
|
}
|
||||||
interface IonPickerController {}
|
|
||||||
interface IonPopover {
|
interface IonPopover {
|
||||||
/**
|
/**
|
||||||
* If `true`, the popover will animate.
|
* If `true`, the popover will animate.
|
||||||
@ -5071,7 +4814,6 @@ declare namespace LocalJSX {
|
|||||||
*/
|
*/
|
||||||
'translucent'?: boolean;
|
'translucent'?: boolean;
|
||||||
}
|
}
|
||||||
interface IonPopoverController {}
|
|
||||||
interface IonProgressBar {
|
interface IonProgressBar {
|
||||||
/**
|
/**
|
||||||
* If the buffer and value are smaller than 1, the buffer circles will show. The buffer should be between [0, 1].
|
* If the buffer and value are smaller than 1, the buffer circles will show. The buffer should be between [0, 1].
|
||||||
@ -6014,7 +5756,6 @@ declare namespace LocalJSX {
|
|||||||
*/
|
*/
|
||||||
'translucent'?: boolean;
|
'translucent'?: boolean;
|
||||||
}
|
}
|
||||||
interface IonToastController {}
|
|
||||||
interface IonToggle {
|
interface IonToggle {
|
||||||
/**
|
/**
|
||||||
* If `true`, the toggle is selected.
|
* If `true`, the toggle is selected.
|
||||||
@ -6120,9 +5861,7 @@ declare namespace LocalJSX {
|
|||||||
|
|
||||||
interface IntrinsicElements {
|
interface IntrinsicElements {
|
||||||
'ion-action-sheet': IonActionSheet;
|
'ion-action-sheet': IonActionSheet;
|
||||||
'ion-action-sheet-controller': IonActionSheetController;
|
|
||||||
'ion-alert': IonAlert;
|
'ion-alert': IonAlert;
|
||||||
'ion-alert-controller': IonAlertController;
|
|
||||||
'ion-app': IonApp;
|
'ion-app': IonApp;
|
||||||
'ion-avatar': IonAvatar;
|
'ion-avatar': IonAvatar;
|
||||||
'ion-back-button': IonBackButton;
|
'ion-back-button': IonBackButton;
|
||||||
@ -6160,21 +5899,16 @@ declare namespace LocalJSX {
|
|||||||
'ion-list': IonList;
|
'ion-list': IonList;
|
||||||
'ion-list-header': IonListHeader;
|
'ion-list-header': IonListHeader;
|
||||||
'ion-loading': IonLoading;
|
'ion-loading': IonLoading;
|
||||||
'ion-loading-controller': IonLoadingController;
|
|
||||||
'ion-menu': IonMenu;
|
'ion-menu': IonMenu;
|
||||||
'ion-menu-button': IonMenuButton;
|
'ion-menu-button': IonMenuButton;
|
||||||
'ion-menu-controller': IonMenuController;
|
|
||||||
'ion-menu-toggle': IonMenuToggle;
|
'ion-menu-toggle': IonMenuToggle;
|
||||||
'ion-modal': IonModal;
|
'ion-modal': IonModal;
|
||||||
'ion-modal-controller': IonModalController;
|
|
||||||
'ion-nav': IonNav;
|
'ion-nav': IonNav;
|
||||||
'ion-nav-link': IonNavLink;
|
'ion-nav-link': IonNavLink;
|
||||||
'ion-note': IonNote;
|
'ion-note': IonNote;
|
||||||
'ion-picker': IonPicker;
|
'ion-picker': IonPicker;
|
||||||
'ion-picker-column': IonPickerColumn;
|
'ion-picker-column': IonPickerColumn;
|
||||||
'ion-picker-controller': IonPickerController;
|
|
||||||
'ion-popover': IonPopover;
|
'ion-popover': IonPopover;
|
||||||
'ion-popover-controller': IonPopoverController;
|
|
||||||
'ion-progress-bar': IonProgressBar;
|
'ion-progress-bar': IonProgressBar;
|
||||||
'ion-radio': IonRadio;
|
'ion-radio': IonRadio;
|
||||||
'ion-radio-group': IonRadioGroup;
|
'ion-radio-group': IonRadioGroup;
|
||||||
@ -6210,7 +5944,6 @@ declare namespace LocalJSX {
|
|||||||
'ion-thumbnail': IonThumbnail;
|
'ion-thumbnail': IonThumbnail;
|
||||||
'ion-title': IonTitle;
|
'ion-title': IonTitle;
|
||||||
'ion-toast': IonToast;
|
'ion-toast': IonToast;
|
||||||
'ion-toast-controller': IonToastController;
|
|
||||||
'ion-toggle': IonToggle;
|
'ion-toggle': IonToggle;
|
||||||
'ion-toolbar': IonToolbar;
|
'ion-toolbar': IonToolbar;
|
||||||
'ion-virtual-scroll': IonVirtualScroll;
|
'ion-virtual-scroll': IonVirtualScroll;
|
||||||
@ -6224,9 +5957,7 @@ declare module "@stencil/core" {
|
|||||||
export namespace JSX {
|
export namespace JSX {
|
||||||
interface IntrinsicElements {
|
interface IntrinsicElements {
|
||||||
'ion-action-sheet': LocalJSX.IonActionSheet & JSXBase.HTMLAttributes<HTMLIonActionSheetElement>;
|
'ion-action-sheet': LocalJSX.IonActionSheet & JSXBase.HTMLAttributes<HTMLIonActionSheetElement>;
|
||||||
'ion-action-sheet-controller': LocalJSX.IonActionSheetController & JSXBase.HTMLAttributes<HTMLIonActionSheetControllerElement>;
|
|
||||||
'ion-alert': LocalJSX.IonAlert & JSXBase.HTMLAttributes<HTMLIonAlertElement>;
|
'ion-alert': LocalJSX.IonAlert & JSXBase.HTMLAttributes<HTMLIonAlertElement>;
|
||||||
'ion-alert-controller': LocalJSX.IonAlertController & JSXBase.HTMLAttributes<HTMLIonAlertControllerElement>;
|
|
||||||
'ion-app': LocalJSX.IonApp & JSXBase.HTMLAttributes<HTMLIonAppElement>;
|
'ion-app': LocalJSX.IonApp & JSXBase.HTMLAttributes<HTMLIonAppElement>;
|
||||||
'ion-avatar': LocalJSX.IonAvatar & JSXBase.HTMLAttributes<HTMLIonAvatarElement>;
|
'ion-avatar': LocalJSX.IonAvatar & JSXBase.HTMLAttributes<HTMLIonAvatarElement>;
|
||||||
'ion-back-button': LocalJSX.IonBackButton & JSXBase.HTMLAttributes<HTMLIonBackButtonElement>;
|
'ion-back-button': LocalJSX.IonBackButton & JSXBase.HTMLAttributes<HTMLIonBackButtonElement>;
|
||||||
@ -6264,21 +5995,16 @@ declare module "@stencil/core" {
|
|||||||
'ion-list': LocalJSX.IonList & JSXBase.HTMLAttributes<HTMLIonListElement>;
|
'ion-list': LocalJSX.IonList & JSXBase.HTMLAttributes<HTMLIonListElement>;
|
||||||
'ion-list-header': LocalJSX.IonListHeader & JSXBase.HTMLAttributes<HTMLIonListHeaderElement>;
|
'ion-list-header': LocalJSX.IonListHeader & JSXBase.HTMLAttributes<HTMLIonListHeaderElement>;
|
||||||
'ion-loading': LocalJSX.IonLoading & JSXBase.HTMLAttributes<HTMLIonLoadingElement>;
|
'ion-loading': LocalJSX.IonLoading & JSXBase.HTMLAttributes<HTMLIonLoadingElement>;
|
||||||
'ion-loading-controller': LocalJSX.IonLoadingController & JSXBase.HTMLAttributes<HTMLIonLoadingControllerElement>;
|
|
||||||
'ion-menu': LocalJSX.IonMenu & JSXBase.HTMLAttributes<HTMLIonMenuElement>;
|
'ion-menu': LocalJSX.IonMenu & JSXBase.HTMLAttributes<HTMLIonMenuElement>;
|
||||||
'ion-menu-button': LocalJSX.IonMenuButton & JSXBase.HTMLAttributes<HTMLIonMenuButtonElement>;
|
'ion-menu-button': LocalJSX.IonMenuButton & JSXBase.HTMLAttributes<HTMLIonMenuButtonElement>;
|
||||||
'ion-menu-controller': LocalJSX.IonMenuController & JSXBase.HTMLAttributes<HTMLIonMenuControllerElement>;
|
|
||||||
'ion-menu-toggle': LocalJSX.IonMenuToggle & JSXBase.HTMLAttributes<HTMLIonMenuToggleElement>;
|
'ion-menu-toggle': LocalJSX.IonMenuToggle & JSXBase.HTMLAttributes<HTMLIonMenuToggleElement>;
|
||||||
'ion-modal': LocalJSX.IonModal & JSXBase.HTMLAttributes<HTMLIonModalElement>;
|
'ion-modal': LocalJSX.IonModal & JSXBase.HTMLAttributes<HTMLIonModalElement>;
|
||||||
'ion-modal-controller': LocalJSX.IonModalController & JSXBase.HTMLAttributes<HTMLIonModalControllerElement>;
|
|
||||||
'ion-nav': LocalJSX.IonNav & JSXBase.HTMLAttributes<HTMLIonNavElement>;
|
'ion-nav': LocalJSX.IonNav & JSXBase.HTMLAttributes<HTMLIonNavElement>;
|
||||||
'ion-nav-link': LocalJSX.IonNavLink & JSXBase.HTMLAttributes<HTMLIonNavLinkElement>;
|
'ion-nav-link': LocalJSX.IonNavLink & JSXBase.HTMLAttributes<HTMLIonNavLinkElement>;
|
||||||
'ion-note': LocalJSX.IonNote & JSXBase.HTMLAttributes<HTMLIonNoteElement>;
|
'ion-note': LocalJSX.IonNote & JSXBase.HTMLAttributes<HTMLIonNoteElement>;
|
||||||
'ion-picker': LocalJSX.IonPicker & JSXBase.HTMLAttributes<HTMLIonPickerElement>;
|
'ion-picker': LocalJSX.IonPicker & JSXBase.HTMLAttributes<HTMLIonPickerElement>;
|
||||||
'ion-picker-column': LocalJSX.IonPickerColumn & JSXBase.HTMLAttributes<HTMLIonPickerColumnElement>;
|
'ion-picker-column': LocalJSX.IonPickerColumn & JSXBase.HTMLAttributes<HTMLIonPickerColumnElement>;
|
||||||
'ion-picker-controller': LocalJSX.IonPickerController & JSXBase.HTMLAttributes<HTMLIonPickerControllerElement>;
|
|
||||||
'ion-popover': LocalJSX.IonPopover & JSXBase.HTMLAttributes<HTMLIonPopoverElement>;
|
'ion-popover': LocalJSX.IonPopover & JSXBase.HTMLAttributes<HTMLIonPopoverElement>;
|
||||||
'ion-popover-controller': LocalJSX.IonPopoverController & JSXBase.HTMLAttributes<HTMLIonPopoverControllerElement>;
|
|
||||||
'ion-progress-bar': LocalJSX.IonProgressBar & JSXBase.HTMLAttributes<HTMLIonProgressBarElement>;
|
'ion-progress-bar': LocalJSX.IonProgressBar & JSXBase.HTMLAttributes<HTMLIonProgressBarElement>;
|
||||||
'ion-radio': LocalJSX.IonRadio & JSXBase.HTMLAttributes<HTMLIonRadioElement>;
|
'ion-radio': LocalJSX.IonRadio & JSXBase.HTMLAttributes<HTMLIonRadioElement>;
|
||||||
'ion-radio-group': LocalJSX.IonRadioGroup & JSXBase.HTMLAttributes<HTMLIonRadioGroupElement>;
|
'ion-radio-group': LocalJSX.IonRadioGroup & JSXBase.HTMLAttributes<HTMLIonRadioGroupElement>;
|
||||||
@ -6314,7 +6040,6 @@ declare module "@stencil/core" {
|
|||||||
'ion-thumbnail': LocalJSX.IonThumbnail & JSXBase.HTMLAttributes<HTMLIonThumbnailElement>;
|
'ion-thumbnail': LocalJSX.IonThumbnail & JSXBase.HTMLAttributes<HTMLIonThumbnailElement>;
|
||||||
'ion-title': LocalJSX.IonTitle & JSXBase.HTMLAttributes<HTMLIonTitleElement>;
|
'ion-title': LocalJSX.IonTitle & JSXBase.HTMLAttributes<HTMLIonTitleElement>;
|
||||||
'ion-toast': LocalJSX.IonToast & JSXBase.HTMLAttributes<HTMLIonToastElement>;
|
'ion-toast': LocalJSX.IonToast & JSXBase.HTMLAttributes<HTMLIonToastElement>;
|
||||||
'ion-toast-controller': LocalJSX.IonToastController & JSXBase.HTMLAttributes<HTMLIonToastControllerElement>;
|
|
||||||
'ion-toggle': LocalJSX.IonToggle & JSXBase.HTMLAttributes<HTMLIonToggleElement>;
|
'ion-toggle': LocalJSX.IonToggle & JSXBase.HTMLAttributes<HTMLIonToggleElement>;
|
||||||
'ion-toolbar': LocalJSX.IonToolbar & JSXBase.HTMLAttributes<HTMLIonToolbarElement>;
|
'ion-toolbar': LocalJSX.IonToolbar & JSXBase.HTMLAttributes<HTMLIonToolbarElement>;
|
||||||
'ion-virtual-scroll': LocalJSX.IonVirtualScroll & JSXBase.HTMLAttributes<HTMLIonVirtualScrollElement>;
|
'ion-virtual-scroll': LocalJSX.IonVirtualScroll & JSXBase.HTMLAttributes<HTMLIonVirtualScrollElement>;
|
||||||
|
|||||||
@ -1,54 +0,0 @@
|
|||||||
import { Build, Component, ComponentInterface, Method } from '@stencil/core';
|
|
||||||
|
|
||||||
import { ActionSheetOptions, OverlayController } from '../../interface';
|
|
||||||
import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @deprecated Use the `actionSheetController` exported from core.
|
|
||||||
*/
|
|
||||||
@Component({
|
|
||||||
tag: 'ion-action-sheet-controller'
|
|
||||||
})
|
|
||||||
export class ActionSheetController implements ComponentInterface, OverlayController {
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
if (Build.isDev) {
|
|
||||||
console.warn(`[DEPRECATED][ion-action-sheet-controller] Use the actionSheetController export from @ionic/core:
|
|
||||||
import { actionSheetController } from '@ionic/core';
|
|
||||||
const actionSheet = await actionSheetController.create({...});`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Create an action sheet overlay with action sheet options.
|
|
||||||
*
|
|
||||||
* @param options The options to use to create the action sheet.
|
|
||||||
*/
|
|
||||||
@Method()
|
|
||||||
create(options: ActionSheetOptions): Promise<HTMLIonActionSheetElement> {
|
|
||||||
return createOverlay('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) {
|
|
||||||
return dismissOverlay(document, data, role, 'ion-action-sheet', id);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get the most recently opened action sheet overlay.
|
|
||||||
*/
|
|
||||||
@Method()
|
|
||||||
async getTop(): Promise<HTMLIonActionSheetElement | undefined> {
|
|
||||||
return getOverlay(document, 'ion-action-sheet') as HTMLIonActionSheetElement;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,45 +0,0 @@
|
|||||||
# ion-action-sheet-controller
|
|
||||||
|
|
||||||
Action Sheet controllers programmatically control the action sheet component. Action Sheets can be created and dismissed from the action sheet controller. View the [Action Sheet](../action-sheet) documentation for a full list of options to pass upon creation.
|
|
||||||
|
|
||||||
<!-- Auto Generated Below -->
|
|
||||||
|
|
||||||
|
|
||||||
> **[DEPRECATED]** Use the `actionSheetController` exported from core.
|
|
||||||
|
|
||||||
## Methods
|
|
||||||
|
|
||||||
### `create(options: ActionSheetOptions) => Promise<HTMLIonActionSheetElement>`
|
|
||||||
|
|
||||||
Create an action sheet overlay with action sheet options.
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
Type: `Promise<HTMLIonActionSheetElement>`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### `dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>`
|
|
||||||
|
|
||||||
Dismiss the open action sheet overlay.
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
Type: `Promise<boolean>`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### `getTop() => Promise<HTMLIonActionSheetElement | undefined>`
|
|
||||||
|
|
||||||
Get the most recently opened action sheet overlay.
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
Type: `Promise<HTMLIonActionSheetElement | undefined>`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
----------------------------------------------
|
|
||||||
|
|
||||||
*Built with [StencilJS](https://stenciljs.com/)*
|
|
||||||
@ -10,6 +10,10 @@
|
|||||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||||
|
<script type="module">
|
||||||
|
import { actionSheetController } from '../../../../dist/ionic/index.esm.js';
|
||||||
|
window.actionSheetController = actionSheetController;
|
||||||
|
</script>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<ion-app>
|
<ion-app>
|
||||||
@ -57,11 +61,14 @@
|
|||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
window.addEventListener('ionActionSheetDidDismiss', function (e) { console.log('didDismiss', e) })
|
window.addEventListener('ionActionSheetDidDismiss', function (e) { console.log('didDismiss', e) })
|
||||||
|
async function openActionSheet(opts) {
|
||||||
|
const actionSheet = await actionSheetController.create(opts);
|
||||||
|
await actionSheet.present();
|
||||||
|
}
|
||||||
|
|
||||||
async function presentBasic() {
|
async function presentBasic() {
|
||||||
const mode = Ionic.mode;
|
const mode = Ionic.mode;
|
||||||
|
await openActionSheet({
|
||||||
const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
|
|
||||||
header: "Albums",
|
header: "Albums",
|
||||||
buttons: [{
|
buttons: [{
|
||||||
text: 'Delete',
|
text: 'Delete',
|
||||||
@ -98,12 +105,10 @@
|
|||||||
}
|
}
|
||||||
}]
|
}]
|
||||||
});
|
});
|
||||||
document.body.append(actionSheetElement);
|
|
||||||
await actionSheetElement.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function presentAlert() {
|
async function presentAlert() {
|
||||||
const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
|
await openActionSheet({
|
||||||
buttons: [{
|
buttons: [{
|
||||||
text: 'Open Alert',
|
text: 'Open Alert',
|
||||||
handler: async () => {
|
handler: async () => {
|
||||||
@ -114,7 +119,7 @@
|
|||||||
buttons: [{
|
buttons: [{
|
||||||
text: 'Okay',
|
text: 'Okay',
|
||||||
handler: async () => {
|
handler: async () => {
|
||||||
await actionSheetElement.dismiss();
|
await actionSheetController.dismiss();
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
}]
|
}]
|
||||||
@ -131,12 +136,10 @@
|
|||||||
}
|
}
|
||||||
}]
|
}]
|
||||||
});
|
});
|
||||||
document.body.append(actionSheetElement);
|
|
||||||
await actionSheetElement.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function presentCancelOnly() {
|
async function presentCancelOnly() {
|
||||||
const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
|
await openActionSheet({
|
||||||
buttons: [
|
buttons: [
|
||||||
{
|
{
|
||||||
text: 'Cancel',
|
text: 'Cancel',
|
||||||
@ -147,16 +150,12 @@
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
document.body.append(actionSheetElement);
|
|
||||||
await actionSheetElement.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function presentWithCssClass(classList) {
|
async function presentWithCssClass(classList) {
|
||||||
const addClass = classList ? classList : "my-color-class my-custom-class";
|
await openActionSheet({
|
||||||
|
|
||||||
const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
|
|
||||||
header: "Custom Css Class",
|
header: "Custom Css Class",
|
||||||
cssClass: addClass,
|
cssClass: classList ? classList : "my-color-class my-custom-class",
|
||||||
buttons: [
|
buttons: [
|
||||||
{
|
{
|
||||||
text: 'Add to Favorites',
|
text: 'Add to Favorites',
|
||||||
@ -197,14 +196,10 @@
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
document.body.append(actionSheetElement);
|
|
||||||
await actionSheetElement.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function presentIcons() {
|
async function presentIcons() {
|
||||||
const mode = Ionic.mode;
|
await openActionSheet({
|
||||||
|
|
||||||
const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
|
|
||||||
header: "Albums",
|
header: "Albums",
|
||||||
buttons: [{
|
buttons: [{
|
||||||
text: 'Delete',
|
text: 'Delete',
|
||||||
@ -241,12 +236,10 @@
|
|||||||
}
|
}
|
||||||
}]
|
}]
|
||||||
});
|
});
|
||||||
document.body.append(actionSheetElement);
|
|
||||||
await actionSheetElement.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function presentNoBackdropDismiss() {
|
async function presentNoBackdropDismiss() {
|
||||||
const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
|
await openActionSheet({
|
||||||
backdropDismiss: false,
|
backdropDismiss: false,
|
||||||
buttons: [{
|
buttons: [{
|
||||||
text: 'Archive',
|
text: 'Archive',
|
||||||
@ -267,12 +260,10 @@
|
|||||||
}
|
}
|
||||||
}]
|
}]
|
||||||
});
|
});
|
||||||
document.body.append(actionSheetElement);
|
|
||||||
await actionSheetElement.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function presentScroll() {
|
async function presentScroll() {
|
||||||
const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
|
await openActionSheet({
|
||||||
buttons: [
|
buttons: [
|
||||||
{
|
{
|
||||||
text: 'Add Reaction',
|
text: 'Add Reaction',
|
||||||
@ -360,12 +351,10 @@
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
document.body.append(actionSheetElement);
|
|
||||||
await actionSheetElement.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function presentScrollNoCancel() {
|
async function presentScrollNoCancel() {
|
||||||
const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
|
await openActionSheet({
|
||||||
buttons: [
|
buttons: [
|
||||||
{
|
{
|
||||||
text: 'Add Reaction',
|
text: 'Add Reaction',
|
||||||
@ -431,8 +420,6 @@
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
document.body.append(actionSheetElement);
|
|
||||||
await actionSheetElement.present();
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -10,7 +10,10 @@
|
|||||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||||
|
<script type="module">
|
||||||
|
import { actionSheetController } from '../../../../dist/ionic/index.esm.js';
|
||||||
|
window.actionSheetController = actionSheetController;
|
||||||
|
</script>
|
||||||
<body>
|
<body>
|
||||||
<ion-app>
|
<ion-app>
|
||||||
|
|
||||||
@ -31,8 +34,7 @@
|
|||||||
|
|
||||||
async function presentSpec() {
|
async function presentSpec() {
|
||||||
const mode = Ionic.mode;
|
const mode = Ionic.mode;
|
||||||
|
const actionSheet = await actionSheetController.create({
|
||||||
const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
|
|
||||||
header: "Open in",
|
header: "Open in",
|
||||||
buttons: [{
|
buttons: [{
|
||||||
text: 'Item 1',
|
text: 'Item 1',
|
||||||
@ -66,8 +68,7 @@
|
|||||||
}
|
}
|
||||||
}]
|
}]
|
||||||
});
|
});
|
||||||
document.body.appendChild(actionSheetElement);
|
await actionSheet.present();
|
||||||
await actionSheetElement.present();
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -10,7 +10,10 @@
|
|||||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||||
|
<script type="module">
|
||||||
|
import { actionSheetController } from '../../../../dist/ionic/index.esm.js';
|
||||||
|
window.actionSheetController = actionSheetController;
|
||||||
|
</script>
|
||||||
<body>
|
<body>
|
||||||
<button id="basic" onclick="presentBasic()">Basic</button>
|
<button id="basic" onclick="presentBasic()">Basic</button>
|
||||||
<button id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</button>
|
<button id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</button>
|
||||||
@ -37,8 +40,13 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
window.addEventListener('ionActionSheetDidDismiss', function(e){console.log('didDismiss', e)})
|
window.addEventListener('ionActionSheetDidDismiss', function(e){console.log('didDismiss', e)})
|
||||||
|
async function openActionSheet(opts) {
|
||||||
|
const actionSheet = await actionSheetController.create(opts);
|
||||||
|
await actionSheet.present();
|
||||||
|
}
|
||||||
|
|
||||||
function presentBasic() {
|
function presentBasic() {
|
||||||
const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
|
openActionSheet({
|
||||||
header: "Albums",
|
header: "Albums",
|
||||||
buttons: [{
|
buttons: [{
|
||||||
text: 'Delete',
|
text: 'Delete',
|
||||||
@ -74,14 +82,10 @@
|
|||||||
}
|
}
|
||||||
}]
|
}]
|
||||||
});
|
});
|
||||||
document.body.appendChild(actionSheetElement);
|
|
||||||
return actionSheetElement.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function presentIcons() {
|
function presentIcons() {
|
||||||
const mode = Ionic.mode;
|
openActionSheet({
|
||||||
|
|
||||||
const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
|
|
||||||
header: "Albums",
|
header: "Albums",
|
||||||
buttons: [{
|
buttons: [{
|
||||||
text: 'Delete',
|
text: 'Delete',
|
||||||
@ -117,12 +121,10 @@
|
|||||||
}
|
}
|
||||||
}]
|
}]
|
||||||
});
|
});
|
||||||
document.body.appendChild(actionSheetElement);
|
|
||||||
return actionSheetElement.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function presentNoBackdropDismiss() {
|
function presentNoBackdropDismiss() {
|
||||||
const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
|
openActionSheet({
|
||||||
buttons: [{
|
buttons: [{
|
||||||
text: 'Archive',
|
text: 'Archive',
|
||||||
handler: () => {
|
handler: () => {
|
||||||
@ -142,12 +144,10 @@
|
|||||||
}
|
}
|
||||||
}]
|
}]
|
||||||
});
|
});
|
||||||
document.body.appendChild(actionSheetElement);
|
|
||||||
return actionSheetElement.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function presentAlert() {
|
function presentAlert() {
|
||||||
const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
|
openActionSheet({
|
||||||
buttons: [{
|
buttons: [{
|
||||||
text: 'Open Alert',
|
text: 'Open Alert',
|
||||||
handler: () => {
|
handler: () => {
|
||||||
@ -161,12 +161,10 @@
|
|||||||
}
|
}
|
||||||
}]
|
}]
|
||||||
});
|
});
|
||||||
document.body.appendChild(actionSheetElement);
|
|
||||||
return actionSheetElement.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function presentScroll() {
|
function presentScroll() {
|
||||||
const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
|
openActionSheet({
|
||||||
buttons: [
|
buttons: [
|
||||||
{
|
{
|
||||||
text: 'Add Reaction',
|
text: 'Add Reaction',
|
||||||
@ -238,12 +236,10 @@
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
document.body.appendChild(actionSheetElement);
|
|
||||||
return actionSheetElement.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function presentScrollNoCancel() {
|
function presentScrollNoCancel() {
|
||||||
const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
|
openActionSheet({
|
||||||
buttons: [
|
buttons: [
|
||||||
{
|
{
|
||||||
text: 'Add Reaction',
|
text: 'Add Reaction',
|
||||||
@ -309,12 +305,10 @@
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
document.body.appendChild(actionSheetElement);
|
|
||||||
return actionSheetElement.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function presentCancelOnly() {
|
function presentCancelOnly() {
|
||||||
const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
|
openActionSheet({
|
||||||
buttons: [
|
buttons: [
|
||||||
{
|
{
|
||||||
text: 'Cancel',
|
text: 'Cancel',
|
||||||
@ -325,12 +319,10 @@
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
document.body.append(actionSheetElement);
|
|
||||||
return actionSheetElement.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function presentWithCssClass() {
|
function presentWithCssClass() {
|
||||||
const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
|
openActionSheet({
|
||||||
header: "Custom Css Class",
|
header: "Custom Css Class",
|
||||||
cssClass: "my-class my-custom-class",
|
cssClass: "my-class my-custom-class",
|
||||||
buttons: [
|
buttons: [
|
||||||
@ -344,8 +336,6 @@
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
document.body.appendChild(actionSheetElement);
|
|
||||||
return actionSheetElement.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -10,7 +10,10 @@
|
|||||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||||
|
<script type="module">
|
||||||
|
import { actionSheetController } from '../../../../dist/ionic/index.esm.js';
|
||||||
|
window.actionSheetController = actionSheetController;
|
||||||
|
</script>
|
||||||
<body>
|
<body>
|
||||||
<ion-app>
|
<ion-app>
|
||||||
|
|
||||||
@ -47,11 +50,14 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
async function openActionSheet(opts) {
|
||||||
|
const actionSheet = await actionSheetController.create(opts);
|
||||||
|
await actionSheet.present();
|
||||||
|
}
|
||||||
|
|
||||||
async function presentBasic() {
|
async function presentBasic() {
|
||||||
var mode = Ionic.mode;
|
var mode = Ionic.mode;
|
||||||
|
await openActionSheet({
|
||||||
const actionSheetController = document.querySelector('ion-action-sheet-controller');
|
|
||||||
const actionSheetElement = await actionSheetController.create({
|
|
||||||
header: "Albums",
|
header: "Albums",
|
||||||
buttons: [{
|
buttons: [{
|
||||||
text: 'Delete',
|
text: 'Delete',
|
||||||
@ -87,13 +93,11 @@
|
|||||||
}
|
}
|
||||||
}],
|
}],
|
||||||
translucent: true
|
translucent: true
|
||||||
})
|
});
|
||||||
await actionSheetElement.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function presentNoBackdropDismiss() {
|
async function presentNoBackdropDismiss() {
|
||||||
const actionSheetController = document.querySelector('ion-action-sheet-controller');
|
await openActionSheet({
|
||||||
const actionSheetElement = await actionSheetController.create({
|
|
||||||
backdropDismiss: false,
|
backdropDismiss: false,
|
||||||
buttons: [{
|
buttons: [{
|
||||||
text: 'Archive',
|
text: 'Archive',
|
||||||
@ -115,12 +119,10 @@
|
|||||||
}],
|
}],
|
||||||
translucent: true
|
translucent: true
|
||||||
});
|
});
|
||||||
return await actionSheetElement.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function presentAlert() {
|
async function presentAlert() {
|
||||||
const actionSheetController = document.querySelector('ion-action-sheet-controller');
|
await openActionSheet({
|
||||||
const actionSheetElement = await actionSheetController.create({
|
|
||||||
buttons: [{
|
buttons: [{
|
||||||
text: 'Open Alert',
|
text: 'Open Alert',
|
||||||
handler: () => {
|
handler: () => {
|
||||||
@ -135,12 +137,10 @@
|
|||||||
}],
|
}],
|
||||||
translucent: true
|
translucent: true
|
||||||
});
|
});
|
||||||
return await actionSheetElement.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function presentScroll() {
|
async function presentScroll() {
|
||||||
const actionSheetController = document.querySelector('ion-action-sheet-controller');
|
await openActionSheet({
|
||||||
const actionSheetElement = await actionSheetController.create({
|
|
||||||
buttons: [
|
buttons: [
|
||||||
{
|
{
|
||||||
text: 'Add Reaction',
|
text: 'Add Reaction',
|
||||||
@ -215,12 +215,10 @@
|
|||||||
],
|
],
|
||||||
translucent: true
|
translucent: true
|
||||||
});
|
});
|
||||||
return await actionSheetElement.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function presentScrollNoCancel() {
|
async function presentScrollNoCancel() {
|
||||||
const actionSheetController = document.querySelector('ion-action-sheet-controller');
|
await openActionSheet({
|
||||||
const actionSheetElement = await actionSheetController.create({
|
|
||||||
buttons: [
|
buttons: [
|
||||||
{
|
{
|
||||||
text: 'Add Reaction',
|
text: 'Add Reaction',
|
||||||
@ -287,12 +285,10 @@
|
|||||||
],
|
],
|
||||||
translucent: true
|
translucent: true
|
||||||
});
|
});
|
||||||
return await actionSheetElement.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function presentCancelOnly() {
|
async function presentCancelOnly() {
|
||||||
const actionSheetController = document.querySelector('ion-action-sheet-controller');
|
await openActionSheet({
|
||||||
const actionSheetElement = await actionSheetController.create({
|
|
||||||
buttons: [
|
buttons: [
|
||||||
{
|
{
|
||||||
text: 'Cancel',
|
text: 'Cancel',
|
||||||
@ -304,7 +300,6 @@
|
|||||||
],
|
],
|
||||||
translucent: true
|
translucent: true
|
||||||
});
|
});
|
||||||
return await actionSheetElement.present();
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@ -1,54 +0,0 @@
|
|||||||
import { Build, Component, ComponentInterface, Method } from '@stencil/core';
|
|
||||||
|
|
||||||
import { AlertOptions, OverlayController } from '../../interface';
|
|
||||||
import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @deprecated Use the `alertController` exported from core.
|
|
||||||
*/
|
|
||||||
@Component({
|
|
||||||
tag: 'ion-alert-controller'
|
|
||||||
})
|
|
||||||
export class AlertController implements ComponentInterface, OverlayController {
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
if (Build.isDev) {
|
|
||||||
console.warn(`[DEPRECATED][ion-alert-controller] Use the alertController export from @ionic/core:
|
|
||||||
import { alertController } from '@ionic/core';
|
|
||||||
const alert = await alertController.create({...});`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Create an alert overlay with alert options.
|
|
||||||
*
|
|
||||||
* @param options The options to use to create the alert.
|
|
||||||
*/
|
|
||||||
@Method()
|
|
||||||
create(options: AlertOptions): Promise<HTMLIonAlertElement> {
|
|
||||||
return createOverlay('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) {
|
|
||||||
return dismissOverlay(document, data, role, 'ion-alert', id);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get the most recently opened alert overlay.
|
|
||||||
*/
|
|
||||||
@Method()
|
|
||||||
async getTop(): Promise<HTMLIonAlertElement | undefined> {
|
|
||||||
return getOverlay(document, 'ion-alert') as HTMLIonAlertElement;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,46 +0,0 @@
|
|||||||
# ion-alert-controller
|
|
||||||
|
|
||||||
Alert controllers programmatically control the alert component. Alerts can be created and dismissed by the alert controller. View the [Alert](../alert) documentation for the list of options to pass upon creation and usage information.
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Auto Generated Below -->
|
|
||||||
|
|
||||||
|
|
||||||
> **[DEPRECATED]** Use the `alertController` exported from core.
|
|
||||||
|
|
||||||
## Methods
|
|
||||||
|
|
||||||
### `create(options: AlertOptions) => Promise<HTMLIonAlertElement>`
|
|
||||||
|
|
||||||
Create an alert overlay with alert options.
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
Type: `Promise<HTMLIonAlertElement>`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### `dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>`
|
|
||||||
|
|
||||||
Dismiss the open alert overlay.
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
Type: `Promise<boolean>`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### `getTop() => Promise<HTMLIonAlertElement | undefined>`
|
|
||||||
|
|
||||||
Get the most recently opened alert overlay.
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
Type: `Promise<HTMLIonAlertElement | undefined>`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
----------------------------------------------
|
|
||||||
|
|
||||||
*Built with [StencilJS](https://stenciljs.com/)*
|
|
||||||
@ -10,6 +10,10 @@
|
|||||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||||
|
<script type="module">
|
||||||
|
import { alertController } from '../../../../dist/ionic/index.esm.js';
|
||||||
|
window.alertController = alertController;
|
||||||
|
</script>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<ion-app>
|
<ion-app>
|
||||||
@ -45,50 +49,45 @@
|
|||||||
|
|
||||||
window.addEventListener('ionAlertDidDismiss', function (e) { console.log('didDismiss', e) })
|
window.addEventListener('ionAlertDidDismiss', function (e) { console.log('didDismiss', e) })
|
||||||
window.addEventListener('ionAlertWillDismiss', function (e) { console.log('willDismiss', e) })
|
window.addEventListener('ionAlertWillDismiss', function (e) { console.log('willDismiss', e) })
|
||||||
|
async function openAlert(opts) {
|
||||||
|
const alert = await alertController.create(opts);
|
||||||
|
await alert.present();
|
||||||
|
}
|
||||||
function presentAlert() {
|
function presentAlert() {
|
||||||
const alert = Object.assign(document.createElement('ion-alert'), {
|
openAlert({
|
||||||
header: 'Alert',
|
header: 'Alert',
|
||||||
subHeader: 'Subtitle',
|
subHeader: 'Subtitle',
|
||||||
message: 'This is an alert message.',
|
message: 'This is an alert message.',
|
||||||
buttons: ['OK']
|
buttons: ['OK']
|
||||||
});
|
});
|
||||||
document.body.append(alert);
|
|
||||||
return alert.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function presentAlertLongMessage() {
|
function presentAlertLongMessage() {
|
||||||
const alert = Object.assign(document.createElement('ion-alert'), {
|
openAlert({
|
||||||
header: 'Alert',
|
header: 'Alert',
|
||||||
message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit diam lorem, a faucibus turpis sagittis eu. In finibus augue in dui varius convallis. Donec vulputate nibh gravida odio vulputate commodo. Suspendisse imperdiet consequat egestas. Nulla feugiat consequat urna eu tincidunt. Cras nec blandit turpis, eu auctor nunc. Pellentesque finibus, magna eu vestibulum imperdiet, arcu ex lacinia massa, eget volutpat quam leo a orci. Etiam mauris est, elementum at feugiat at, dictum in sapien. Mauris efficitur eros sodales convallis egestas. Phasellus eu faucibus nisl. In eu diam vitae libero egestas lacinia. Integer sed convallis metus, nec commodo felis. Duis libero augue, ornare at tempus non, posuere vel augue. Cras mattis dui at tristique aliquam. Phasellus fermentum nibh ligula, porta hendrerit ligula elementum eu. Suspendisse sollicitudin enim at libero iaculis pulvinar. Donec ac massa id purus laoreet rutrum quis eu urna. Mauris luctus erat vel magna porttitor, vel varius erat rhoncus. Donec eu turpis vestibulum, feugiat urna id, gravida mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at lobortis tortor. Nam ultrices volutpat elit, sed pharetra nulla suscipit at. Nunc eu accumsan eros, id auctor libero. Suspendisse potenti. Nam vitae dapibus metus. Maecenas nisi dui, sagittis et condimentum eu, bibendum vel eros. Vivamus malesuada, tortor in accumsan iaculis, urna velit consectetur ante, nec semper sem diam a diam. In et semper ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit, velit vel porttitor euismod, neque risus blandit nulla, non laoreet libero dolor et odio. Nulla enim risus, feugiat eu urna sed, ultrices semper felis. Sed blandit mi diam. Nunc quis mi ligula. Pellentesque a elit eu orci volutpat egestas. Aenean fermentum eleifend quam, ut tincidunt eros tristique et. Nam dapibus tincidunt ligula, id faucibus felis sodales quis. Donec tincidunt lectus ipsum, ac semper tellus cursus ac. Vestibulum nec dui a lectus accumsan vestibulum quis et velit. Aliquam finibus justo et odio euismod, viverra condimentum eros tristique. Sed eget luctus risus. Pellentesque lorem magna, dictum non congue sodales, laoreet eget quam. In sagittis vulputate dolor a ultricies. Donec viverra leo sed ex maximus, in finibus elit gravida. Aliquam posuere vulputate mi. Suspendisse potenti. Nunc consectetur congue arcu, at pharetra dui varius non. Etiam vestibulum congue felis, id ullamcorper neque convallis ultrices. Aenean congue, diam a iaculis mollis, nisl eros maximus arcu, nec hendrerit purus felis porta diam. Nullam vitae ultrices dui, ac dictum sapien. Phasellus eu magna luctus, varius urna id, molestie quam. Nulla in semper tellus. Curabitur lacinia tellus sit amet lacinia dapibus. Sed id condimentum tellus, nec aliquam sapien. Vivamus luctus at ante a tincidunt.',
|
message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit diam lorem, a faucibus turpis sagittis eu. In finibus augue in dui varius convallis. Donec vulputate nibh gravida odio vulputate commodo. Suspendisse imperdiet consequat egestas. Nulla feugiat consequat urna eu tincidunt. Cras nec blandit turpis, eu auctor nunc. Pellentesque finibus, magna eu vestibulum imperdiet, arcu ex lacinia massa, eget volutpat quam leo a orci. Etiam mauris est, elementum at feugiat at, dictum in sapien. Mauris efficitur eros sodales convallis egestas. Phasellus eu faucibus nisl. In eu diam vitae libero egestas lacinia. Integer sed convallis metus, nec commodo felis. Duis libero augue, ornare at tempus non, posuere vel augue. Cras mattis dui at tristique aliquam. Phasellus fermentum nibh ligula, porta hendrerit ligula elementum eu. Suspendisse sollicitudin enim at libero iaculis pulvinar. Donec ac massa id purus laoreet rutrum quis eu urna. Mauris luctus erat vel magna porttitor, vel varius erat rhoncus. Donec eu turpis vestibulum, feugiat urna id, gravida mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at lobortis tortor. Nam ultrices volutpat elit, sed pharetra nulla suscipit at. Nunc eu accumsan eros, id auctor libero. Suspendisse potenti. Nam vitae dapibus metus. Maecenas nisi dui, sagittis et condimentum eu, bibendum vel eros. Vivamus malesuada, tortor in accumsan iaculis, urna velit consectetur ante, nec semper sem diam a diam. In et semper ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit, velit vel porttitor euismod, neque risus blandit nulla, non laoreet libero dolor et odio. Nulla enim risus, feugiat eu urna sed, ultrices semper felis. Sed blandit mi diam. Nunc quis mi ligula. Pellentesque a elit eu orci volutpat egestas. Aenean fermentum eleifend quam, ut tincidunt eros tristique et. Nam dapibus tincidunt ligula, id faucibus felis sodales quis. Donec tincidunt lectus ipsum, ac semper tellus cursus ac. Vestibulum nec dui a lectus accumsan vestibulum quis et velit. Aliquam finibus justo et odio euismod, viverra condimentum eros tristique. Sed eget luctus risus. Pellentesque lorem magna, dictum non congue sodales, laoreet eget quam. In sagittis vulputate dolor a ultricies. Donec viverra leo sed ex maximus, in finibus elit gravida. Aliquam posuere vulputate mi. Suspendisse potenti. Nunc consectetur congue arcu, at pharetra dui varius non. Etiam vestibulum congue felis, id ullamcorper neque convallis ultrices. Aenean congue, diam a iaculis mollis, nisl eros maximus arcu, nec hendrerit purus felis porta diam. Nullam vitae ultrices dui, ac dictum sapien. Phasellus eu magna luctus, varius urna id, molestie quam. Nulla in semper tellus. Curabitur lacinia tellus sit amet lacinia dapibus. Sed id condimentum tellus, nec aliquam sapien. Vivamus luctus at ante a tincidunt.',
|
||||||
buttons: ['Cancel', 'OK']
|
buttons: ['Cancel', 'OK']
|
||||||
});
|
});
|
||||||
document.body.append(alert);
|
|
||||||
return alert.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function presentAlertMultipleButtons() {
|
function presentAlertMultipleButtons() {
|
||||||
const alert = Object.assign(document.createElement('ion-alert'), {
|
openAlert({
|
||||||
header: 'Alert',
|
header: 'Alert',
|
||||||
subHeader: 'Subtitle',
|
subHeader: 'Subtitle',
|
||||||
message: 'This is an alert message.',
|
message: 'This is an alert message.',
|
||||||
buttons: ['Cancel', 'Open Modal', 'Delete']
|
buttons: ['Cancel', 'Open Modal', 'Delete']
|
||||||
});
|
});
|
||||||
document.body.append(alert);
|
|
||||||
return alert.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function presentAlertNoMessage() {
|
function presentAlertNoMessage() {
|
||||||
const alert = Object.assign(document.createElement('ion-alert'), {
|
openAlert({
|
||||||
header: 'Alert',
|
header: 'Alert',
|
||||||
buttons: ['OK']
|
buttons: ['OK']
|
||||||
});
|
});
|
||||||
document.body.append(alert);
|
|
||||||
return alert.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function presentAlertConfirm() {
|
function presentAlertConfirm() {
|
||||||
const alert = Object.assign(document.createElement('ion-alert'), {
|
openAlert({
|
||||||
header: 'Confirm!',
|
header: 'Confirm!',
|
||||||
message: 'Message <strong>text</strong>!!!',
|
message: 'Message <strong>text</strong>!!!',
|
||||||
buttons: [
|
buttons: [
|
||||||
@ -107,12 +106,10 @@
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
document.body.append(alert);
|
|
||||||
return alert.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function presentAlertPrompt() {
|
function presentAlertPrompt() {
|
||||||
const alert = Object.assign(document.createElement('ion-alert'), {
|
openAlert({
|
||||||
header: 'Prompt!',
|
header: 'Prompt!',
|
||||||
inputs: [
|
inputs: [
|
||||||
{
|
{
|
||||||
@ -182,12 +179,10 @@
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
document.body.append(alert);
|
|
||||||
return alert.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function presentAlertRadio() {
|
function presentAlertRadio() {
|
||||||
const alert = Object.assign(document.createElement('ion-alert'), {
|
openAlert({
|
||||||
header: 'Radio',
|
header: 'Radio',
|
||||||
inputs: [
|
inputs: [
|
||||||
{
|
{
|
||||||
@ -239,12 +234,10 @@
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
document.body.append(alert);
|
|
||||||
return alert.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function presentAlertCheckbox() {
|
function presentAlertCheckbox() {
|
||||||
const alert = Object.assign(document.createElement('ion-alert'), {
|
openAlert({
|
||||||
header: 'Checkbox',
|
header: 'Checkbox',
|
||||||
inputs: [
|
inputs: [
|
||||||
{
|
{
|
||||||
@ -301,12 +294,10 @@
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
document.body.append(alert);
|
|
||||||
return alert.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function presentWithCssClass() {
|
function presentWithCssClass() {
|
||||||
const alert = Object.assign(document.createElement('ion-alert'), {
|
openAlert({
|
||||||
header: 'Alert',
|
header: 'Alert',
|
||||||
subHeader: 'Subtitle',
|
subHeader: 'Subtitle',
|
||||||
cssClass: 'my-class my-custom-class ',
|
cssClass: 'my-class my-custom-class ',
|
||||||
@ -319,8 +310,6 @@
|
|||||||
}
|
}
|
||||||
}]
|
}]
|
||||||
});
|
});
|
||||||
document.body.append(alert);
|
|
||||||
return alert.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -10,6 +10,10 @@
|
|||||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||||
|
<script type="module">
|
||||||
|
import { alertController } from '../../../../dist/ionic/index.esm.js';
|
||||||
|
window.alertController = alertController;
|
||||||
|
</script>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<button id="basic" onclick="presentAlert()">Alert</button>
|
<button id="basic" onclick="presentAlert()">Alert</button>
|
||||||
@ -75,50 +79,45 @@
|
|||||||
<script>
|
<script>
|
||||||
window.addEventListener('ionAlertDidDismiss', function(e){console.log('didDismiss', e)})
|
window.addEventListener('ionAlertDidDismiss', function(e){console.log('didDismiss', e)})
|
||||||
window.addEventListener('ionAlertWillDismiss', function(e){console.log('willDismiss', e)})
|
window.addEventListener('ionAlertWillDismiss', function(e){console.log('willDismiss', e)})
|
||||||
|
async function openAlert(opts) {
|
||||||
|
const alert = await alertController.create(opts);
|
||||||
|
await alert.present();
|
||||||
|
}
|
||||||
function presentAlert() {
|
function presentAlert() {
|
||||||
const alert = Object.assign(document.createElement('ion-alert'), {
|
openAlert({
|
||||||
header: 'Alert',
|
header: 'Alert',
|
||||||
subHeader: 'Subtitle',
|
subHeader: 'Subtitle',
|
||||||
message: 'This is an alert message.',
|
message: 'This is an alert message.',
|
||||||
buttons: ['OK']
|
buttons: ['OK']
|
||||||
});
|
});
|
||||||
document.body.appendChild(alert);
|
|
||||||
return alert.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function presentAlertLongMessage() {
|
function presentAlertLongMessage() {
|
||||||
const alert = Object.assign(document.createElement('ion-alert'), {
|
openAlert({
|
||||||
header: 'Alert',
|
header: 'Alert',
|
||||||
message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit diam lorem, a faucibus turpis sagittis eu. In finibus augue in dui varius convallis. Donec vulputate nibh gravida odio vulputate commodo. Suspendisse imperdiet consequat egestas. Nulla feugiat consequat urna eu tincidunt. Cras nec blandit turpis, eu auctor nunc. Pellentesque finibus, magna eu vestibulum imperdiet, arcu ex lacinia massa, eget volutpat quam leo a orci. Etiam mauris est, elementum at feugiat at, dictum in sapien. Mauris efficitur eros sodales convallis egestas. Phasellus eu faucibus nisl. In eu diam vitae libero egestas lacinia. Integer sed convallis metus, nec commodo felis. Duis libero augue, ornare at tempus non, posuere vel augue. Cras mattis dui at tristique aliquam. Phasellus fermentum nibh ligula, porta hendrerit ligula elementum eu. Suspendisse sollicitudin enim at libero iaculis pulvinar. Donec ac massa id purus laoreet rutrum quis eu urna. Mauris luctus erat vel magna porttitor, vel varius erat rhoncus. Donec eu turpis vestibulum, feugiat urna id, gravida mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at lobortis tortor. Nam ultrices volutpat elit, sed pharetra nulla suscipit at. Nunc eu accumsan eros, id auctor libero. Suspendisse potenti. Nam vitae dapibus metus. Maecenas nisi dui, sagittis et condimentum eu, bibendum vel eros. Vivamus malesuada, tortor in accumsan iaculis, urna velit consectetur ante, nec semper sem diam a diam. In et semper ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit, velit vel porttitor euismod, neque risus blandit nulla, non laoreet libero dolor et odio. Nulla enim risus, feugiat eu urna sed, ultrices semper felis. Sed blandit mi diam. Nunc quis mi ligula. Pellentesque a elit eu orci volutpat egestas. Aenean fermentum eleifend quam, ut tincidunt eros tristique et. Nam dapibus tincidunt ligula, id faucibus felis sodales quis. Donec tincidunt lectus ipsum, ac semper tellus cursus ac. Vestibulum nec dui a lectus accumsan vestibulum quis et velit. Aliquam finibus justo et odio euismod, viverra condimentum eros tristique. Sed eget luctus risus. Pellentesque lorem magna, dictum non congue sodales, laoreet eget quam. In sagittis vulputate dolor a ultricies. Donec viverra leo sed ex maximus, in finibus elit gravida. Aliquam posuere vulputate mi. Suspendisse potenti. Nunc consectetur congue arcu, at pharetra dui varius non. Etiam vestibulum congue felis, id ullamcorper neque convallis ultrices. Aenean congue, diam a iaculis mollis, nisl eros maximus arcu, nec hendrerit purus felis porta diam. Nullam vitae ultrices dui, ac dictum sapien. Phasellus eu magna luctus, varius urna id, molestie quam. Nulla in semper tellus. Curabitur lacinia tellus sit amet lacinia dapibus. Sed id condimentum tellus, nec aliquam sapien. Vivamus luctus at ante a tincidunt.',
|
message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit diam lorem, a faucibus turpis sagittis eu. In finibus augue in dui varius convallis. Donec vulputate nibh gravida odio vulputate commodo. Suspendisse imperdiet consequat egestas. Nulla feugiat consequat urna eu tincidunt. Cras nec blandit turpis, eu auctor nunc. Pellentesque finibus, magna eu vestibulum imperdiet, arcu ex lacinia massa, eget volutpat quam leo a orci. Etiam mauris est, elementum at feugiat at, dictum in sapien. Mauris efficitur eros sodales convallis egestas. Phasellus eu faucibus nisl. In eu diam vitae libero egestas lacinia. Integer sed convallis metus, nec commodo felis. Duis libero augue, ornare at tempus non, posuere vel augue. Cras mattis dui at tristique aliquam. Phasellus fermentum nibh ligula, porta hendrerit ligula elementum eu. Suspendisse sollicitudin enim at libero iaculis pulvinar. Donec ac massa id purus laoreet rutrum quis eu urna. Mauris luctus erat vel magna porttitor, vel varius erat rhoncus. Donec eu turpis vestibulum, feugiat urna id, gravida mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at lobortis tortor. Nam ultrices volutpat elit, sed pharetra nulla suscipit at. Nunc eu accumsan eros, id auctor libero. Suspendisse potenti. Nam vitae dapibus metus. Maecenas nisi dui, sagittis et condimentum eu, bibendum vel eros. Vivamus malesuada, tortor in accumsan iaculis, urna velit consectetur ante, nec semper sem diam a diam. In et semper ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit, velit vel porttitor euismod, neque risus blandit nulla, non laoreet libero dolor et odio. Nulla enim risus, feugiat eu urna sed, ultrices semper felis. Sed blandit mi diam. Nunc quis mi ligula. Pellentesque a elit eu orci volutpat egestas. Aenean fermentum eleifend quam, ut tincidunt eros tristique et. Nam dapibus tincidunt ligula, id faucibus felis sodales quis. Donec tincidunt lectus ipsum, ac semper tellus cursus ac. Vestibulum nec dui a lectus accumsan vestibulum quis et velit. Aliquam finibus justo et odio euismod, viverra condimentum eros tristique. Sed eget luctus risus. Pellentesque lorem magna, dictum non congue sodales, laoreet eget quam. In sagittis vulputate dolor a ultricies. Donec viverra leo sed ex maximus, in finibus elit gravida. Aliquam posuere vulputate mi. Suspendisse potenti. Nunc consectetur congue arcu, at pharetra dui varius non. Etiam vestibulum congue felis, id ullamcorper neque convallis ultrices. Aenean congue, diam a iaculis mollis, nisl eros maximus arcu, nec hendrerit purus felis porta diam. Nullam vitae ultrices dui, ac dictum sapien. Phasellus eu magna luctus, varius urna id, molestie quam. Nulla in semper tellus. Curabitur lacinia tellus sit amet lacinia dapibus. Sed id condimentum tellus, nec aliquam sapien. Vivamus luctus at ante a tincidunt.',
|
||||||
buttons: ['Cancel', 'OK']
|
buttons: ['Cancel', 'OK']
|
||||||
});
|
});
|
||||||
document.body.appendChild(alert);
|
|
||||||
return alert.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function presentAlertMultipleButtons() {
|
function presentAlertMultipleButtons() {
|
||||||
const alert = Object.assign(document.createElement('ion-alert'), {
|
openAlert({
|
||||||
header: 'Alert',
|
header: 'Alert',
|
||||||
subHeader: 'Subtitle',
|
subHeader: 'Subtitle',
|
||||||
message: 'This is an alert message.',
|
message: 'This is an alert message.',
|
||||||
buttons: ['Cancel', 'Open Modal', 'Delete']
|
buttons: ['Cancel', 'Open Modal', 'Delete']
|
||||||
});
|
});
|
||||||
document.body.appendChild(alert);
|
|
||||||
return alert.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function presentAlertNoMessage() {
|
function presentAlertNoMessage() {
|
||||||
const alert = Object.assign(document.createElement('ion-alert'), {
|
openAlert({
|
||||||
header: 'Alert',
|
header: 'Alert',
|
||||||
buttons: ['OK']
|
buttons: ['OK']
|
||||||
});
|
});
|
||||||
document.body.appendChild(alert);
|
|
||||||
return alert.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function presentAlertConfirm() {
|
function presentAlertConfirm() {
|
||||||
const alert = Object.assign(document.createElement('ion-alert'), {
|
openAlert({
|
||||||
header: 'Confirm!',
|
header: 'Confirm!',
|
||||||
message: 'Message <strong>text</strong>!!!',
|
message: 'Message <strong>text</strong>!!!',
|
||||||
buttons: [
|
buttons: [
|
||||||
@ -137,12 +136,10 @@
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
document.body.appendChild(alert);
|
|
||||||
return alert.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function presentAlertPrompt() {
|
function presentAlertPrompt() {
|
||||||
const alert = Object.assign(document.createElement('ion-alert'), {
|
openAlert({
|
||||||
header: 'Prompt!',
|
header: 'Prompt!',
|
||||||
inputs: [
|
inputs: [
|
||||||
{
|
{
|
||||||
@ -199,12 +196,10 @@
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
document.body.appendChild(alert);
|
|
||||||
return alert.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function presentAlertRadio() {
|
function presentAlertRadio() {
|
||||||
const alert = Object.assign(document.createElement('ion-alert'), {
|
openAlert({
|
||||||
header: 'Radio',
|
header: 'Radio',
|
||||||
inputs: [
|
inputs: [
|
||||||
{
|
{
|
||||||
@ -255,12 +250,10 @@
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
document.body.appendChild(alert);
|
|
||||||
return alert.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function presentAlertCheckbox() {
|
function presentAlertCheckbox() {
|
||||||
const alert = Object.assign(document.createElement('ion-alert'), {
|
openAlert({
|
||||||
header: 'Checkbox',
|
header: 'Checkbox',
|
||||||
inputs: [
|
inputs: [
|
||||||
{
|
{
|
||||||
@ -316,12 +309,10 @@
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
document.body.appendChild(alert);
|
|
||||||
return alert.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function presentWithCssClass() {
|
function presentWithCssClass() {
|
||||||
const alert = Object.assign(document.createElement('ion-alert'), {
|
openAlert({
|
||||||
header: 'Alert',
|
header: 'Alert',
|
||||||
subHeader: 'Subtitle',
|
subHeader: 'Subtitle',
|
||||||
cssClass: 'my-class my-customClass ',
|
cssClass: 'my-class my-customClass ',
|
||||||
@ -334,8 +325,6 @@
|
|||||||
}
|
}
|
||||||
}]
|
}]
|
||||||
});
|
});
|
||||||
document.body.appendChild(alert);
|
|
||||||
return alert.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -10,6 +10,10 @@
|
|||||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||||
|
<script type="module">
|
||||||
|
import { alertController } from '../../../../dist/ionic/index.esm.js';
|
||||||
|
window.alertController = alertController;
|
||||||
|
</script>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<ion-app>
|
<ion-app>
|
||||||
@ -50,53 +54,49 @@
|
|||||||
</ion-app>
|
</ion-app>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
async function openAlert(opts) {
|
||||||
|
const alert = await alertController.create(opts);
|
||||||
|
await alert.present();
|
||||||
|
}
|
||||||
function presentAlert() {
|
function presentAlert() {
|
||||||
const alert = Object.assign(document.createElement('ion-alert'), {
|
openAlert({
|
||||||
header: 'Alert',
|
header: 'Alert',
|
||||||
subHeader: 'Subtitle',
|
subHeader: 'Subtitle',
|
||||||
message: 'This is an alert message.',
|
message: 'This is an alert message.',
|
||||||
buttons: ['OK'],
|
buttons: ['OK'],
|
||||||
translucent: true
|
translucent: true
|
||||||
});
|
});
|
||||||
document.body.appendChild(alert);
|
|
||||||
return alert.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function presentAlertLongMessage() {
|
function presentAlertLongMessage() {
|
||||||
const alert = Object.assign(document.createElement('ion-alert'), {
|
openAlert({
|
||||||
header: 'Alert',
|
header: 'Alert',
|
||||||
message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit diam lorem, a faucibus turpis sagittis eu. In finibus augue in dui varius convallis. Donec vulputate nibh gravida odio vulputate commodo. Suspendisse imperdiet consequat egestas. Nulla feugiat consequat urna eu tincidunt. Cras nec blandit turpis, eu auctor nunc. Pellentesque finibus, magna eu vestibulum imperdiet, arcu ex lacinia massa, eget volutpat quam leo a orci. Etiam mauris est, elementum at feugiat at, dictum in sapien. Mauris efficitur eros sodales convallis egestas. Phasellus eu faucibus nisl. In eu diam vitae libero egestas lacinia. Integer sed convallis metus, nec commodo felis. Duis libero augue, ornare at tempus non, posuere vel augue. Cras mattis dui at tristique aliquam. Phasellus fermentum nibh ligula, porta hendrerit ligula elementum eu. Suspendisse sollicitudin enim at libero iaculis pulvinar. Donec ac massa id purus laoreet rutrum quis eu urna. Mauris luctus erat vel magna porttitor, vel varius erat rhoncus. Donec eu turpis vestibulum, feugiat urna id, gravida mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at lobortis tortor. Nam ultrices volutpat elit, sed pharetra nulla suscipit at. Nunc eu accumsan eros, id auctor libero. Suspendisse potenti. Nam vitae dapibus metus. Maecenas nisi dui, sagittis et condimentum eu, bibendum vel eros. Vivamus malesuada, tortor in accumsan iaculis, urna velit consectetur ante, nec semper sem diam a diam. In et semper ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit, velit vel porttitor euismod, neque risus blandit nulla, non laoreet libero dolor et odio. Nulla enim risus, feugiat eu urna sed, ultrices semper felis. Sed blandit mi diam. Nunc quis mi ligula. Pellentesque a elit eu orci volutpat egestas. Aenean fermentum eleifend quam, ut tincidunt eros tristique et. Nam dapibus tincidunt ligula, id faucibus felis sodales quis. Donec tincidunt lectus ipsum, ac semper tellus cursus ac. Vestibulum nec dui a lectus accumsan vestibulum quis et velit. Aliquam finibus justo et odio euismod, viverra condimentum eros tristique. Sed eget luctus risus. Pellentesque lorem magna, dictum non congue sodales, laoreet eget quam. In sagittis vulputate dolor a ultricies. Donec viverra leo sed ex maximus, in finibus elit gravida. Aliquam posuere vulputate mi. Suspendisse potenti. Nunc consectetur congue arcu, at pharetra dui varius non. Etiam vestibulum congue felis, id ullamcorper neque convallis ultrices. Aenean congue, diam a iaculis mollis, nisl eros maximus arcu, nec hendrerit purus felis porta diam. Nullam vitae ultrices dui, ac dictum sapien. Phasellus eu magna luctus, varius urna id, molestie quam. Nulla in semper tellus. Curabitur lacinia tellus sit amet lacinia dapibus. Sed id condimentum tellus, nec aliquam sapien. Vivamus luctus at ante a tincidunt.',
|
message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit diam lorem, a faucibus turpis sagittis eu. In finibus augue in dui varius convallis. Donec vulputate nibh gravida odio vulputate commodo. Suspendisse imperdiet consequat egestas. Nulla feugiat consequat urna eu tincidunt. Cras nec blandit turpis, eu auctor nunc. Pellentesque finibus, magna eu vestibulum imperdiet, arcu ex lacinia massa, eget volutpat quam leo a orci. Etiam mauris est, elementum at feugiat at, dictum in sapien. Mauris efficitur eros sodales convallis egestas. Phasellus eu faucibus nisl. In eu diam vitae libero egestas lacinia. Integer sed convallis metus, nec commodo felis. Duis libero augue, ornare at tempus non, posuere vel augue. Cras mattis dui at tristique aliquam. Phasellus fermentum nibh ligula, porta hendrerit ligula elementum eu. Suspendisse sollicitudin enim at libero iaculis pulvinar. Donec ac massa id purus laoreet rutrum quis eu urna. Mauris luctus erat vel magna porttitor, vel varius erat rhoncus. Donec eu turpis vestibulum, feugiat urna id, gravida mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at lobortis tortor. Nam ultrices volutpat elit, sed pharetra nulla suscipit at. Nunc eu accumsan eros, id auctor libero. Suspendisse potenti. Nam vitae dapibus metus. Maecenas nisi dui, sagittis et condimentum eu, bibendum vel eros. Vivamus malesuada, tortor in accumsan iaculis, urna velit consectetur ante, nec semper sem diam a diam. In et semper ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit, velit vel porttitor euismod, neque risus blandit nulla, non laoreet libero dolor et odio. Nulla enim risus, feugiat eu urna sed, ultrices semper felis. Sed blandit mi diam. Nunc quis mi ligula. Pellentesque a elit eu orci volutpat egestas. Aenean fermentum eleifend quam, ut tincidunt eros tristique et. Nam dapibus tincidunt ligula, id faucibus felis sodales quis. Donec tincidunt lectus ipsum, ac semper tellus cursus ac. Vestibulum nec dui a lectus accumsan vestibulum quis et velit. Aliquam finibus justo et odio euismod, viverra condimentum eros tristique. Sed eget luctus risus. Pellentesque lorem magna, dictum non congue sodales, laoreet eget quam. In sagittis vulputate dolor a ultricies. Donec viverra leo sed ex maximus, in finibus elit gravida. Aliquam posuere vulputate mi. Suspendisse potenti. Nunc consectetur congue arcu, at pharetra dui varius non. Etiam vestibulum congue felis, id ullamcorper neque convallis ultrices. Aenean congue, diam a iaculis mollis, nisl eros maximus arcu, nec hendrerit purus felis porta diam. Nullam vitae ultrices dui, ac dictum sapien. Phasellus eu magna luctus, varius urna id, molestie quam. Nulla in semper tellus. Curabitur lacinia tellus sit amet lacinia dapibus. Sed id condimentum tellus, nec aliquam sapien. Vivamus luctus at ante a tincidunt.',
|
||||||
buttons: ['Cancel', 'OK'],
|
buttons: ['Cancel', 'OK'],
|
||||||
translucent: true
|
translucent: true
|
||||||
});
|
});
|
||||||
document.body.appendChild(alert);
|
|
||||||
return alert.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function presentAlertMultipleButtons() {
|
function presentAlertMultipleButtons() {
|
||||||
const alert = Object.assign(document.createElement('ion-alert'), {
|
openAlert({
|
||||||
header: 'Alert',
|
header: 'Alert',
|
||||||
subHeader: 'Subtitle',
|
subHeader: 'Subtitle',
|
||||||
message: 'This is an alert message.',
|
message: 'This is an alert message.',
|
||||||
buttons: ['Cancel', 'Open Modal', 'Delete'],
|
buttons: ['Cancel', 'Open Modal', 'Delete'],
|
||||||
translucent: true
|
translucent: true
|
||||||
});
|
});
|
||||||
document.body.appendChild(alert);
|
|
||||||
return alert.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function presentAlertNoMessage() {
|
function presentAlertNoMessage() {
|
||||||
const alert = Object.assign(document.createElement('ion-alert'), {
|
openAlert({
|
||||||
header: 'Alert',
|
header: 'Alert',
|
||||||
buttons: ['OK'],
|
buttons: ['OK'],
|
||||||
translucent: true
|
translucent: true
|
||||||
});
|
});
|
||||||
document.body.appendChild(alert);
|
|
||||||
return alert.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function presentAlertConfirm() {
|
function presentAlertConfirm() {
|
||||||
const alert = Object.assign(document.createElement('ion-alert'), {
|
openAlert({
|
||||||
header: 'Confirm!',
|
header: 'Confirm!',
|
||||||
message: 'Message <strong>text</strong>!!!',
|
message: 'Message <strong>text</strong>!!!',
|
||||||
buttons: [
|
buttons: [
|
||||||
@ -116,12 +116,10 @@
|
|||||||
],
|
],
|
||||||
translucent: true
|
translucent: true
|
||||||
});
|
});
|
||||||
document.body.appendChild(alert);
|
|
||||||
return alert.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function presentAlertPrompt() {
|
function presentAlertPrompt() {
|
||||||
const alert = Object.assign(document.createElement('ion-alert'), {
|
openAlert({
|
||||||
header: 'Prompt!',
|
header: 'Prompt!',
|
||||||
inputs: [
|
inputs: [
|
||||||
{
|
{
|
||||||
@ -179,12 +177,10 @@
|
|||||||
],
|
],
|
||||||
translucent: true
|
translucent: true
|
||||||
});
|
});
|
||||||
document.body.appendChild(alert);
|
|
||||||
return alert.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function presentAlertRadio() {
|
function presentAlertRadio() {
|
||||||
const alert = Object.assign(document.createElement('ion-alert'), {
|
openAlert({
|
||||||
header: 'Radio',
|
header: 'Radio',
|
||||||
inputs: [
|
inputs: [
|
||||||
{
|
{
|
||||||
@ -236,12 +232,10 @@
|
|||||||
],
|
],
|
||||||
translucent: true
|
translucent: true
|
||||||
});
|
});
|
||||||
document.body.appendChild(alert);
|
|
||||||
return alert.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function presentAlertCheckbox() {
|
function presentAlertCheckbox() {
|
||||||
const alert = Object.assign(document.createElement('ion-alert'), {
|
openAlert({
|
||||||
header: 'Checkbox',
|
header: 'Checkbox',
|
||||||
inputs: [
|
inputs: [
|
||||||
{
|
{
|
||||||
@ -298,8 +292,6 @@
|
|||||||
],
|
],
|
||||||
translucent: true
|
translucent: true
|
||||||
});
|
});
|
||||||
document.body.appendChild(alert);
|
|
||||||
return alert.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,54 +0,0 @@
|
|||||||
import { Build, Component, ComponentInterface, Method } from '@stencil/core';
|
|
||||||
|
|
||||||
import { LoadingOptions, OverlayController } from '../../interface';
|
|
||||||
import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @deprecated Use the `loadingController` exported from core.
|
|
||||||
*/
|
|
||||||
@Component({
|
|
||||||
tag: 'ion-loading-controller'
|
|
||||||
})
|
|
||||||
export class LoadingController implements ComponentInterface, OverlayController {
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
if (Build.isDev) {
|
|
||||||
console.warn(`[DEPRECATED][ion-loading-controller] Use the loadingController export from @ionic/core:
|
|
||||||
import { loadingController } from '@ionic/core';
|
|
||||||
const modal = await loadingController.create({...});`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Create a loading overlay with loading options.
|
|
||||||
*
|
|
||||||
* @param options The options to use to create the loading.
|
|
||||||
*/
|
|
||||||
@Method()
|
|
||||||
create(options?: LoadingOptions): Promise<HTMLIonLoadingElement> {
|
|
||||||
return createOverlay('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) {
|
|
||||||
return dismissOverlay(document, data, role, 'ion-loading', id);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get the most recently opened loading overlay.
|
|
||||||
*/
|
|
||||||
@Method()
|
|
||||||
async getTop(): Promise<HTMLIonLoadingElement | undefined> {
|
|
||||||
return getOverlay(document, 'ion-loading') as HTMLIonLoadingElement;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,48 +0,0 @@
|
|||||||
# ion-loading-controller
|
|
||||||
|
|
||||||
Loading controllers programmatically control the loading component. Loadings can be created and dismissed from the loading controller. View the [Loading](../loading) documentation for a full list of options to pass upon creation.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Auto Generated Below -->
|
|
||||||
|
|
||||||
|
|
||||||
> **[DEPRECATED]** Use the `loadingController` exported from core.
|
|
||||||
|
|
||||||
## Methods
|
|
||||||
|
|
||||||
### `create(options?: LoadingOptions | undefined) => Promise<HTMLIonLoadingElement>`
|
|
||||||
|
|
||||||
Create a loading overlay with loading options.
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
Type: `Promise<HTMLIonLoadingElement>`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### `dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>`
|
|
||||||
|
|
||||||
Dismiss the open loading overlay.
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
Type: `Promise<boolean>`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### `getTop() => Promise<HTMLIonLoadingElement | undefined>`
|
|
||||||
|
|
||||||
Get the most recently opened loading overlay.
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
Type: `Promise<HTMLIonLoadingElement | undefined>`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
----------------------------------------------
|
|
||||||
|
|
||||||
*Built with [StencilJS](https://stenciljs.com/)*
|
|
||||||
@ -10,7 +10,10 @@
|
|||||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||||
|
<script type="module">
|
||||||
|
import { loadingController } from '../../../../dist/ionic/index.esm.js';
|
||||||
|
window.loadingController = loadingController;
|
||||||
|
</script>
|
||||||
<body>
|
<body>
|
||||||
<ion-app>
|
<ion-app>
|
||||||
|
|
||||||
@ -21,14 +24,14 @@
|
|||||||
</ion-header>
|
</ion-header>
|
||||||
|
|
||||||
<ion-content class="ion-padding">
|
<ion-content class="ion-padding">
|
||||||
<ion-button id="basic-loading" expand="block" onclick="presentLoading()">Show Loading</ion-button>
|
<ion-button id="basic-loading" expand="block" onclick="openLoading({ message: 'Hellooo', duration: 2000 })">Show Loading</ion-button>
|
||||||
<ion-button id="default" expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Please wait...'})">Show Default Loading</ion-button>
|
<ion-button id="default" expand="block" onclick="openLoading({duration: 2000, content: 'Please wait...'})">Show Default Loading</ion-button>
|
||||||
<ion-button id="long-content-loading" expand="block" onclick="presentLoadingWithOptions({duration: 2000, message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})">Show Loading with long message</ion-button>
|
<ion-button id="long-content-loading" expand="block" onclick="openLoading({duration: 2000, message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})">Show Loading with long message</ion-button>
|
||||||
<ion-button id="no-spinner-loading" expand="block" onclick="presentLoadingWithOptions({duration: 2000, message: 'Please wait...', spinner: null})">Show Loading with no spinner</ion-button>
|
<ion-button id="no-spinner-loading" expand="block" onclick="openLoading({duration: 2000, message: 'Please wait...', spinner: null})">Show Loading with no spinner</ion-button>
|
||||||
<ion-button id="translucent-loading" expand="block" onclick="presentLoadingWithOptions({duration: 5000, message: 'Please wait...', translucent: true})">Show Loading with translucent</ion-button>
|
<ion-button id="translucent-loading" expand="block" onclick="openLoading({duration: 5000, message: 'Please wait...', translucent: true})">Show Loading with translucent</ion-button>
|
||||||
<ion-button id="custom-class-loading" expand="block" onclick="presentLoadingWithOptions({duration: 5000,message: 'Please wait...', cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</ion-button>
|
<ion-button id="custom-class-loading" expand="block" onclick="openLoading({duration: 5000,message: 'Please wait...', cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</ion-button>
|
||||||
<ion-button id="backdrop-loading" expand="block" onclick="presentLoadingWithOptions({backdropDismiss: true})">Show Backdrop Click Loading</ion-button>
|
<ion-button id="backdrop-loading" expand="block" onclick="openLoading({backdropDismiss: true})">Show Backdrop Click Loading</ion-button>
|
||||||
<ion-button id="html-content-loading" expand="block" onclick="presentLoadingWithOptions({cssClass: 'html-loading', duration: 5000, message: '<ion-button>Click impatiently to load faster</ion-button>'})">Show Loading with HTML content</ion-button>
|
<ion-button id="html-content-loading" expand="block" onclick="openLoading({cssClass: 'html-loading', duration: 5000, message: '<ion-button>Click impatiently to load faster</ion-button>'})">Show Loading with HTML content</ion-button>
|
||||||
|
|
||||||
<ion-grid>
|
<ion-grid>
|
||||||
<ion-row>
|
<ion-row>
|
||||||
@ -62,19 +65,9 @@
|
|||||||
|
|
||||||
</ion-app>
|
</ion-app>
|
||||||
<script>
|
<script>
|
||||||
function presentLoading() {
|
async function openLoading(opts) {
|
||||||
const loadingElement = Object.assign(document.createElement('ion-loading'), {
|
const loading = await loadingController.create(opts);
|
||||||
message: 'Hellooo',
|
await loading.present();
|
||||||
duration: 2000
|
|
||||||
});
|
|
||||||
document.body.appendChild(loadingElement);
|
|
||||||
return loadingElement.present();
|
|
||||||
}
|
|
||||||
|
|
||||||
function presentLoadingWithOptions(opts) {
|
|
||||||
const loadingElement = Object.assign(document.createElement('ion-loading'), opts);
|
|
||||||
document.body.appendChild(loadingElement);
|
|
||||||
return loadingElement.present();
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@ -10,13 +10,16 @@
|
|||||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||||
|
<script type="module">
|
||||||
|
import { loadingController } from '../../../../dist/ionic/index.esm.js';
|
||||||
|
window.loadingController = loadingController;
|
||||||
|
</script>
|
||||||
<body>
|
<body>
|
||||||
<button id="basic-loading" onclick="presentLoading()">Show Loading</button>
|
<button id="basic-loading" onclick="openLoading({ message: 'Hellooo', duration: 5000 })">Show Loading</button>
|
||||||
<button id="long-content-loading" onclick="presentLoadingWithOptions({duration: 2000, content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})">Show Loading with long content</button>
|
<button id="long-content-loading" onclick="openLoading({duration: 2000, content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})">Show Loading with long content</button>
|
||||||
<button id="no-spinner-loading" onclick="presentLoadingWithOptions({duration: 2000, content: 'Loading Please Wait...', spinner: null})">Show Loading with no spinner</button>
|
<button id="no-spinner-loading" onclick="openLoading({duration: 2000, content: 'Loading Please Wait...', spinner: null})">Show Loading with no spinner</button>
|
||||||
<button id="translucent-loading" onclick="presentLoadingWithOptions({duration: 5000, content: 'Loading Please Wait...', translucent: true})">Show Loading with translucent</button>
|
<button id="translucent-loading" onclick="openLoading({duration: 5000, content: 'Loading Please Wait...', translucent: true})">Show Loading with translucent</button>
|
||||||
<button id="custom-class-loading" onclick="presentLoadingWithOptions({duration: 5000, content: 'Loading Please Wait...', translucent: true, cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</button>
|
<button id="custom-class-loading" onclick="openLoading({duration: 5000, content: 'Loading Please Wait...', translucent: true, cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</button>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
body > button {
|
body > button {
|
||||||
@ -33,19 +36,9 @@
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
async function presentLoading() {
|
async function openLoading(opts) {
|
||||||
const loadingElement = Object.assign(document.createElement('ion-loading'), {
|
const loading = await loadingController.create(opts);
|
||||||
message: 'Hellooo',
|
await loading.present();
|
||||||
duration: 5000
|
|
||||||
});
|
|
||||||
document.body.appendChild(loadingElement);
|
|
||||||
return loadingElement.present();
|
|
||||||
}
|
|
||||||
|
|
||||||
function presentLoadingWithOptions(opts) {
|
|
||||||
const loadingElement = Object.assign(document.createElement('ion-loading'), opts);
|
|
||||||
document.body.appendChild(loadingElement);
|
|
||||||
return loadingElement.present();
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -1,155 +0,0 @@
|
|||||||
import { Build, Component, Method } from '@stencil/core';
|
|
||||||
|
|
||||||
import { AnimationBuilder } from '../../interface';
|
|
||||||
import { menuController } from '../../utils/menu-controller';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
tag: 'ion-menu-controller'
|
|
||||||
})
|
|
||||||
export class MenuController {
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
if (Build.isDev) {
|
|
||||||
console.warn(`[DEPRECATED][ion-menu-controller] Use the menuController export from @ionic/core:
|
|
||||||
import { menuController } from '@ionic/core';`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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()
|
|
||||||
open(menu?: string | null) {
|
|
||||||
return menuController.open(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()
|
|
||||||
close(menu?: string | null) {
|
|
||||||
return menuController.close(menu);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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()
|
|
||||||
toggle(menu?: string | null) {
|
|
||||||
return menuController.toggle(menu);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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()
|
|
||||||
enable(enable: boolean, menu?: string | null) {
|
|
||||||
return menuController.enable(enable, 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()
|
|
||||||
swipeGesture(enable: boolean, menu?: string | null) {
|
|
||||||
return menuController.swipeGesture(enable, menu);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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()
|
|
||||||
isOpen(menu?: string | null) {
|
|
||||||
return menuController.isOpen(menu);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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()
|
|
||||||
isEnabled(menu?: string | null) {
|
|
||||||
return menuController.isEnabled(menu);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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()
|
|
||||||
get(menu?: string | null) {
|
|
||||||
return menuController.get(menu);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get the instance of the opened menu. Returns `null` if a menu is not found.
|
|
||||||
*/
|
|
||||||
@Method()
|
|
||||||
getOpen() {
|
|
||||||
return menuController.getOpen();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get all menu instances.
|
|
||||||
*/
|
|
||||||
@Method()
|
|
||||||
getMenus() {
|
|
||||||
return menuController.getMenus();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get whether or not a menu is animating. Returns `true` if any
|
|
||||||
* menu is currently animating.
|
|
||||||
*/
|
|
||||||
@Method()
|
|
||||||
isAnimating() {
|
|
||||||
return menuController.isAnimating();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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()
|
|
||||||
async registerAnimation(name: string, animation: AnimationBuilder) {
|
|
||||||
return menuController.registerAnimation(name, animation as any);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,155 +0,0 @@
|
|||||||
# ion-menu-controller
|
|
||||||
|
|
||||||
The Menu Controller makes it easy to control a Menu. The methods provided can be used to display the menu, enable the menu, toggle the menu, and more. The controller will grab a reference to the menu by the side, or id. if neither of these are passed to it, it will grab the first menu it finds.
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Auto Generated Below -->
|
|
||||||
|
|
||||||
|
|
||||||
## Methods
|
|
||||||
|
|
||||||
### `close(menu?: string | null | undefined) => Promise<boolean>`
|
|
||||||
|
|
||||||
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`.
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
Type: `Promise<boolean>`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### `enable(enable: boolean, menu?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>`
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
Type: `Promise<HTMLIonMenuElement | undefined>`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### `get(menu?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>`
|
|
||||||
|
|
||||||
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`.
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
Type: `Promise<HTMLIonMenuElement | undefined>`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### `getMenus() => Promise<HTMLIonMenuElement[]>`
|
|
||||||
|
|
||||||
Get all menu instances.
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
Type: `Promise<HTMLIonMenuElement[]>`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### `getOpen() => Promise<HTMLIonMenuElement | undefined>`
|
|
||||||
|
|
||||||
Get the instance of the opened menu. Returns `null` if a menu is not found.
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
Type: `Promise<HTMLIonMenuElement | undefined>`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### `isAnimating() => Promise<boolean>`
|
|
||||||
|
|
||||||
Get whether or not a menu is animating. Returns `true` if any
|
|
||||||
menu is currently animating.
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
Type: `Promise<boolean>`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### `isEnabled(menu?: string | null | undefined) => Promise<boolean>`
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
Type: `Promise<boolean>`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### `isOpen(menu?: string | null | undefined) => Promise<boolean>`
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
Type: `Promise<boolean>`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### `open(menu?: string | null | undefined) => Promise<boolean>`
|
|
||||||
|
|
||||||
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`.
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
Type: `Promise<boolean>`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### `registerAnimation(name: string, animation: AnimationBuilder) => Promise<void>`
|
|
||||||
|
|
||||||
Registers a new animation that can be used with any `ion-menu` by
|
|
||||||
passing the name of the animation in its `type` property.
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
Type: `Promise<void>`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### `swipeGesture(enable: boolean, menu?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>`
|
|
||||||
|
|
||||||
Enable or disable the ability to swipe open the menu.
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
Type: `Promise<HTMLIonMenuElement | undefined>`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### `toggle(menu?: string | null | undefined) => Promise<boolean>`
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
Type: `Promise<boolean>`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
----------------------------------------------
|
|
||||||
|
|
||||||
*Built with [StencilJS](https://stenciljs.com/)*
|
|
||||||
@ -63,7 +63,6 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
</ion-app>
|
</ion-app>
|
||||||
<ion-menu-controller></ion-menu-controller>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -10,7 +10,6 @@
|
|||||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<ion-app>
|
<ion-app>
|
||||||
<ion-menu side="start" class="e2eLeftMenu" content-id="main">
|
<ion-menu side="start" class="e2eLeftMenu" content-id="main">
|
||||||
@ -238,7 +237,6 @@
|
|||||||
</ion-content>
|
</ion-content>
|
||||||
</div>
|
</div>
|
||||||
</ion-app>
|
</ion-app>
|
||||||
<ion-menu-controller></ion-menu-controller>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -9,7 +9,12 @@
|
|||||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script> <style>
|
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||||
|
<script type="module">
|
||||||
|
import { menuController } from '../../../../dist/ionic/index.esm.js';
|
||||||
|
window.menuController = menuController;
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
.ion-page ion-content {
|
.ion-page ion-content {
|
||||||
--padding-top: 16px;
|
--padding-top: 16px;
|
||||||
--padding-end: 16px;
|
--padding-end: 16px;
|
||||||
@ -65,18 +70,13 @@
|
|||||||
<ion-button expand="block" onclick="openEnd()">Open End Menu</ion-button>
|
<ion-button expand="block" onclick="openEnd()">Open End Menu</ion-button>
|
||||||
</ion-content>
|
</ion-content>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ion-menu-controller></ion-menu-controller>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
function openStart() {
|
function openStart() {
|
||||||
document.querySelector('ion-menu-controller')
|
menuController.open('start');
|
||||||
.open('start');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function openEnd() {
|
function openEnd() {
|
||||||
document.querySelector('ion-menu-controller')
|
menuController.open('end');
|
||||||
.open('end');
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -25,7 +25,7 @@ export const testMenu = async (
|
|||||||
const menu = await page.find(selector);
|
const menu = await page.find(selector);
|
||||||
|
|
||||||
await menu.callMethod('open');
|
await menu.callMethod('open');
|
||||||
await page.waitFor(250);
|
await page.waitFor(1000);
|
||||||
|
|
||||||
screenshotCompares.push(await page.compareScreenshot());
|
screenshotCompares.push(await page.compareScreenshot());
|
||||||
|
|
||||||
|
|||||||
@ -1,54 +0,0 @@
|
|||||||
import { Build, Component, ComponentInterface, Method } from '@stencil/core';
|
|
||||||
|
|
||||||
import { ComponentRef, ModalOptions, OverlayController } from '../../interface';
|
|
||||||
import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @deprecated Use the `modalController` exported from core.
|
|
||||||
*/
|
|
||||||
@Component({
|
|
||||||
tag: 'ion-modal-controller'
|
|
||||||
})
|
|
||||||
export class ModalController implements ComponentInterface, OverlayController {
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
if (Build.isDev) {
|
|
||||||
console.warn(`[DEPRECATED][ion-modal-controller] Use the modalController export from @ionic/core:
|
|
||||||
import { modalController } from '@ionic/core';
|
|
||||||
const modal = await modalController.create({...});`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Create a modal overlay with modal options.
|
|
||||||
*
|
|
||||||
* @param options The options to use to create the modal.
|
|
||||||
*/
|
|
||||||
@Method()
|
|
||||||
create<T extends ComponentRef>(options: ModalOptions<T>): Promise<HTMLIonModalElement> {
|
|
||||||
return createOverlay('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) {
|
|
||||||
return dismissOverlay(document, data, role, 'ion-modal', id);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get the most recently opened modal overlay.
|
|
||||||
*/
|
|
||||||
@Method()
|
|
||||||
async getTop(): Promise<HTMLIonModalElement | undefined> {
|
|
||||||
return getOverlay(document, 'ion-modal') as HTMLIonModalElement;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,46 +0,0 @@
|
|||||||
# ion-modal-controller
|
|
||||||
|
|
||||||
Modal controllers programmatically control the modal component. Modals can be created and dismissed from the modal controller. View the [Modal](../modal) documentation for a full list of options to pass upon creation.
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Auto Generated Below -->
|
|
||||||
|
|
||||||
|
|
||||||
> **[DEPRECATED]** Use the `modalController` exported from core.
|
|
||||||
|
|
||||||
## Methods
|
|
||||||
|
|
||||||
### `create<T extends ComponentRef>(options: ModalOptions<T>) => Promise<HTMLIonModalElement>`
|
|
||||||
|
|
||||||
Create a modal overlay with modal options.
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
Type: `Promise<HTMLIonModalElement>`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### `dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>`
|
|
||||||
|
|
||||||
Dismiss the open modal overlay.
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
Type: `Promise<boolean>`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### `getTop() => Promise<HTMLIonModalElement | undefined>`
|
|
||||||
|
|
||||||
Get the most recently opened modal overlay.
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
Type: `Promise<HTMLIonModalElement | undefined>`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
----------------------------------------------
|
|
||||||
|
|
||||||
*Built with [StencilJS](https://stenciljs.com/)*
|
|
||||||
@ -42,7 +42,6 @@
|
|||||||
</p>
|
</p>
|
||||||
</ion-content>
|
</ion-content>
|
||||||
</div>
|
</div>
|
||||||
<ion-modal-controller></ion-modal-controller>
|
|
||||||
|
|
||||||
</ion-app>
|
</ion-app>
|
||||||
|
|
||||||
|
|||||||
@ -10,7 +10,10 @@
|
|||||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||||
|
<script type="module">
|
||||||
|
import { modalController } from '../../../../dist/ionic/index.esm.js';
|
||||||
|
window.modalController = modalController;
|
||||||
|
</script>
|
||||||
<body>
|
<body>
|
||||||
<ion-app>
|
<ion-app>
|
||||||
|
|
||||||
@ -49,7 +52,7 @@
|
|||||||
// listen for close event
|
// listen for close event
|
||||||
const button = this.querySelector('ion-button');
|
const button = this.querySelector('ion-button');
|
||||||
button.addEventListener('click', async () => {
|
button.addEventListener('click', async () => {
|
||||||
await document.querySelector('ion-modal-controller').dismiss();
|
await modalController.dismiss();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -12,6 +12,10 @@
|
|||||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||||
|
<script type="module">
|
||||||
|
import { modalController } from '../../../../dist/ionic/index.esm.js';
|
||||||
|
window.modalController = modalController;
|
||||||
|
</script>
|
||||||
<style>
|
<style>
|
||||||
#modal-header {
|
#modal-header {
|
||||||
padding-top: 5px !important;
|
padding-top: 5px !important;
|
||||||
@ -56,8 +60,6 @@
|
|||||||
<ion-list id="list"></ion-list>
|
<ion-list id="list"></ion-list>
|
||||||
</ion-content>
|
</ion-content>
|
||||||
</div>
|
</div>
|
||||||
<ion-modal-controller></ion-modal-controller>
|
|
||||||
|
|
||||||
</ion-app>
|
</ion-app>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -377,15 +379,10 @@
|
|||||||
people.forEach(p => addFavorite(p));
|
people.forEach(p => addFavorite(p));
|
||||||
|
|
||||||
function handleAddFavorite (email) {
|
function handleAddFavorite (email) {
|
||||||
const modalController = document.querySelector('ion-modal-controller');
|
|
||||||
modalController.dismiss(email);
|
modalController.dismiss(email);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function createModal(presentingEl) {
|
async function createModal(presentingEl) {
|
||||||
// initialize controller
|
|
||||||
const modalController = document.querySelector('ion-modal-controller');
|
|
||||||
await modalController.componentOnReady();
|
|
||||||
|
|
||||||
const contactGroups = allContacts
|
const contactGroups = allContacts
|
||||||
.sort((a, b) => {
|
.sort((a, b) => {
|
||||||
const aSplit = a.name.split(' ');
|
const aSplit = a.name.split(' ');
|
||||||
|
|||||||
@ -10,12 +10,13 @@
|
|||||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||||
|
<script type="module">
|
||||||
|
import { modalController } from '../../../../dist/ionic/index.esm.js';
|
||||||
|
window.modalController = modalController;
|
||||||
|
</script>
|
||||||
<body>
|
<body>
|
||||||
<button id="basic-modal" onclick="presentModal()">Present Modal</button>
|
<button id="basic-modal" onclick="presentModal()">Present Modal</button>
|
||||||
|
|
||||||
<ion-modal-controller></ion-modal-controller>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
body > button {
|
body > button {
|
||||||
display: block;
|
display: block;
|
||||||
@ -37,7 +38,6 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
async function presentModal() {
|
async function presentModal() {
|
||||||
const modalController = document.querySelector('ion-modal-controller');
|
|
||||||
const modalElement = await modalController.create({
|
const modalElement = await modalController.create({
|
||||||
component: 'page-one'
|
component: 'page-one'
|
||||||
});
|
});
|
||||||
|
|||||||
@ -10,13 +10,15 @@
|
|||||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||||
|
<script type="module">
|
||||||
|
import { pickerController } from '../../../../dist/ionic/index.esm.js';
|
||||||
|
window.pickerController = pickerController;
|
||||||
|
</script>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<ion-picker-controller></ion-picker-controller>
|
|
||||||
<ion-button onclick="openPicker()" id="single-column-button">Open Single Column Picker</ion-button>
|
<ion-button onclick="openPicker()" id="single-column-button">Open Single Column Picker</ion-button>
|
||||||
<ion-button onclick="openPicker(2, 5, multiColumnOptions)" id="multiple-column-button">Open Multi Column Picker</ion-button>
|
<ion-button onclick="openPicker(2, 5, multiColumnOptions)" id="multiple-column-button">Open Multi Column Picker</ion-button>
|
||||||
<script>
|
<script>
|
||||||
const pickerController = document.querySelector('ion-picker-controller');
|
|
||||||
const defaultColumnOptions = [
|
const defaultColumnOptions = [
|
||||||
[
|
[
|
||||||
'Dog',
|
'Dog',
|
||||||
@ -55,7 +57,7 @@
|
|||||||
{
|
{
|
||||||
text: 'Confirm',
|
text: 'Confirm',
|
||||||
handler: (value) => {
|
handler: (value) => {
|
||||||
console.log(`Got Value ${value}`);
|
console.log('Got Value', value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
@ -1,54 +0,0 @@
|
|||||||
import { Build, Component, ComponentInterface, Method } from '@stencil/core';
|
|
||||||
|
|
||||||
import { OverlayController, PickerOptions } from '../../interface';
|
|
||||||
import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @deprecated Use the `pickerController` exported from core.
|
|
||||||
*/
|
|
||||||
@Component({
|
|
||||||
tag: 'ion-picker-controller'
|
|
||||||
})
|
|
||||||
export class PickerController implements ComponentInterface, OverlayController {
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
if (Build.isDev) {
|
|
||||||
console.warn(`[DEPRECATED][ion-picker-controller] Use the pickerController export from @ionic/core:
|
|
||||||
import { pickerController } from '@ionic/core';
|
|
||||||
const picker = await pickerController.create({...});`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Create a picker overlay with picker options.
|
|
||||||
*
|
|
||||||
* @param options The options to use to create the picker.
|
|
||||||
*/
|
|
||||||
@Method()
|
|
||||||
create(options: PickerOptions): Promise<HTMLIonPickerElement> {
|
|
||||||
return createOverlay('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) {
|
|
||||||
return dismissOverlay(document, data, role, 'ion-picker', id);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get the most recently opened picker overlay.
|
|
||||||
*/
|
|
||||||
@Method()
|
|
||||||
async getTop(): Promise<HTMLIonPickerElement | undefined> {
|
|
||||||
return getOverlay(document, 'ion-picker') as HTMLIonPickerElement;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,45 +0,0 @@
|
|||||||
# ion-picker-controller
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Auto Generated Below -->
|
|
||||||
|
|
||||||
|
|
||||||
> **[DEPRECATED]** Use the `pickerController` exported from core.
|
|
||||||
|
|
||||||
## Methods
|
|
||||||
|
|
||||||
### `create(options: PickerOptions) => Promise<HTMLIonPickerElement>`
|
|
||||||
|
|
||||||
Create a picker overlay with picker options.
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
Type: `Promise<HTMLIonPickerElement>`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### `dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>`
|
|
||||||
|
|
||||||
Dismiss the open picker overlay.
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
Type: `Promise<boolean>`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### `getTop() => Promise<HTMLIonPickerElement | undefined>`
|
|
||||||
|
|
||||||
Get the most recently opened picker overlay.
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
Type: `Promise<HTMLIonPickerElement | undefined>`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
----------------------------------------------
|
|
||||||
|
|
||||||
*Built with [StencilJS](https://stenciljs.com/)*
|
|
||||||
@ -10,7 +10,10 @@
|
|||||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||||
|
<script type="module">
|
||||||
|
import { pickerController } from '../../../../dist/ionic/index.esm.js';
|
||||||
|
window.pickerController = pickerController;
|
||||||
|
</script>
|
||||||
<body>
|
<body>
|
||||||
<ion-app>
|
<ion-app>
|
||||||
|
|
||||||
@ -26,7 +29,6 @@
|
|||||||
</ion-content>
|
</ion-content>
|
||||||
|
|
||||||
</ion-app>
|
</ion-app>
|
||||||
<ion-picker-controller></ion-picker-controller>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.my-custom-class {
|
.my-custom-class {
|
||||||
@ -45,7 +47,6 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
async function presentPicker(customClass) {
|
async function presentPicker(customClass) {
|
||||||
const pickerController = document.querySelector('ion-picker-controller');
|
|
||||||
const pickerElement = await pickerController.create({
|
const pickerElement = await pickerController.create({
|
||||||
buttons: [{
|
buttons: [{
|
||||||
text: 'Cancel',
|
text: 'Cancel',
|
||||||
|
|||||||
@ -1,54 +0,0 @@
|
|||||||
import { Build, Component, ComponentInterface, Method } from '@stencil/core';
|
|
||||||
|
|
||||||
import { ComponentRef, OverlayController, PopoverOptions } from '../../interface';
|
|
||||||
import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @deprecated Use the `popoverController` exported from core.
|
|
||||||
*/
|
|
||||||
@Component({
|
|
||||||
tag: 'ion-popover-controller',
|
|
||||||
})
|
|
||||||
export class PopoverController implements ComponentInterface, OverlayController {
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
if (Build.isDev) {
|
|
||||||
console.warn(`[DEPRECATED][ion-popover-controller] Use the popoverController export from @ionic/core:
|
|
||||||
import { popoverController } from '@ionic/core';
|
|
||||||
const popover = await popoverController.create({...});`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Create a popover overlay with popover options.
|
|
||||||
*
|
|
||||||
* @param options The options to use to create the popover.
|
|
||||||
*/
|
|
||||||
@Method()
|
|
||||||
create<T extends ComponentRef>(options: PopoverOptions<T>): Promise<HTMLIonPopoverElement> {
|
|
||||||
return createOverlay('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) {
|
|
||||||
return dismissOverlay(document, data, role, 'ion-popover', id);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get the most recently opened popover overlay.
|
|
||||||
*/
|
|
||||||
@Method()
|
|
||||||
async getTop(): Promise<HTMLIonPopoverElement | undefined> {
|
|
||||||
return getOverlay(document, 'ion-popover') as HTMLIonPopoverElement;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,63 +0,0 @@
|
|||||||
# ion-popover-controller
|
|
||||||
|
|
||||||
Popover controllers programmatically control the popover component. Popovers can be created and dismissed from the popover controller. View the [Popover](../popover) documentation for a full list of options to pass upon creation.
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Auto Generated Below -->
|
|
||||||
|
|
||||||
|
|
||||||
> **[DEPRECATED]** Use the `popoverController` exported from core.
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
### Javascript
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
async function presentPopover() {
|
|
||||||
const popoverElement = Object.assign(document.createElement('ion-popover'), {
|
|
||||||
component: 'profile-page',
|
|
||||||
event: event
|
|
||||||
});
|
|
||||||
document.body.appendChild(popoverElement);
|
|
||||||
return await popoverElement.present();
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Methods
|
|
||||||
|
|
||||||
### `create<T extends ComponentRef>(options: PopoverOptions<T>) => Promise<HTMLIonPopoverElement>`
|
|
||||||
|
|
||||||
Create a popover overlay with popover options.
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
Type: `Promise<HTMLIonPopoverElement>`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### `dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>`
|
|
||||||
|
|
||||||
Dismiss the open popover overlay.
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
Type: `Promise<boolean>`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### `getTop() => Promise<HTMLIonPopoverElement | undefined>`
|
|
||||||
|
|
||||||
Get the most recently opened popover overlay.
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
Type: `Promise<HTMLIonPopoverElement | undefined>`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
----------------------------------------------
|
|
||||||
|
|
||||||
*Built with [StencilJS](https://stenciljs.com/)*
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
```javascript
|
|
||||||
async function presentPopover() {
|
|
||||||
const popoverElement = Object.assign(document.createElement('ion-popover'), {
|
|
||||||
component: 'profile-page',
|
|
||||||
event: event
|
|
||||||
});
|
|
||||||
document.body.appendChild(popoverElement);
|
|
||||||
return await popoverElement.present();
|
|
||||||
}
|
|
||||||
```
|
|
||||||
@ -10,7 +10,10 @@
|
|||||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||||
|
<script type="module">
|
||||||
|
import { popoverController } from '../../../../dist/ionic/index.esm.js';
|
||||||
|
window.popoverController = popoverController;
|
||||||
|
</script>
|
||||||
<body>
|
<body>
|
||||||
<ion-app>
|
<ion-app>
|
||||||
|
|
||||||
@ -31,8 +34,6 @@
|
|||||||
<ion-button id="long-list-popover" expand="block" color="secondary" onclick="presentPopover({ component: 'list-page', event: event })">Show Long List Popover</ion-button>
|
<ion-button id="long-list-popover" expand="block" color="secondary" onclick="presentPopover({ component: 'list-page', event: event })">Show Long List Popover</ion-button>
|
||||||
<ion-button id="no-event-popover" expand="block" color="danger" onclick="presentPopover({ component: 'profile-page' })">No Event Popover</ion-button>
|
<ion-button id="no-event-popover" expand="block" color="danger" onclick="presentPopover({ component: 'profile-page' })">No Event Popover</ion-button>
|
||||||
<ion-button id="custom-class-popover" expand="block" color="tertiary" onclick="presentPopover({ component: 'translucent-page', event: event, cssClass: 'my-custom-class' })">Custom Class Popover</ion-button>
|
<ion-button id="custom-class-popover" expand="block" color="tertiary" onclick="presentPopover({ component: 'translucent-page', event: event, cssClass: 'my-custom-class' })">Custom Class Popover</ion-button>
|
||||||
|
|
||||||
<ion-popover-controller></ion-popover-controller>
|
|
||||||
</ion-content>
|
</ion-content>
|
||||||
|
|
||||||
<ion-footer>
|
<ion-footer>
|
||||||
@ -60,9 +61,8 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
async function presentPopover(opts) {
|
async function presentPopover(opts) {
|
||||||
const popoverController = document.querySelector('ion-popover-controller');
|
const popover = await popoverController.create(opts);
|
||||||
const popoverElement = await popoverController.create(opts);
|
await popover.present();
|
||||||
return await popoverElement.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
class ProfilePage extends HTMLElement {
|
class ProfilePage extends HTMLElement {
|
||||||
|
|||||||
@ -10,15 +10,16 @@
|
|||||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||||
|
<script type="module">
|
||||||
|
import { popoverController } from '../../../../dist/ionic/index.esm.js';
|
||||||
|
window.popoverController = popoverController;
|
||||||
|
</script>
|
||||||
<body>
|
<body>
|
||||||
<button id="basic-popover" onclick="presentPopover({ component: 'profile-page', event: event })">Show Popover</button>
|
<button id="basic-popover" onclick="presentPopover({ component: 'profile-page', event: event })">Show Popover</button>
|
||||||
<button onclick="presentPopover({ component: 'translucent-page', event: event, translucent: true })">Show Translucent Popover</button>
|
<button onclick="presentPopover({ component: 'translucent-page', event: event, translucent: true })">Show Translucent Popover</button>
|
||||||
<button color="secondary" onclick="presentPopover({ component: 'list-page', event: event })">Show Long List Popover</button>
|
<button color="secondary" onclick="presentPopover({ component: 'list-page', event: event })">Show Long List Popover</button>
|
||||||
<button color="danger" onclick="presentPopover({ component: 'profile-page' })">No Event Popover</button>
|
<button color="danger" onclick="presentPopover({ component: 'profile-page' })">No Event Popover</button>
|
||||||
|
|
||||||
<ion-popover-controller></ion-popover-controller>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
body > button {
|
body > button {
|
||||||
display: block;
|
display: block;
|
||||||
@ -35,9 +36,8 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
async function presentPopover(opts) {
|
async function presentPopover(opts) {
|
||||||
const popoverController = document.querySelector('ion-popover-controller');
|
const popover = await popoverController.create(opts);
|
||||||
const popoverElement = await popoverController.create(opts);
|
await popover.present();
|
||||||
return await popoverElement.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
class ProfilePage extends HTMLElement {
|
class ProfilePage extends HTMLElement {
|
||||||
|
|||||||
@ -1,46 +0,0 @@
|
|||||||
# ion-toast-controller
|
|
||||||
|
|
||||||
ToastController is a component used to create Toast components. Please see the docs for [Toast](../toast).
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Auto Generated Below -->
|
|
||||||
|
|
||||||
|
|
||||||
> **[DEPRECATED]** Use the `toastController` exported from core.
|
|
||||||
|
|
||||||
## Methods
|
|
||||||
|
|
||||||
### `create(options?: ToastOptions | undefined) => Promise<HTMLIonToastElement>`
|
|
||||||
|
|
||||||
Create a toast overlay with toast options.
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
Type: `Promise<HTMLIonToastElement>`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### `dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>`
|
|
||||||
|
|
||||||
Dismiss the open toast overlay.
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
Type: `Promise<boolean>`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### `getTop() => Promise<HTMLIonToastElement | undefined>`
|
|
||||||
|
|
||||||
Get the most recently opened toast overlay.
|
|
||||||
|
|
||||||
#### Returns
|
|
||||||
|
|
||||||
Type: `Promise<HTMLIonToastElement | undefined>`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
----------------------------------------------
|
|
||||||
|
|
||||||
*Built with [StencilJS](https://stenciljs.com/)*
|
|
||||||
@ -1,51 +0,0 @@
|
|||||||
import { Build, Component, ComponentInterface, Method } from '@stencil/core';
|
|
||||||
|
|
||||||
import { OverlayController, ToastOptions } from '../../interface';
|
|
||||||
import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @deprecated Use the `toastController` exported from core.
|
|
||||||
*/
|
|
||||||
@Component({
|
|
||||||
tag: 'ion-toast-controller'
|
|
||||||
})
|
|
||||||
export class ToastController implements ComponentInterface, OverlayController {
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
if (Build.isDev) {
|
|
||||||
console.warn(`[DEPRECATED][ion-toast-controller] Use the toastController export from @ionic/core:
|
|
||||||
import { toastController } from '@ionic/core';
|
|
||||||
const toast = await toastController.create({...});`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Create a toast overlay with toast options.
|
|
||||||
*
|
|
||||||
* @param options The options to use to create the toast.
|
|
||||||
*/
|
|
||||||
@Method()
|
|
||||||
create(options?: ToastOptions): Promise<HTMLIonToastElement> {
|
|
||||||
return createOverlay('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) {
|
|
||||||
return dismissOverlay(document, data, role, 'ion-toast', id);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get the most recently opened toast overlay.
|
|
||||||
*/
|
|
||||||
@Method()
|
|
||||||
async getTop(): Promise<HTMLIonToastElement | undefined> {
|
|
||||||
return getOverlay(document, 'ion-toast') as HTMLIonToastElement;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -10,7 +10,10 @@
|
|||||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||||
|
<script type="module">
|
||||||
|
import { toastController } from '../../../../dist/ionic/index.esm.js';
|
||||||
|
window.toastController = toastController;
|
||||||
|
</script>
|
||||||
<body>
|
<body>
|
||||||
<ion-app>
|
<ion-app>
|
||||||
<ion-header>
|
<ion-header>
|
||||||
@ -20,64 +23,62 @@
|
|||||||
</ion-header>
|
</ion-header>
|
||||||
|
|
||||||
<ion-content class="ion-padding" id="content">
|
<ion-content class="ion-padding" id="content">
|
||||||
<ion-button expand="block" id="show-bottom-toast" onclick="presentToast('bottom')">
|
<ion-button expand="block" id="show-bottom-toast" onclick="openToast({ message: 'Hellooo', position: 'bottom', duration: 2000 })">
|
||||||
Position Bottom
|
Position Bottom
|
||||||
</ion-button>
|
</ion-button>
|
||||||
|
|
||||||
<ion-button expand="block" id="show-top-toast" onclick="presentToast('top')">
|
<ion-button expand="block" id="show-top-toast" onclick="openToast({ message: 'Hellooo', position: 'top', duration: 2000 })">
|
||||||
Position Top
|
Position Top
|
||||||
</ion-button>
|
</ion-button>
|
||||||
|
|
||||||
<ion-button expand="block" id="show-middle-toast" onclick="presentToast('middle')">
|
<ion-button expand="block" id="show-middle-toast" onclick="openToast({ message: 'Hellooo', position: 'middle', duration: 2000 })">
|
||||||
Position Middle
|
Position Middle
|
||||||
</ion-button>
|
</ion-button>
|
||||||
|
|
||||||
<ion-button expand="block" onclick="presentToastWithOptions({header: 'Toast header', message: 'Toast message'})">
|
<ion-button expand="block" onclick="openToast({header: 'Toast header', message: 'Toast message'})">
|
||||||
Header Toast
|
Header Toast
|
||||||
</ion-button>
|
</ion-button>
|
||||||
|
|
||||||
<ion-button expand="block" onclick="presentToastWithOptions({header: 'Toast header', message: 'Really long message that should go all of the way to the button', buttons: ['Action'] })">
|
<ion-button expand="block" onclick="openToast({header: 'Toast header', message: 'Really long message that should go all of the way to the button', buttons: ['Action'] })">
|
||||||
Header + Action Toast
|
Header + Action Toast
|
||||||
</ion-button>
|
</ion-button>
|
||||||
|
|
||||||
<ion-button expand="block" id="two-line-toast" onclick="presentToastWithOptions({message: 'Two-line message\nwith action.', buttons: ['Action'] })">
|
<ion-button expand="block" id="two-line-toast" onclick="openToast({message: 'Two-line message\nwith action.', buttons: ['Action'] })">
|
||||||
Long Message
|
Long Message
|
||||||
</ion-button>
|
</ion-button>
|
||||||
|
|
||||||
<ion-button expand="block" id="close-button-toast" onclick="presentToastWithOptions({message: 'click to close', buttons: ['Close'] })">
|
<ion-button expand="block" id="close-button-toast" onclick="openToast({message: 'click to close', buttons: ['Close'] })">
|
||||||
Close Button
|
Close Button
|
||||||
</ion-button>
|
</ion-button>
|
||||||
|
|
||||||
<ion-button expand="block" id="custom-close-text-toast" onclick="presentToastWithOptions({message: 'click to close', buttons: ['closing time'] })">
|
<ion-button expand="block" id="custom-close-text-toast" onclick="openToast({message: 'click to close', buttons: ['closing time'] })">
|
||||||
Custom Close Button
|
Custom Close Button
|
||||||
</ion-button>
|
</ion-button>
|
||||||
|
|
||||||
<ion-button expand="block" id="custom-action-buttons-toast" onclick="presentToastWithButtonOptions()">
|
<ion-button expand="block" id="custom-action-buttons-toast" onclick="openToastWithButtonOptions()">
|
||||||
Custom Buttons
|
Custom Buttons
|
||||||
</ion-button>
|
</ion-button>
|
||||||
|
|
||||||
<ion-button expand="block" id="translucent-toast" onclick="presentToastWithOptions({message: 'click to close', buttons: ['Close'], translucent: true})">
|
<ion-button expand="block" id="translucent-toast" onclick="openToast({message: 'click to close', buttons: ['Close'], translucent: true})">
|
||||||
Translucent Toast
|
Translucent Toast
|
||||||
</ion-button>
|
</ion-button>
|
||||||
|
|
||||||
<ion-button expand="block" id="color-toast" onclick="presentToastWithOptions({message: 'click to close', buttons: ['Close'], color: 'danger'})">
|
<ion-button expand="block" id="color-toast" onclick="openToast({message: 'click to close', buttons: ['Close'], color: 'danger'})">
|
||||||
Color Toast
|
Color Toast
|
||||||
</ion-button>
|
</ion-button>
|
||||||
|
|
||||||
<ion-button expand="block" id="custom-class-toast" onclick="presentToastWithOptions({message: 'click to close', buttons: ['Close'], cssClass: 'my-custom-class'})">
|
<ion-button expand="block" id="custom-class-toast" onclick="openToast({message: 'click to close', buttons: ['Close'], cssClass: 'my-custom-class'})">
|
||||||
Custom Class
|
Custom Class
|
||||||
</ion-button>
|
</ion-button>
|
||||||
|
|
||||||
<ion-button expand="block" id="toast-start-and-end" onclick="presentToastWithOptions({message: 'click to close', buttons: ['Close'], cssClass: 'toast-start-and-end'})">
|
<ion-button expand="block" id="toast-start-and-end" onclick="openToast({message: 'click to close', buttons: ['Close'], cssClass: 'toast-start-and-end'})">
|
||||||
Show Toast with start-end position
|
Show Toast with start-end position
|
||||||
</ion-button>
|
</ion-button>
|
||||||
|
|
||||||
<ion-button expand="block" id="toast-html" onclick="presentToastWithOptions({message: '<ion-button>Button in a Toast!</ion-button>', buttons: ['Close'] })">
|
<ion-button expand="block" id="toast-html" onclick="openToast({message: '<ion-button>Button in a Toast!</ion-button>', buttons: ['Close'] })">
|
||||||
Show HTML Toast
|
Show HTML Toast
|
||||||
</ion-button>
|
</ion-button>
|
||||||
|
|
||||||
<ion-toast-controller></ion-toast-controller>
|
|
||||||
|
|
||||||
<ion-grid>
|
<ion-grid>
|
||||||
<ion-row>
|
<ion-row>
|
||||||
<ion-col size="6">
|
<ion-col size="6">
|
||||||
@ -113,23 +114,12 @@
|
|||||||
window.addEventListener('ionToastDidDismiss', function (e) { console.log('didDismiss', e) })
|
window.addEventListener('ionToastDidDismiss', function (e) { console.log('didDismiss', e) })
|
||||||
window.addEventListener('ionToastWillDismiss', function (e) { console.log('willDismiss', e) })
|
window.addEventListener('ionToastWillDismiss', function (e) { console.log('willDismiss', e) })
|
||||||
|
|
||||||
async function presentToast(position) {
|
async function openToast(opts) {
|
||||||
const toastController = document.querySelector('ion-toast-controller');
|
const toast = await toastController.create(opts);
|
||||||
const toastElement = await toastController.create({
|
await toast.present();
|
||||||
message: 'Hellooo',
|
|
||||||
position,
|
|
||||||
duration: 2000
|
|
||||||
});
|
|
||||||
return await toastElement.present();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function presentToastWithOptions(opts) {
|
async function openToastWithButtonOptions() {
|
||||||
const toastController = document.querySelector('ion-toast-controller');
|
|
||||||
const toastElement = await toastController.create(opts);
|
|
||||||
return await toastElement.present();
|
|
||||||
}
|
|
||||||
|
|
||||||
async function presentToastWithButtonOptions() {
|
|
||||||
const opts = {
|
const opts = {
|
||||||
message: 'click to close',
|
message: 'click to close',
|
||||||
buttons: [
|
buttons: [
|
||||||
@ -151,9 +141,7 @@
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
const toastController = document.querySelector('ion-toast-controller');
|
await openToast(opts);
|
||||||
const toastElement = await toastController.create(opts);
|
|
||||||
return await toastElement.present();
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@ -10,7 +10,10 @@
|
|||||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||||
|
<script type="module">
|
||||||
|
import { toastController } from '../../../../dist/ionic/index.esm.js';
|
||||||
|
window.toastController = toastController;
|
||||||
|
</script>
|
||||||
<body>
|
<body>
|
||||||
<ion-app>
|
<ion-app>
|
||||||
<ion-header>
|
<ion-header>
|
||||||
@ -37,8 +40,6 @@
|
|||||||
<ion-button id="longButton" expand="block" onclick="presentToastWithLongButton()">
|
<ion-button id="longButton" expand="block" onclick="presentToastWithLongButton()">
|
||||||
Really Long Button
|
Really Long Button
|
||||||
</ion-button>
|
</ion-button>
|
||||||
|
|
||||||
<ion-toast-controller></ion-toast-controller>
|
|
||||||
</ion-content>
|
</ion-content>
|
||||||
|
|
||||||
</ion-app>
|
</ion-app>
|
||||||
@ -131,9 +132,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function presentToastWithOptions(opts) {
|
async function presentToastWithOptions(opts) {
|
||||||
const toastController = document.querySelector('ion-toast-controller');
|
const toast = await toastController.create(opts);
|
||||||
const toastElement = await toastController.create(opts);
|
await toast.present();
|
||||||
return await toastElement.present();
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@ -10,19 +10,19 @@
|
|||||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||||
|
<script type="module">
|
||||||
|
import { toastController } from '../../../../dist/ionic/index.esm.js';
|
||||||
|
window.toastController = toastController;
|
||||||
|
</script>
|
||||||
<body>
|
<body>
|
||||||
<button id="basic-toast" onclick="presentToast('bottom')">Show Toast Bottom</button>
|
<button id="basic-toast" onclick="openToast({ message: 'Hellooo', position: 'bottom', duration: 2000 })">Show Toast Bottom</button>
|
||||||
<button onclick="presentToast('top')">Show Toast Top</button>
|
<button onclick="openToast({ message: 'Hellooo', position: 'top', duration: 2000 })">Show Toast Top</button>
|
||||||
<button onclick="presentToast('middle')">Show Toast Middle</button>
|
<button onclick="openToast({ message: 'Hellooo', position: 'middle', duration: 2000 })">Show Toast Middle</button>
|
||||||
<button onclick="presentToastWithOptions({message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.', duration: 2000})">Show Toast with long message</button>
|
<button onclick="openToast({message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.', duration: 2000})">Show Toast with long message</button>
|
||||||
<button onclick="presentToastWithOptions({message: 'click to close', buttons: ['Close'] })">Show Toast with Close Button</button>
|
<button onclick="openToast({message: 'click to close', buttons: ['Close'] })">Show Toast with Close Button</button>
|
||||||
<button onclick="presentToastWithOptions({message: 'click to close', buttons: ['closing time'] })">Show Toast with Custom Close Button Text</button>
|
<button onclick="openToast({message: 'click to close', buttons: ['closing time'] })">Show Toast with Custom Close Button Text</button>
|
||||||
<button onclick="presentToastWithOptions({message: 'click to close', buttons: ['Close'], translucent: true})">Show Translucent Toast</button>
|
<button onclick="openToast({message: 'click to close', buttons: ['Close'], translucent: true})">Show Translucent Toast</button>
|
||||||
<button onclick="presentToastWithOptions({message: 'click to close', buttons: ['Close'], cssClass: 'custom'})">Show Toast with Custom Properties</button>
|
<button onclick="openToast({message: 'click to close', buttons: ['Close'], cssClass: 'custom'})">Show Toast with Custom Properties</button>
|
||||||
|
|
||||||
<ion-toast-controller></ion-toast-controller>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
body > button {
|
body > button {
|
||||||
display: block;
|
display: block;
|
||||||
@ -47,20 +47,9 @@
|
|||||||
window.addEventListener('ionToastDidDismiss', function(e){console.log('didDismiss', e)})
|
window.addEventListener('ionToastDidDismiss', function(e){console.log('didDismiss', e)})
|
||||||
window.addEventListener('ionToastWillDismiss', function(e){console.log('willDismiss', e)})
|
window.addEventListener('ionToastWillDismiss', function(e){console.log('willDismiss', e)})
|
||||||
|
|
||||||
async function presentToast(position) {
|
async function openToast(opts) {
|
||||||
const toastController = document.querySelector('ion-toast-controller');
|
const toast = await toastController.create(opts);
|
||||||
const toastElement = await toastController.create({
|
await toast.present();
|
||||||
message: 'Hellooo',
|
|
||||||
position,
|
|
||||||
duration: 2000
|
|
||||||
});
|
|
||||||
return await toastElement.present();
|
|
||||||
}
|
|
||||||
|
|
||||||
async function presentToastWithOptions(opts) {
|
|
||||||
const toastController = document.querySelector('ion-toast-controller');
|
|
||||||
const toastElement = await toastController.create(opts);
|
|
||||||
return await toastElement.present();
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -26,7 +26,7 @@ export const config: Config = {
|
|||||||
{ components: ['ion-item', 'ion-item-divider', 'ion-item-group', 'ion-label', 'ion-list', 'ion-list-header', 'ion-skeleton-text', 'ion-note'] },
|
{ components: ['ion-item', 'ion-item-divider', 'ion-item-group', 'ion-label', 'ion-list', 'ion-list-header', 'ion-skeleton-text', 'ion-note'] },
|
||||||
{ components: ['ion-item-sliding', 'ion-item-options', 'ion-item-option'] },
|
{ components: ['ion-item-sliding', 'ion-item-options', 'ion-item-option'] },
|
||||||
{ components: ['ion-loading'] },
|
{ components: ['ion-loading'] },
|
||||||
{ components: ['ion-menu', 'ion-menu-controller', 'ion-menu-toggle', 'ion-menu-button'] },
|
{ components: ['ion-menu', 'ion-menu-toggle', 'ion-menu-button'] },
|
||||||
{ components: ['ion-modal'] },
|
{ components: ['ion-modal'] },
|
||||||
{ components: ['ion-nav', 'ion-nav-link'] },
|
{ components: ['ion-nav', 'ion-nav-link'] },
|
||||||
{ components: ['ion-img'] },
|
{ components: ['ion-img'] },
|
||||||
@ -50,17 +50,6 @@ export const config: Config = {
|
|||||||
{ components: ['ion-toast'] },
|
{ components: ['ion-toast'] },
|
||||||
{ components: ['ion-toggle'] },
|
{ components: ['ion-toggle'] },
|
||||||
{ components: ['ion-virtual-scroll'] },
|
{ components: ['ion-virtual-scroll'] },
|
||||||
|
|
||||||
// Deprecated
|
|
||||||
{ components: [
|
|
||||||
'ion-action-sheet-controller',
|
|
||||||
'ion-alert-controller',
|
|
||||||
'ion-loading-controller',
|
|
||||||
'ion-modal-controller',
|
|
||||||
'ion-popover-controller',
|
|
||||||
'ion-picker-controller',
|
|
||||||
'ion-toast-controller',
|
|
||||||
]},
|
|
||||||
],
|
],
|
||||||
plugins: [
|
plugins: [
|
||||||
sass({
|
sass({
|
||||||
@ -108,24 +97,14 @@ export const config: Config = {
|
|||||||
excludeComponents: [
|
excludeComponents: [
|
||||||
// overlays
|
// overlays
|
||||||
'ion-action-sheet',
|
'ion-action-sheet',
|
||||||
'ion-action-sheet-controller',
|
|
||||||
'ion-alert',
|
'ion-alert',
|
||||||
'ion-alert-controller',
|
|
||||||
'ion-loading',
|
'ion-loading',
|
||||||
'ion-loading-controller',
|
|
||||||
'ion-modal',
|
'ion-modal',
|
||||||
'ion-modal-controller',
|
|
||||||
'ion-picker',
|
'ion-picker',
|
||||||
'ion-picker-controller',
|
|
||||||
'ion-popover',
|
'ion-popover',
|
||||||
'ion-popover-controller',
|
|
||||||
'ion-toast',
|
'ion-toast',
|
||||||
'ion-toast-controller',
|
|
||||||
'ion-toast',
|
'ion-toast',
|
||||||
|
|
||||||
// controllers
|
|
||||||
'ion-menu-controller',
|
|
||||||
|
|
||||||
// navigation
|
// navigation
|
||||||
'ion-router',
|
'ion-router',
|
||||||
'ion-route',
|
'ion-route',
|
||||||
|
|||||||
Reference in New Issue
Block a user