chore(): moved themes into ionic and created components folder.

2025-08-22 05:21:52 +08:00 · 2017-06-21 10:14:08 -05:00
parent bd5b67304d
commit d0844c585d
213 changed files with 6387 additions and 0 deletions
--- a/packages/ionic/demos/user-component/index.html
+++ b/packages/ionic/demos/user-component/index.html
@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Ionic</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic-web/ionic.js"></script>
+</head>
+<body>
+
+  <button id="presentModal">Present Modal</button>
+
+  <my-app></my-app>
+
+  <my-other-app></my-other-app>
+
+  <script>
+    document.getElementById('presentModal').addEventListener('click', function() {
+      var userId = Math.round(Math.random() * 10000);
+
+      console.log('open profile modal for userId:', userId);
+
+      Ionic.controller('modal', { component: 'profile-page', componentProps: { userId: userId } }).then(modal => {
+        console.log('start presenting modal, userId:', modal.componentProps.userId);
+
+        modal.present().then(() => {
+          console.log('finished presenting modal, userId:', modal.componentProps.userId);
+        });
+      });
+
+    });
+
+    class MyApp extends HTMLElement {
+
+      constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({mode: 'open'});
+
+        shadowRoot.innerHTML = `
+          <ion-card>
+            <ion-card-header>Header</ion-card-header>
+            <ion-card-content>Content</ion-card-content>
+          </ion-card>
+        `;
+      }
+
+    }
+    customElements.define('my-app', MyApp);
+
+
+    class MyOtherApp extends HTMLElement {
+
+      constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({mode: 'open'});
+
+        shadowRoot.innerHTML = `
+          <style>
+            .card-header {
+              color: blue;
+            }
+            .card-content {
+              color: green;
+            }
+          </style>
+          <ion-card>
+            <ion-card-header>Header</ion-card-header>
+            <ion-card-content>Content</ion-card-content>
+          </ion-card>
+        `;
+      }
+
+    }
+    customElements.define('my-other-app', MyOtherApp);
+
+
+    class ProfilePage extends HTMLElement {
+
+      constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({mode: 'open'});
+
+        shadowRoot.innerHTML = `
+          <ion-header>
+            <ion-toolbar>
+              My Profile
+            </ion-toolbar>
+          </ion-header>
+
+          <ion-content padding>
+            <p>User Id: <span id="userId"></span></p>
+            <p>
+              <ion-button>Dismiss</ion-button>
+            </p>
+          </ion-content>
+        `;
+      }
+
+      connectedCallback() {
+        var btn = this.shadowRoot.querySelector('ion-button');
+
+        btn.addEventListener('click', (uiEvent) => {
+          console.log('dismiss profile page for userId:', this.userId);
+          var ev = new CustomEvent('ionDismiss', { composed: true, bubbles: true });
+          uiEvent.target.dispatchEvent(ev);
+        });
+
+        this.shadowRoot.getElementById('userId').textContent = this.userId;
+      }
+
+    }
+    customElements.define('profile-page', ProfilePage);
+
+  </script>
+
+</body>
+</html>