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