docs(stencil): add stencil usage to components (#21261)

core/src/components/backdrop/readme.md

@@ -40,7 +40,7 @@ import { Component } from '@angular/core';
   styleUrls: ['./backdrop-example.css'],
 })
 export class BackdropExample {
-  backdropDismiss = false;
+  enableBackdropDismiss = false;
   showBackdrop = false;
   shouldPropagate = false;
 }
@@ -100,6 +100,46 @@ export const BackdropExample: React.FC = () => (
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'backdrop-example',
+  styleUrl: 'backdrop-example.css'
+})
+export class BackdropExample {
+  render() {
+    const enableBackdropDismiss = false;
+    const showBackdrop = false;
+    const shouldPropagate = false;
+
+    return [
+      // 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>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
@@ -129,7 +169,7 @@ export const BackdropExample: React.FC = () => (
 
   @Component()
   export default class Example extends Vue {
-    backdropDismiss = false;
+    enableBackdropDismiss = false;
     showBackdrop = false;
     shouldPropagate = false;
   }

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

@@ -28,7 +28,7 @@ import { Component } from '@angular/core';
   styleUrls: ['./backdrop-example.css'],
 })
 export class BackdropExample {
-  backdropDismiss = false;
+  enableBackdropDismiss = false;
   showBackdrop = false;
   shouldPropagate = false;
 }

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

@@ -0,0 +1,36 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'backdrop-example',
+  styleUrl: 'backdrop-example.css'
+})
+export class BackdropExample {
+  render() {
+    const enableBackdropDismiss = false;
+    const showBackdrop = false;
+    const shouldPropagate = false;
+
+    return [
+      // 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>
+    ];
+  }
+}
+```

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

@@ -25,7 +25,7 @@
 
   @Component()
   export default class Example extends Vue {
-    backdropDismiss = false;
+    enableBackdropDismiss = false;
     showBackdrop = false;
     shouldPropagate = false;
   }