From e272d6a9ba0c8ff62a8698ebb2822bd7ddcea1a3 Mon Sep 17 00:00:00 2001 From: Eddie Lau 3dd13 Date: Thu, 7 Jan 2016 18:06:32 +0800 Subject: [PATCH] chips component initial commit --- ionic/components.ios.scss | 1 + ionic/components.md.scss | 1 + ionic/components/chip/chip.ios.scss | 22 +++++++ ionic/components/chip/chip.md.scss | 22 +++++++ ionic/components/chip/chip.scss | 69 +++++++++++++++++++++ ionic/components/chip/test/basic/index.ts | 10 +++ ionic/components/chip/test/basic/main.html | 18 ++++++ ionic/components/chip/test/delete/index.ts | 14 +++++ ionic/components/chip/test/delete/main.html | 38 ++++++++++++ ionic/components/chip/test/icon/index.ts | 10 +++ ionic/components/chip/test/icon/main.html | 44 +++++++++++++ ionic/components/chip/test/image/index.ts | 10 +++ ionic/components/chip/test/image/main.html | 16 +++++ 13 files changed, 275 insertions(+) create mode 100644 ionic/components/chip/chip.ios.scss create mode 100644 ionic/components/chip/chip.md.scss create mode 100644 ionic/components/chip/chip.scss create mode 100644 ionic/components/chip/test/basic/index.ts create mode 100644 ionic/components/chip/test/basic/main.html create mode 100644 ionic/components/chip/test/delete/index.ts create mode 100644 ionic/components/chip/test/delete/main.html create mode 100644 ionic/components/chip/test/icon/index.ts create mode 100644 ionic/components/chip/test/icon/main.html create mode 100644 ionic/components/chip/test/image/index.ts create mode 100644 ionic/components/chip/test/image/main.html diff --git a/ionic/components.ios.scss b/ionic/components.ios.scss index 7e9cfa23e4..60d16e7bc8 100644 --- a/ionic/components.ios.scss +++ b/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", diff --git a/ionic/components.md.scss b/ionic/components.md.scss index 044c00ddaa..cf0079ed47 100644 --- a/ionic/components.md.scss +++ b/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", diff --git a/ionic/components/chip/chip.ios.scss b/ionic/components/chip/chip.ios.scss new file mode 100644 index 0000000000..7eacd0b6c8 --- /dev/null +++ b/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; + } + } + +} diff --git a/ionic/components/chip/chip.md.scss b/ionic/components/chip/chip.md.scss new file mode 100644 index 0000000000..0d88789914 --- /dev/null +++ b/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; + } + } + +} diff --git a/ionic/components/chip/chip.scss b/ionic/components/chip/chip.scss new file mode 100644 index 0000000000..e5f571b3b9 --- /dev/null +++ b/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; + } +} diff --git a/ionic/components/chip/test/basic/index.ts b/ionic/components/chip/test/basic/index.ts new file mode 100644 index 0000000000..2dd534c468 --- /dev/null +++ b/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) { + } +} diff --git a/ionic/components/chip/test/basic/main.html b/ionic/components/chip/test/basic/main.html new file mode 100644 index 0000000000..42550dcd24 --- /dev/null +++ b/ionic/components/chip/test/basic/main.html @@ -0,0 +1,18 @@ + + Chips With Text + + + + +

+ + Default + +

+

+ + Another Longer Text + +

+ + diff --git a/ionic/components/chip/test/delete/index.ts b/ionic/components/chip/test/delete/index.ts new file mode 100644 index 0000000000..e86f128fb0 --- /dev/null +++ b/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'); + } +} diff --git a/ionic/components/chip/test/delete/main.html b/ionic/components/chip/test/delete/main.html new file mode 100644 index 0000000000..9ee03db093 --- /dev/null +++ b/ionic/components/chip/test/delete/main.html @@ -0,0 +1,38 @@ + + Chips With Delete + + + + +

+ + Default + + +

+ +

+ + + Primary + + +

+ +

+ + + + + Default + + +

+ + diff --git a/ionic/components/chip/test/icon/index.ts b/ionic/components/chip/test/icon/index.ts new file mode 100644 index 0000000000..2dd534c468 --- /dev/null +++ b/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) { + } +} diff --git a/ionic/components/chip/test/icon/main.html b/ionic/components/chip/test/icon/main.html new file mode 100644 index 0000000000..45d9e40254 --- /dev/null +++ b/ionic/components/chip/test/icon/main.html @@ -0,0 +1,44 @@ + + Chips With Icon + + + + +

+ + + Default + +

+

+ + + Primary + +

+

+ + + Secondary + +

+

+ + + Danger + +

+

+ + + Light + +

+

+ + + Dark + +

+ + diff --git a/ionic/components/chip/test/image/index.ts b/ionic/components/chip/test/image/index.ts new file mode 100644 index 0000000000..2dd534c468 --- /dev/null +++ b/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) { + } +} diff --git a/ionic/components/chip/test/image/main.html b/ionic/components/chip/test/image/main.html new file mode 100644 index 0000000000..bf5bf9d56a --- /dev/null +++ b/ionic/components/chip/test/image/main.html @@ -0,0 +1,16 @@ + + Chips With Image + + + + +

+ + + + + Default + +

+ +