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

core/src/components/split-pane/readme.md

@@ -38,7 +38,7 @@ By default, the split pane will expand when the screen is larger than 992px. To
 
 ```html
 <ion-split-pane contentId="main">
-  <!--  our side menu  -->
+  <!--  the side menu  -->
   <ion-menu contentId="main">
     <ion-header>
       <ion-toolbar>
@@ -57,7 +57,7 @@ By default, the split pane will expand when the screen is larger than 992px. To
 
 ```html
 <ion-split-pane content-id="main">
-  <!--  our side menu  -->
+  <!--  the side menu  -->
   <ion-menu content-id="main">
     <ion-header>
       <ion-toolbar>
@@ -92,7 +92,7 @@ import {
 export const SplitPlaneExample: React.SFC<{}> = () => (
   <IonContent>
     <IonSplitPane contentId="main">
-      {/*--  our side menu  --*/}
+      {/*--  the side menu  --*/}
       <IonMenu contentId="main">
         <IonHeader>
           <IonToolbar>
@@ -109,12 +109,43 @@ export const SplitPlaneExample: React.SFC<{}> = () => (
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'split-pane-example',
+  styleUrl: 'split-pane-example.css'
+})
+export class SplitPaneExample {
+  render() {
+    return [
+      <ion-split-pane content-id="main">
+        {/*  the side menu */}
+        <ion-menu content-id="main">
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Menu</ion-title>
+            </ion-toolbar>
+          </ion-header>
+        </ion-menu>
+
+        {/* the main content */}
+        <ion-router-outlet id="main"></ion-router-outlet>
+      </ion-split-pane>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
 <template>
   <ion-split-pane content-id="main">
-    <!--  our side menu  -->
+    <!--  the side menu  -->
     <ion-menu content-id="main">
       <ion-header>
         <ion-toolbar>

core/src/components/split-pane/usage/angular.md

@@ -1,6 +1,6 @@
 ```html
 <ion-split-pane contentId="main">
-  <!--  our side menu  -->
+  <!--  the side menu  -->
   <ion-menu contentId="main">
     <ion-header>
       <ion-toolbar>

core/src/components/split-pane/usage/javascript.md

@@ -1,6 +1,6 @@
 ```html
 <ion-split-pane content-id="main">
-  <!--  our side menu  -->
+  <!--  the side menu  -->
   <ion-menu content-id="main">
     <ion-header>
       <ion-toolbar>

core/src/components/split-pane/usage/react.md

@@ -14,7 +14,7 @@ import {
 export const SplitPlaneExample: React.SFC<{}> = () => (
   <IonContent>
     <IonSplitPane contentId="main">
-      {/*--  our side menu  --*/}
+      {/*--  the side menu  --*/}
       <IonMenu contentId="main">
         <IonHeader>
           <IonToolbar>

core/src/components/split-pane/usage/stencil.md

@@ -0,0 +1,27 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'split-pane-example',
+  styleUrl: 'split-pane-example.css'
+})
+export class SplitPaneExample {
+  render() {
+    return [
+      <ion-split-pane content-id="main">
+        {/*  the side menu */}
+        <ion-menu content-id="main">
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Menu</ion-title>
+            </ion-toolbar>
+          </ion-header>
+        </ion-menu>
+
+        {/* the main content */}
+        <ion-router-outlet id="main"></ion-router-outlet>
+      </ion-split-pane>
+    ];
+  }
+}
+```

core/src/components/split-pane/usage/vue.md

@@ -1,7 +1,7 @@
 ```html
 <template>
   <ion-split-pane content-id="main">
-    <!--  our side menu  -->
+    <!--  the side menu  -->
     <ion-menu content-id="main">
       <ion-header>
         <ion-toolbar>