chips component initial commit

ionic/components.ios.scss

@@ -12,6 +12,7 @@
   "components/button/button.ios",
   "components/card/card.ios",
   "components/checkbox/checkbox.ios",
+  "components/chip/chip.ios",
   "components/content/content.ios",
   "components/item/item.ios",
   "components/label/label.ios",

ionic/components.md.scss

@@ -12,6 +12,7 @@
   "components/button/button.md",
   "components/card/card.md",
   "components/checkbox/checkbox.md",
+  "components/chip/chip.md",
   "components/content/content.md",
   "components/item/item.md",
   "components/label/label.md",

ionic/components/chip/chip.ios.scss

@@ -0,0 +1,22 @@
+@import "./chip";
+
+// Material Design Chip
+// --------------------------------------------------
+
+ion-chip {
+}
+
+
+// Generate Material Design Chip Colors
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors-ios {
+
+  ion-chip {
+    > ion-icon[#{$color-name}] {
+      background-color: $color-value;
+      color: inverse($color-value) !important;
+    }
+  }
+
+}

ionic/components/chip/chip.md.scss

@@ -0,0 +1,22 @@
+@import "./chip";
+
+// Material Design Chip
+// --------------------------------------------------
+
+ion-chip {
+}
+
+
+// Generate Material Design Chip Colors
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors-md {
+
+  ion-chip {
+    > ion-icon [#{$color-name}] {
+      background-color: $color-value;
+      color: inverse($color-value) !important;
+    }
+  }
+
+}

ionic/components/chip/chip.scss

@@ -0,0 +1,69 @@
+@import "../../globals.core";
+
+// Chip
+// --------------------------------------------------
+
+
+ion-chip {
+  font-size: 13px;
+  font-weight: normal;
+  background: rgba(0,0,0,0.12);
+  display: inline-block;
+  height: 32px;
+  line-height: 32px;
+  border-radius: 16px;
+  padding: 0 12px;
+  box-sizing: border-box;
+  vertical-align: middle;
+  display: inline-flex;
+  align-self: center;
+
+  margin: 2px 0;
+
+  ion-label {
+    margin: 0;
+    color: rgba(0,0,0,0.87);
+  }
+
+  > ion-icon, > ion-avatar {
+    width: 32px;
+    height: 32px;
+    margin-left: -12px;
+    vertical-align: top;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 32px;
+    color: rgba(0,0,0,0.87);
+    // .flex-shrink(0);
+    font-size: 18px;
+    // .flexbox();
+    // .align-items(center);
+    // .justify-content(center);
+    img {
+        max-width: 100%;
+        max-height: 100%;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        display: block;
+    }
+    + ion-label {
+      margin-left: 8px;
+    }
+  }
+
+  ion-avatar {
+    min-width: 32px;
+    min-height: 32px;
+  }
+
+  .button {
+    min-height: inherit;
+    margin-right: -4px;
+    margin-left: 8px;
+  }
+
+  ion-icon[name="close-circle"] {
+    font-size: 1.2em;
+  }
+}

ionic/components/chip/test/basic/index.ts

@@ -0,0 +1,10 @@
+import {App, IonicApp} from 'ionic/ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+  constructor(app: IonicApp) {
+  }
+}

ionic/components/chip/test/basic/main.html

@@ -0,0 +1,18 @@
+<ion-toolbar>
+  <ion-title>Chips With Text</ion-title>
+</ion-toolbar>
+
+<ion-content padding style="text-align:center">
+
+  <p>
+    <ion-chip>
+      <ion-label>Default</ion-label>
+    </ion-chip>
+  </p>
+  <p>
+    <ion-chip>
+      <ion-label>Another Longer Text</ion-label>
+    </ion-chip>
+  </p>
+
+</ion-content>

ionic/components/chip/test/delete/index.ts

@@ -0,0 +1,14 @@
+import {App, IonicApp} from 'ionic/ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+  constructor(app: IonicApp) {
+  }
+
+  deleteClicked() {
+    console.log('deleteClicked');
+  }
+}

ionic/components/chip/test/delete/main.html

@@ -0,0 +1,38 @@
+<ion-toolbar>
+  <ion-title>Chips With Delete</ion-title>
+</ion-toolbar>
+
+<ion-content padding style="text-align:center">
+
+  <p>
+    <ion-chip>
+      <ion-label>Default</ion-label>
+      <button clear dark (click)="deleteClicked()">
+        <ion-icon name="close-circle"></ion-icon>
+      </button>
+    </ion-chip>
+  </p>
+
+  <p>
+    <ion-chip>
+      <ion-icon name="pin" primary></ion-icon>
+      <ion-label>Primary</ion-label>
+      <button clear dark (click)="deleteClicked()">
+        <ion-icon name="close-circle"></ion-icon>
+      </button>
+    </ion-chip>
+  </p>
+
+  <p>
+    <ion-chip>
+      <ion-avatar>
+        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+      </ion-avatar>
+      <ion-label>Default</ion-label>
+      <button clear dark (click)="deleteClicked()">
+        <ion-icon name="close-circle"></ion-icon>
+      </button>
+    </ion-chip>
+  </p>
+
+</ion-content>

ionic/components/chip/test/icon/index.ts

@@ -0,0 +1,10 @@
+import {App, IonicApp} from 'ionic/ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+  constructor(app: IonicApp) {
+  }
+}

ionic/components/chip/test/icon/main.html

@@ -0,0 +1,44 @@
+<ion-toolbar>
+  <ion-title>Chips With Icon</ion-title>
+</ion-toolbar>
+
+<ion-content padding style="text-align:center">
+
+  <p>
+    <ion-chip>
+      <ion-icon name="pin"></ion-icon>
+      <ion-label>Default</ion-label>
+    </ion-chip>
+  </p>
+  <p>
+    <ion-chip>
+      <ion-icon name="pin" primary></ion-icon>
+      <ion-label>Primary</ion-label>
+    </ion-chip>
+  </p>
+  <p>
+    <ion-chip>
+      <ion-icon name="pin" secondary></ion-icon>
+      <ion-label>Secondary</ion-label>
+    </ion-chip>
+  </p>
+  <p>
+    <ion-chip>
+      <ion-icon name="pin" danger></ion-icon>
+      <ion-label>Danger</ion-label>
+    </ion-chip>
+  </p>
+  <p>
+    <ion-chip>
+      <ion-icon name="pin" light></ion-icon>
+      <ion-label>Light</ion-label>
+    </ion-chip>
+  </p>
+  <p>
+    <ion-chip>
+      <ion-icon name="pin" dark></ion-icon>
+      <ion-label>Dark</ion-label>
+    </ion-chip>
+  </p>
+
+</ion-content>

ionic/components/chip/test/image/index.ts

@@ -0,0 +1,10 @@
+import {App, IonicApp} from 'ionic/ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+  constructor(app: IonicApp) {
+  }
+}

ionic/components/chip/test/image/main.html

@@ -0,0 +1,16 @@
+<ion-toolbar>
+  <ion-title>Chips With Image</ion-title>
+</ion-toolbar>
+
+<ion-content padding style="text-align:center">
+
+  <p>
+    <ion-chip>
+      <ion-avatar>
+        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+      </ion-avatar>
+      <ion-label>Default</ion-label>
+    </ion-chip>
+  </p>
+
+</ion-content>