diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 4b9bd5c3c1..d93e47862e 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -4,9 +4,6 @@ * and imports for stencil collections that might be configured in your stencil.config.js file */ -import { - ActionSheetButton, -} from './components/action-sheet/action-sheet'; import { AnimationBuilder, FrameworkDelegate, @@ -14,6 +11,9 @@ import { PickerOptions, RouterDelegate, } from './index'; +import { + ActionSheetButton, +} from './components/action-sheet/action-sheet'; import { AlertButton, AlertInput, @@ -1600,6 +1600,7 @@ declare global { cssClass?: string; dismissOnPageChange?: boolean; duration?: number; + enableBackdropDismiss?: boolean; enterAnimation?: AnimationBuilder; leaveAnimation?: AnimationBuilder; showBackdrop?: boolean; @@ -2057,14 +2058,11 @@ declare global { export interface IonPickerAttributes extends HTMLAttributes { buttons?: PickerButton[]; columns?: PickerColumn[]; - content?: string; cssClass?: string; - dismissOnPageChange?: boolean; duration?: number; enableBackdropDismiss?: boolean; enterAnimation?: AnimationBuilder; leaveAnimation?: AnimationBuilder; - pickerId?: number; showBackdrop?: boolean; willAnimate?: boolean; } @@ -2166,7 +2164,6 @@ declare global { ev?: Event; leaveAnimation?: AnimationBuilder; mode?: 'ios' | 'md'; - popoverId?: number; showBackdrop?: boolean; translucent?: boolean; willAnimate?: boolean; @@ -3411,7 +3408,6 @@ declare global { message?: string; position?: string; showCloseButton?: boolean; - toastId?: number; translucent?: boolean; willAnimate?: boolean; } diff --git a/packages/core/src/components/action-sheet/action-sheet.tsx b/packages/core/src/components/action-sheet/action-sheet.tsx index 900c68b501..6fba5bb936 100644 --- a/packages/core/src/components/action-sheet/action-sheet.tsx +++ b/packages/core/src/components/action-sheet/action-sheet.tsx @@ -1,13 +1,5 @@ import { Component, CssClassMap, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core'; -import { - Animation, - AnimationBuilder, - AnimationController, - Config, - DomController, - OverlayDismissEvent, - OverlayDismissEventDetail -} from '../../index'; +import { Animation, AnimationBuilder, AnimationController, Config, DomController, OverlayDismissEvent, OverlayDismissEventDetail } from '../../index'; import { domControllerAsync, isDef, playAnimationAsync } from '../../utils/helpers'; import { createThemedClasses, getClassMap } from '../../utils/theme'; diff --git a/packages/core/src/components/alert/readme.md b/packages/core/src/components/alert/readme.md index f6ea153dbe..f06998042c 100644 --- a/packages/core/src/components/alert/readme.md +++ b/packages/core/src/components/alert/readme.md @@ -2,7 +2,10 @@ An Alert is a dialog that presents users with information or collects information from the user using inputs. An alert appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. It can also optionally have a `title`, `subTitle` and `message`. -Alerts can be programmatically opened using an [Alert Controller](../../alert-controller/AlertController). They can be customized by passing alert options in the first argument of the alert controller's create method. + +### Creating + +Alerts can be created using a [Alert Controller](../../alert-controller/AlertController). They can be customized by passing alert options in the first argument of the alert controller's create method. ### Alert Buttons diff --git a/packages/core/src/components/loading/readme.md b/packages/core/src/components/loading/readme.md index cee5f3aaa7..ba3c945c87 100644 --- a/packages/core/src/components/loading/readme.md +++ b/packages/core/src/components/loading/readme.md @@ -2,12 +2,10 @@ An overlay that can be used to indicate activity while blocking user interaction. The loading indicator appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app. It includes an optional backdrop, which can be disabled by setting `showBackdrop: false` upon creation. -Loading indicators can be programmatically opened using a [Loading Controller](../../loading-controller/LoadingController). They can be customized by passing loading options in the first argument of the loading controller's create method. - ### Creating -You can pass all of the loading options in the first argument of the create method. The spinner name should be passed in the `spinner` property, and any optional HTML can be passed in the `content` property. If a value is not passed to `spinner` the loading indicator will use the spinner specified by the platform. +Loading indicators can be created using a [Loading Controller](../../loading-controller/LoadingController). They can be customized by passing loading options in the first argument of the loading controller's create method. The spinner name should be passed in the `spinner` property, and any optional HTML can be passed in the `content` property. If a value is not passed to `spinner` the loading indicator will use the spinner specified by the platform. ### Dismissing diff --git a/packages/core/src/components/picker/picker.tsx b/packages/core/src/components/picker/picker.tsx index 6dc9069022..0a84c30471 100644 --- a/packages/core/src/components/picker/picker.tsx +++ b/packages/core/src/components/picker/picker.tsx @@ -1,17 +1,7 @@ import { Component, CssClassMap, Element, Event, EventEmitter, Listen, Method, Prop, State } from '@stencil/core'; - -import { - Animation, - AnimationBuilder, - AnimationController, - Config, - DomController, - OverlayDismissEvent, - OverlayDismissEventDetail -} from '../../index'; +import { Animation, AnimationBuilder, AnimationController, Config, DomController, OverlayDismissEvent, OverlayDismissEventDetail } from '../../index'; import { domControllerAsync, playAnimationAsync } from '../../utils/helpers'; - import iosEnterAnimation from './animations/ios.enter'; import iosLeaveAnimation from './animations/ios.leave'; import { getClassMap } from '../../utils/theme'; diff --git a/packages/core/src/components/popover-controller/readme.md b/packages/core/src/components/popover-controller/readme.md index 57534ad719..320a4c8227 100644 --- a/packages/core/src/components/popover-controller/readme.md +++ b/packages/core/src/components/popover-controller/readme.md @@ -1,25 +1,19 @@ # ion-popover-controller -A Popover is a dialog that appears on top of the current page. -It can be used for anything, but generally it is used for overflow -actions that don't fit in the navigation bar. - -### Creating -A popover can be created by calling the `create` method. The view -to display in the popover should be passed as the first argument. -Any data to pass to the popover view can optionally be passed in -the second argument. Options for the popover can optionally be -passed in the third argument. See the [create](#create) method -below for all available options. - -### Presenting -To present a popover, call the `present` method on a PopoverController instance. -In order to position the popover relative to the element clicked, a click event -needs to be passed into the options of the the `present` method. If the event -is not passed, the popover will be positioned in the center of the current -view. See the [usage](#usage) section for an example of passing this event. +Popover controllers programmatically control the popover component. Popovers can be created and dismissed from the popover controller. View the [Popover](../../popover/Popover) documentation for a full list of options to pass upon creation. +```javascript +async function presentPopover() { + const popoverController = document.querySelector('ion-popover-controller'); + await popoverController.componentOnReady(); + const popoverElement = await popoverController.create({ + component: 'profile-page', + ev: event + }); + return await popoverElement.present(); +} +``` diff --git a/packages/core/src/components/popover/popover.tsx b/packages/core/src/components/popover/popover.tsx index 0bdbf37812..0f6cfa529e 100644 --- a/packages/core/src/components/popover/popover.tsx +++ b/packages/core/src/components/popover/popover.tsx @@ -1,14 +1,5 @@ import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core'; -import { - Animation, - AnimationBuilder, - AnimationController, - Config, - DomController, - FrameworkDelegate, - OverlayDismissEvent, - OverlayDismissEventDetail -} from '../../index'; +import { Animation, AnimationBuilder, AnimationController, Config, DomController, FrameworkDelegate, OverlayDismissEvent, OverlayDismissEventDetail } from '../../index'; import { DomFrameworkDelegate } from '../../utils/dom-framework-delegate'; import { domControllerAsync, playAnimationAsync } from '../../utils/helpers'; @@ -30,9 +21,83 @@ import mdLeaveAnimation from './animations/md.leave'; } }) export class Popover { + popoverId: number; + + private animation: Animation; + private usersComponentElement: HTMLElement; @Element() private el: HTMLElement; + @Prop({ connect: 'ion-animation-controller' }) animationCtrl: AnimationController; + @Prop({ context: 'config' }) config: Config; + @Prop({ context: 'dom' }) dom: DomController; + @Prop({ mutable: true }) delegate: FrameworkDelegate; + + /** + * The color to use from your Sass `$colors` map. + * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. + * For more information, see [Theming your App](/docs/theming/theming-your-app). + */ + @Prop() color: string; + + /** + * The mode determines which platform styles to use. + * Possible values are: `"ios"` or `"md"`. + * For more information, see [Platform Styles](/docs/theming/platform-specific-styles). + */ + @Prop() mode: 'ios' | 'md'; + + /** + * Animation to use when the popover is presented. + */ + @Prop() enterAnimation: AnimationBuilder; + + /** + * Animation to use when the popover is dismissed. + */ + @Prop() leaveAnimation: AnimationBuilder; + + /** + * The component to display inside of the popover. + */ + @Prop() component: string; + + /** + * The data to pass to the popover component. + */ + @Prop() data: any = {}; + + /** + * Additional classes to apply for custom CSS. If multiple classes are + * provided they should be separated by spaces. + */ + @Prop() cssClass: string; + + /** + * If true, the popover will be dismissed when the backdrop is clicked. Defaults to `true`. + */ + @Prop() enableBackdropDismiss = true; + + /** + * The event to pass to the popover animation. + */ + @Prop() ev: Event; + + /** + * If true, a backdrop will be displayed behind the popover. Defaults to `true`. + */ + @Prop() showBackdrop = true; + + /** + * If true, the popover will be translucent. Defaults to `false`. + */ + @Prop() translucent = false; + + /** + * If true, the popover will animate. Defaults to `true`. + */ + @Prop() willAnimate = true; + /** * Emitted after the popover has loaded. */ @@ -63,40 +128,9 @@ export class Popover { */ @Event() ionPopoverDidUnload: EventEmitter; - @Prop({ connect: 'ion-animation-controller' }) animationCtrl: AnimationController; - @Prop({ context: 'config' }) config: Config; - @Prop({ context: 'dom' }) dom: DomController; - /** - * The color to use from your Sass `$colors` map. - * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. - * For more information, see [Theming your App](/docs/theming/theming-your-app). + * Present the popover overlay after it has been created. */ - @Prop() color: string; - - /** - * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. - * For more information, see [Platform Styles](/docs/theming/platform-specific-styles). - */ - @Prop() mode: 'ios' | 'md'; - - @Prop() component: string; - @Prop() data: any = {}; - @Prop() cssClass: string; - @Prop() enableBackdropDismiss = true; - @Prop() enterAnimation: AnimationBuilder; - @Prop() leaveAnimation: AnimationBuilder; - @Prop() ev: Event; - @Prop() popoverId: number; - @Prop() showBackdrop = true; - @Prop() translucent = false; - @Prop() willAnimate = true; - @Prop({ mutable: true }) delegate: FrameworkDelegate; - - private animation: Animation; - private usersComponentElement: HTMLElement; - @Method() present() { if (this.animation) { @@ -141,6 +175,9 @@ export class Popover { }); } + /** + * Dismiss the popover overlay after it has been presented. + */ @Method() dismiss(data?: any, role?: string) { if (this.animation) { @@ -224,8 +261,7 @@ export class Popover { onClick={this.backdropClick.bind(this)} class={{ ...backdropClasses - }} - />, + }}>,
diff --git a/packages/core/src/components/popover/readme.md b/packages/core/src/components/popover/readme.md index 4b0bf6c9e7..ae73730aac 100644 --- a/packages/core/src/components/popover/readme.md +++ b/packages/core/src/components/popover/readme.md @@ -1,6 +1,27 @@ # ion-popover +A Popover is a dialog that appears on top of the current page. It can be used for anything, but generally it is used for overflow actions that don't fit in the navigation bar. +### Creating + +Popovers can be created using a [Popover Controller](../../popover-controller/PopoverController). They can be customized by passing popover options in the first argument of the popover controller's create method. + +### Presenting + +To present a popover, call the `present` method on a popover instance. In order to position the popover relative to the element clicked, a click event needs to be passed into the options of the the `present` method. If the event is not passed, the popover will be positioned in the center of the viewport. + +```javascript +async function presentPopover() { + const popoverController = document.querySelector('ion-popover-controller'); + await popoverController.componentOnReady(); + + const popoverElement = await popoverController.create({ + component: 'profile-page', + ev: event + }); + return await popoverElement.present(); +} +``` @@ -20,16 +41,23 @@ For more information, see [Theming your App](/docs/theming/theming-your-app). string +The component to display inside of the popover. + #### cssClass string +Additional classes to apply for custom CSS. If multiple classes are +provided they should be separated by spaces. + #### data any +The data to pass to the popover component. + #### delegate @@ -40,21 +68,29 @@ any boolean +If true, the popover will be dismissed when the backdrop is clicked. Defaults to `true`. + #### enterAnimation +Animation to use when the popover is presented. + #### ev +The event to pass to the popover animation. + #### leaveAnimation +Animation to use when the popover is dismissed. + #### mode @@ -65,25 +101,26 @@ Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles). -#### popoverId - -number - - #### showBackdrop boolean +If true, a backdrop will be displayed behind the popover. Defaults to `true`. + #### translucent boolean +If true, the popover will be translucent. Defaults to `false`. + #### willAnimate boolean +If true, the popover will animate. Defaults to `true`. + ## Attributes @@ -100,16 +137,23 @@ For more information, see [Theming your App](/docs/theming/theming-your-app). string +The component to display inside of the popover. + #### css-class string +Additional classes to apply for custom CSS. If multiple classes are +provided they should be separated by spaces. + #### data any +The data to pass to the popover component. + #### delegate @@ -120,21 +164,29 @@ any boolean +If true, the popover will be dismissed when the backdrop is clicked. Defaults to `true`. + #### enter-animation +Animation to use when the popover is presented. + #### ev +The event to pass to the popover animation. + #### leave-animation +Animation to use when the popover is dismissed. + #### mode @@ -145,25 +197,26 @@ Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles). -#### popover-id - -number - - #### show-backdrop boolean +If true, a backdrop will be displayed behind the popover. Defaults to `true`. + #### translucent boolean +If true, the popover will be translucent. Defaults to `false`. + #### will-animate boolean +If true, the popover will animate. Defaults to `true`. + ## Events @@ -201,9 +254,13 @@ Emitted before the popover has presented. #### dismiss() +Dismiss the popover overlay after it has been presented. + #### present() +Present the popover overlay after it has been created. + ----------------------------------------------