diff --git a/core/src/components.d.ts b/core/src/components.d.ts index bdb8715fdd..b3087222aa 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -647,8 +647,17 @@ declare global { declare global { interface HTMLIonBackdropElement extends HTMLStencilElement { + /** + * If true, the backdrop will stop propogation on tap. Defaults to `true`. + */ 'stopPropagation': boolean; + /** + * If true, the backdrop will can be clicked and will emit the `ionBackdropTap` event. Defaults to `true`. + */ 'tappable': boolean; + /** + * If true, the backdrop will be visible. Defaults to `true`. + */ 'visible': boolean; } var HTMLIonBackdropElement: { @@ -668,9 +677,21 @@ declare global { } namespace JSXElements { export interface IonBackdropAttributes extends HTMLAttributes { + /** + * Emitted when the backdrop is tapped. + */ 'onIonBackdropTap'?: (event: CustomEvent) => void; + /** + * If true, the backdrop will stop propogation on tap. Defaults to `true`. + */ 'stopPropagation'?: boolean; + /** + * If true, the backdrop will can be clicked and will emit the `ionBackdropTap` event. Defaults to `true`. + */ 'tappable'?: boolean; + /** + * If true, the backdrop will be visible. Defaults to `true`. + */ 'visible'?: boolean; } } diff --git a/core/src/components/backdrop/backdrop.tsx b/core/src/components/backdrop/backdrop.tsx index 23201c6ebb..d07faf57b8 100644 --- a/core/src/components/backdrop/backdrop.tsx +++ b/core/src/components/backdrop/backdrop.tsx @@ -15,10 +15,24 @@ export class Backdrop { private lastClick = -10000; + /** + * If true, the backdrop will be visible. Defaults to `true`. + */ @Prop() visible = true; + + /** + * If true, the backdrop will can be clicked and will emit the `ionBackdropTap` event. Defaults to `true`. + */ @Prop() tappable = true; + + /** + * If true, the backdrop will stop propogation on tap. Defaults to `true`. + */ @Prop() stopPropagation = true; + /** + * Emitted when the backdrop is tapped. + */ @Event() ionBackdropTap: EventEmitter; componentDidLoad() { diff --git a/core/src/components/backdrop/readme.md b/core/src/components/backdrop/readme.md index 8fc7a01f4e..a47ab3a33c 100644 --- a/core/src/components/backdrop/readme.md +++ b/core/src/components/backdrop/readme.md @@ -2,10 +2,6 @@ Backdrops are full screen components that overlay other components. They are useful behind components that transition in on top of other content and can be used to dismiss that component. -```html - -``` - @@ -16,16 +12,22 @@ Backdrops are full screen components that overlay other components. They are use boolean +If true, the backdrop will stop propogation on tap. Defaults to `true`. + #### tappable boolean +If true, the backdrop will can be clicked and will emit the `ionBackdropTap` event. Defaults to `true`. + #### visible boolean +If true, the backdrop will be visible. Defaults to `true`. + ## Attributes @@ -33,21 +35,29 @@ boolean boolean +If true, the backdrop will stop propogation on tap. Defaults to `true`. + #### tappable boolean +If true, the backdrop will can be clicked and will emit the `ionBackdropTap` event. Defaults to `true`. + #### visible boolean +If true, the backdrop will be visible. Defaults to `true`. + ## Events #### ionBackdropTap +Emitted when the backdrop is tapped. + ---------------------------------------------- diff --git a/core/src/components/backdrop/usage/angular.md b/core/src/components/backdrop/usage/angular.md new file mode 100644 index 0000000000..ad7b1f8e8c --- /dev/null +++ b/core/src/components/backdrop/usage/angular.md @@ -0,0 +1,31 @@ +```html + + + + + + + + + + + + + + +``` + +```javascript +import { Component } from '@angular/core'; + +@Component({ + selector: 'backdrop-example', + templateUrl: 'backdrop-example.html', + styleUrls: ['./backdrop-example.css'], +}) +export class BackdropExample { + enableBackdropDismiss = false; + showBackdrop = false; + shouldPropagate = false; +} +``` diff --git a/core/src/components/backdrop/usage/javascript.md b/core/src/components/backdrop/usage/javascript.md new file mode 100644 index 0000000000..e77fa207d3 --- /dev/null +++ b/core/src/components/backdrop/usage/javascript.md @@ -0,0 +1,23 @@ +```html + + + + + + + + + + + + + + +``` + +```javascript +var backdrop = document.getElementById('customBackdrop'); +backdrop.visible = false; +backdrop.tappable = false; +backdrop.stopPropagation = false; +``` \ No newline at end of file