Static Chips
+ Simple
+
+
+ Chip 1
+ Chip 2
+ Chip 3
+
+
+ Advanced
+
+
+ Selected/Colored
+
+ With Events
+
+
+
+ Unstyled
+
+
+ Basic Chip 1
+ Basic Chip 2
+ Basic Chip 3
+
+
+ Material Contributors
+
- Basic Chip
- Primary
- Accent
- Warn
+
+ {{person.name}}
+
+
+
+
+
+
+
+
+ Stacked Chips
+
+
+ You can also stack the chips if you want them on top of each other.
+
+
+
+
+ None
+
+
+
+ Primary
+
+
+
+ Accent
+
+
+
+ Warn
+
\ No newline at end of file
diff --git a/src/demo-app/chips/chips-demo.scss b/src/demo-app/chips/chips-demo.scss
index 996d6cfd641f..46e1d249941e 100644
--- a/src/demo-app/chips/chips-demo.scss
+++ b/src/demo-app/chips/chips-demo.scss
@@ -1,2 +1,10 @@
.chips-demo {
+ .md-chip-list-stacked {
+ display: block;
+ max-width: 200px;
+ }
+
+ md-basic-chip {
+ margin: auto 10px;
+ }
}
\ No newline at end of file
diff --git a/src/demo-app/chips/chips-demo.ts b/src/demo-app/chips/chips-demo.ts
index ea2693f24cf2..84756cbcf22b 100644
--- a/src/demo-app/chips/chips-demo.ts
+++ b/src/demo-app/chips/chips-demo.ts
@@ -1,5 +1,9 @@
import {Component} from '@angular/core';
+export interface Person {
+ name: string;
+}
+
@Component({
moduleId: module.id,
selector: 'chips-demo',
@@ -7,4 +11,30 @@ import {Component} from '@angular/core';
styleUrls: ['chips-demo.css']
})
export class ChipsDemo {
+ visible: boolean = true;
+ color: string = '';
+
+ people: Person[] = [
+ { name: 'Kara' },
+ { name: 'Jeremy' },
+ { name: 'Topher' },
+ { name: 'Elad' },
+ { name: 'Kristiyan' },
+ { name: 'Paul' }
+ ];
+
+ alert(message: string): void {
+ alert(message);
+ }
+
+ add(input: HTMLInputElement): void {
+ if (input.value && input.value.trim() != '') {
+ this.people.push({ name: input.value.trim() });
+ input.value = '';
+ }
+ }
+
+ toggleVisible(): void {
+ this.visible = false;
+ }
}
diff --git a/src/lib/chips/_chips-theme.scss b/src/lib/chips/_chips-theme.scss
index 5f0826096c76..e754e2376433 100644
--- a/src/lib/chips/_chips-theme.scss
+++ b/src/lib/chips/_chips-theme.scss
@@ -13,6 +13,11 @@
}
.md-chip.selected {
+ background-color: #808080;
+
+ // Use a contrast color for a grey very close to the background color
+ color: md-contrast($md-grey, 600);
+
&.md-primary {
background-color: md-color($primary, 500);
color: md-contrast($primary, 500);
@@ -26,4 +31,4 @@
color: md-contrast($warn, 500);
}
}
-}
\ No newline at end of file
+}
diff --git a/src/lib/chips/chip-list.spec.ts b/src/lib/chips/chip-list.spec.ts
index 14c1b69fa674..30f67b7850b9 100644
--- a/src/lib/chips/chip-list.spec.ts
+++ b/src/lib/chips/chip-list.spec.ts
@@ -1,10 +1,17 @@
-import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-import {Component, DebugElement} from '@angular/core';
-import {By} from '@angular/platform-browser';
-import {MdChipList, MdChipsModule} from './index';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component, DebugElement, QueryList } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { MdChip, MdChipList, MdChipsModule } from './index';
+import {ListKeyManager} from '../core/a11y/list-key-manager';
-describe('MdChip', () => {
+describe('MdChipList', () => {
let fixture: ComponentFixture