docs(overlays): add usage by framework

core/src/components/loading/readme.md

@@ -13,21 +13,6 @@ Loading indicators can be created using a [Loading Controller](../../loading-con
 The loading indicator can be dismissed automatically after a specific amount of time by passing the number of milliseconds to display it in the `duration` of the loading options. By default the loading indicator will show even during page changes, but this can be disabled by setting `dismissOnPageChange` to `true`. To dismiss the loading indicator after creation, call the `dismiss()` method on the loading instance. The `onDidDismiss` function can be called to perform an action after the loading indicator is dismissed.
 
 
-```javascript
-async function presentLoading() {
-  const loadingController = document.querySelector('ion-loading-controller');
-  await loadingController.componentOnReady();
-
-  const loadingElement = await loadingController.create({
-    content: 'Please wait...',
-    spinner: 'crescent',
-    duration: 2000
-  });
-  return await loadingElement.present();
-}
-```
-
-
 <!-- Auto Generated Below -->
 
 

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

@@ -0,0 +1,34 @@
+```javascript
+import { Component } from '@angular/core';
+import { LoadingController } from '@ionic/angular';
+
+@Component({
+  selector: 'loading-example',
+  templateUrl: 'loading-example.html',
+  styleUrls: ['./loading-example.css'],
+})
+export class LoadingExample {
+
+  constructor(public loadingController: LoadingController) {}
+
+  presentLoading() {
+    const loading = this.loadingController.create({
+      message: 'Hellooo',
+      duration: 2000
+    });
+    loading.present();
+  }
+
+  presentLoadingWithOptions() {
+    const loading = this.loadingController.create({
+      spinner: 'hide',
+      duration: 5000,
+      content: 'Please wait...',
+      translucent: true,
+      cssClass: 'custom-class custom-loading'
+    });
+    loading.present();
+  }
+
+}
+```

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

@@ -0,0 +1,26 @@
+```javascript
+async function presentLoading() {
+  const loadingController = document.querySelector('ion-loading-controller');
+  await loadingController.componentOnReady();
+
+  const loading = await loadingController.create({
+    message: 'Hellooo',
+    duration: 2000
+  });
+  return await loading.present();
+}
+
+async function presentLoadingWithOptions() {
+  const loadingController = document.querySelector('ion-loading-controller');
+  await loadingController.componentOnReady();
+
+  const loading = await loadingController.create({
+    spinner: 'hide',
+    duration: 5000,
+    content: 'Please wait...',
+    translucent: true,
+    cssClass: 'custom-class custom-loading'
+  });
+  return await loading.present();
+}
+```

core/src/components/popover/readme.md

@@ -10,18 +10,6 @@ Popovers can be created using a [Popover Controller](../../popover-controller/Po
 
 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(event) {
-  const popoverController = document.querySelector('ion-popover-controller');
-  await popoverController.componentOnReady();
-
-  const popoverElement = await popoverController.create({
-    component: 'profile-page',
-    ev: event
-  });
-  return await popoverElement.present();
-}
-```
 
 <!-- Auto Generated Below -->
 

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

@@ -0,0 +1,24 @@
+```javascript
+import { Component } from '@angular/core';
+import { PopoverController } from '@ionic/angular';
+
+@Component({
+  selector: 'popover-example',
+  templateUrl: 'popover-example.html',
+  styleUrls: ['./popover-example.css'],
+})
+export class PopoverExample {
+
+  constructor(public popoverController: PopoverController) {}
+
+  presentPopover(ev: any) {
+    const popover = this.popoverController.create({
+      component: 'popover-example-page',
+      ev: event,
+      translucent: true
+    });
+    popover.present();
+  }
+
+}
+```

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

@@ -0,0 +1,13 @@
+```javascript
+async function presentPopover(ev) {
+  const popoverController = document.querySelector('ion-popover-controller');
+  await popoverController.componentOnReady();
+
+  const popover = await popoverController.create({
+    component: 'popover-example-page',
+    ev: event,
+    translucent: true
+  });
+  return await popover.present();
+}
+```

core/src/components/toast/readme.md

@@ -15,29 +15,6 @@ Toasts can be positioned at the top, bottom or middle of the viewport. The posit
 The toast can be dismissed automatically after a specific amount of time by passing the number of milliseconds to display it in the `duration` of the toast options. If `showCloseButton` is set to true, then the close button will dismiss the toast. To dismiss the toast after creation, call the `dismiss()` method on the instance.
 
 
-```html
-<ion-button onClick="presentToast()">
-  Show Toast
-</ion-button>
-```
-
-```javascript
-async function presentToast() {
-  const toastController = document.querySelector('ion-toast-controller');
-  await toastController.componentOnReady();
-
-  const toastElement = await toastController.create({
-    message: 'click to close',
-    duration: 300,
-    position: 'top',
-    showCloseButton: true,
-    closeButtonText: 'closing time'
-  });
-  return await toastElement.present();
-}
-```
-
-
 <!-- Auto Generated Below -->
 
 

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

@@ -0,0 +1,33 @@
+```javascript
+import { Component } from '@angular/core';
+import { ToastController } from '@ionic/angular';
+
+@Component({
+  selector: 'toast-example',
+  templateUrl: 'toast-example.html',
+  styleUrls: ['./toast-example.css'],
+})
+export class ToastExample {
+
+  constructor(public toastController: ToastController) {}
+
+  presentToast() {
+    const toast = this.toastController.create({
+      message: 'Your settings have been saved.',
+      duration: 2000
+    });
+    toast.present();
+  }
+
+  presentToastWithOptions() {
+    const toast = this.toastController.create({
+      message: 'Click to Close',
+      showCloseButton: true,
+      position: 'top',
+      closeButtonText: 'Done'
+    });
+    toast.present();
+  }
+
+}
+```

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

@@ -0,0 +1,25 @@
+```javascript
+async function presentToast() {
+  const toastController = document.querySelector('ion-toast-controller');
+  await toastController.componentOnReady();
+
+  const toast = await toastController.create({
+    message: 'Your settings have been saved.',
+    duration: 2000
+  });
+  return await toast.present();
+}
+
+async function presentToastWithOptions() {
+  const toastController = document.querySelector('ion-toast-controller');
+  await toastController.componentOnReady();
+
+  const toast = await toastController.create({
+    message: 'Click to Close',
+    showCloseButton: true,
+    position: 'top',
+    closeButtonText: 'Done'
+  });
+  return await toast.present();
+}
+```