test(components): fix titles and add more chip examples

2025-08-23 05:58:26 +08:00 · 2018-02-07 15:56:09 -05:00
parent 95136e7ae9
commit 4299a50461
12 changed files with 88 additions and 18 deletions
--- a/packages/core/src/components/chip/test/standalone/index.html
+++ b/packages/core/src/components/chip/test/standalone/index.html
@ -1,14 +1,14 @@
 <!DOCTYPE html>
 <html dir="ltr">
-
 <head>
  <meta charset="UTF-8">
  <title>Chip - Standalone</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.js"></script>
 </head>
-
 <body>
+  <h2>Text Chips</h2>
+
  <ion-chip>
    <ion-label>Default</ion-label>
  </ion-chip>
@ -21,6 +21,8 @@
    <ion-label>Another With Longer Text</ion-label>
  </ion-chip>

+  <h2>Color Chips</h2>
+
  <ion-chip color="primary">
    <ion-icon name="heart" color="dark"></ion-icon>
    <ion-label>Primary</ion-label>
@ -30,14 +32,12 @@
    <ion-label color="dark">Secondary w/ Dark label</ion-label>
  </ion-chip>

-  <ion-chip color="warning">
-    <ion-label>Warning</ion-label>
-  </ion-chip>
-
  <ion-chip color="danger">
    <ion-label>Danger</ion-label>
  </ion-chip>

+  <h2>Icon Chips</h2>
+
  <ion-chip>
    <ion-icon name="pin"></ion-icon>
    <ion-label>Default</ion-label>
@ -47,5 +47,75 @@
    <ion-label>Secondary</ion-label>
    <ion-icon name="pin" color="secondary"></ion-icon>
  </ion-chip>
+
+  <h2>Avatar Chips</h2>
+
+  <ion-chip>
+    <ion-avatar>
+      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+    </ion-avatar>
+    <ion-label>Default</ion-label>
+  </ion-chip>
+
+  <ion-chip>
+    <ion-label>Right Avatar</ion-label>
+    <ion-avatar>
+      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+    </ion-avatar>
+  </ion-chip>
+
+  <h2>Delete Chips</h2>
+
+  <ion-chip id="chip1">
+    <ion-label>Default</ion-label>
+    <ion-chip-button fill="clear" onclick="del('chip1')" class="my-custom-chip">
+      <ion-icon name="close-circle"></ion-icon>
+    </ion-chip-button>
+  </ion-chip>
+
+  <ion-chip id="chip2">
+    <ion-icon name="pin"></ion-icon>
+    <ion-label>With Icon</ion-label>
+    <ion-chip-button onclick="del('chip2')">
+      <ion-icon name="close"></ion-icon>
+    </ion-chip-button>
+  </ion-chip>
+
+  <ion-chip id="chip3">
+    <ion-avatar>
+      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+    </ion-avatar>
+    <ion-label>With Avatar</ion-label>
+    <ion-chip-button fill="clear" color="dark" onclick="del('chip3')">
+      <ion-icon name="close-circle"></ion-icon>
+    </ion-chip-button>
+  </ion-chip>
+
+  <ion-chip color="primary" id="chip4">
+    <ion-icon name="pin"></ion-icon>
+    <ion-label>Primary</ion-label>
+    <ion-chip-button fill="clear" onclick="del('chip4')">
+      <ion-icon name="close-circle"></ion-icon>
+    </ion-chip-button>
+  </ion-chip>
+
+  <ion-item>
+    <ion-label>Chip Item</ion-label>
+    <ion-chip slot="end" id="chip5">
+      <ion-icon name="pin" color="primary"></ion-icon>
+      <ion-label>Default</ion-label>
+      <ion-chip-button fill="clear" color="light" onclick="del('chip5')">
+        <ion-icon name="close-circle"></ion-icon>
+      </ion-chip-button>
+    </ion-chip>
+  </ion-item>
+
+  <script>
+    function del(chip) {
+      console.log('called del', chip);
+      var delChip = document.getElementById(chip);
+      delChip.parentNode.removeChild(delChip);
+    }
+  </script>
 </body>
 </html>
--- a/packages/core/src/components/item/test/groups/index.html
+++ b/packages/core/src/components/item/test/groups/index.html
@ -3,7 +3,7 @@

 <head>
  <meta charset="UTF-8">
-  <title>Item - Basic</title>
+  <title>Item - Groups</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
  <script src="/dist/ionic.js"></script>
 </head>
--- a/packages/core/src/components/menu-toggle/test/basic/index.html
+++ b/packages/core/src/components/menu-toggle/test/basic/index.html
@ -3,7 +3,7 @@

 <head>
  <meta charset="UTF-8">
-  <title>Menu - Basic</title>
+  <title>Menu Toggle - Basic</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
  <script src="/dist/ionic.js"></script>
 </head>
--- a/packages/core/src/components/menu-toggle/test/button/index.html
+++ b/packages/core/src/components/menu-toggle/test/button/index.html
@ -3,7 +3,7 @@

 <head>
  <meta charset="UTF-8">
-  <title>Menu - Basic</title>
+  <title>Menu - Button</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
  <script src="/dist/ionic.js"></script>
 </head>
--- a/packages/core/src/components/menu-toggle/test/list/index.html
+++ b/packages/core/src/components/menu-toggle/test/list/index.html
@ -3,7 +3,7 @@

 <head>
  <meta charset="UTF-8">
-  <title>Menu - Basic</title>
+  <title>Menu - List</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
  <script src="/dist/ionic.js"></script>
 </head>
--- a/packages/core/src/components/menu/test/standalone/index.html
+++ b/packages/core/src/components/menu/test/standalone/index.html
@ -45,7 +45,7 @@

    <ion-header>
      <ion-toolbar>
-        <ion-title>Menu - Basic</ion-title>
+        <ion-title>Menu - Standalone</ion-title>
      </ion-toolbar>
    </ion-header>

--- a/packages/core/src/components/modal/test/host-elements/index.html
+++ b/packages/core/src/components/modal/test/host-elements/index.html
@ -3,7 +3,7 @@

 <head>
  <meta charset="UTF-8">
-  <title>Modal - Basic</title>
+  <title>Modal - Host Elements</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.js"></script>
 </head>
@ -13,7 +13,7 @@
    <ion-page>
      <ion-header>
        <ion-toolbar>
-          <ion-title>Modal - Basic</ion-title>
+          <ion-title>Modal - Host Elements</ion-title>
        </ion-toolbar>
      </ion-header>

--- a/packages/core/src/components/skeleton-text/test/basic/index.html
+++ b/packages/core/src/components/skeleton-text/test/basic/index.html
@ -2,7 +2,7 @@
 <html dir="ltr">
 <head>
  <meta charset="UTF-8">
-  <title>Select - Basic</title>
+  <title>Skeleton Text - Basic</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.js"></script>
 </head>
--- a/packages/core/src/components/tabs/test/nav/index.html
+++ b/packages/core/src/components/tabs/test/nav/index.html
@ -2,7 +2,7 @@
 <html dir="ltr">
 <head>
  <meta charset="UTF-8">
-  <title>Tab - Basic</title>
+  <title>Tab - Nav</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
  <script src="/dist/ionic.js"></script>
  <script type="text/javascript">
--- a/packages/core/src/components/tabs/test/translucent/index.html
+++ b/packages/core/src/components/tabs/test/translucent/index.html
@ -2,7 +2,7 @@
 <html dir="ltr">
 <head>
  <meta charset="UTF-8">
-  <title>Tab - Basic</title>
+  <title>Tab - Translucent</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.js"></script>
  <script type="text/javascript">
--- a/packages/core/src/components/tabs/test/vanilla/index.html
+++ b/packages/core/src/components/tabs/test/vanilla/index.html
@ -2,7 +2,7 @@
 <html dir="ltr">
 <head>
  <meta charset="UTF-8">
-  <title>Tab - Basic</title>
+  <title>Tab - Vanilla</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
  <script src="/dist/ionic.js"></script>
  <script type="text/javascript">
--- a/packages/core/src/components/toolbar/test/colors/index.html
+++ b/packages/core/src/components/toolbar/test/colors/index.html
@ -2,7 +2,7 @@
 <html dir="ltr">
 <head>
  <meta charset="UTF-8">
-  <title>Toolbar - Basic</title>
+  <title>Toolbar - Colors</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.js"></script>
 </head>