docs(backdrop): update docs and add usage

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;
     }
   }

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() {

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
-<ion-backdrop></ion-backdrop>
-```
-
 
 <!-- Auto Generated Below -->
 
@@ -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.
+
 
 
 ----------------------------------------------

core/src/components/backdrop/usage/angular.md

@@ -0,0 +1,31 @@
+```html
+<!-- Default backdrop -->
+<ion-backdrop></ion-backdrop>
+
+<!-- Backdrop that is not tappable -->
+<ion-backdrop tappable="false"></ion-backdrop>
+
+<!-- Backdrop that is not visible -->
+<ion-backdrop visible="false"></ion-backdrop>
+
+<!-- Backdrop with propagation -->
+<ion-backdrop stopPropagation="false"></ion-backdrop>
+
+<!-- Backdrop that sets dynamic properties -->
+<ion-backdrop [tappable]="enableBackdropDismiss" [visible]="showBackdrop" [stopPropagation]="shouldPropagate"></ion-backdrop>
+```
+
+```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;
+}
+```

core/src/components/backdrop/usage/javascript.md

@@ -0,0 +1,23 @@
+```html
+<!-- Default backdrop -->
+<ion-backdrop></ion-backdrop>
+
+<!-- Backdrop that is not tappable -->
+<ion-backdrop tappable="false"></ion-backdrop>
+
+<!-- Backdrop that is not visible -->
+<ion-backdrop visible="false"></ion-backdrop>
+
+<!-- Backdrop with propagation -->
+<ion-backdrop stop-propagation="false"></ion-backdrop>
+
+<!-- Backdrop that sets dynamic properties -->
+<ion-backdrop id="customBackdrop"></ion-backdrop>
+```
+
+```javascript
+var backdrop = document.getElementById('customBackdrop');
+backdrop.visible = false;
+backdrop.tappable = false;
+backdrop.stopPropagation = false;
+```