diff --git a/src/demo-app/a11y/a11y-module.ts b/src/demo-app/a11y/a11y-module.ts index 11b41b405b1f..53eb9824f83d 100644 --- a/src/demo-app/a11y/a11y-module.ts +++ b/src/demo-app/a11y/a11y-module.ts @@ -8,6 +8,7 @@ import {AccessibilityDemo, AccessibilityHome} from './a11y'; import {AutocompleteAccessibilityDemo} from './autocomplete/autocomplete-a11y'; import {ButtonAccessibilityDemo} from './button/button-a11y'; import {ButtonToggleAccessibilityDemo} from './button-toggle/button-toggle-a11y'; +import {CardAccessibilityDemo} from './card/card-a11y'; import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y'; import {ChipsAccessibilityDemo} from './chips/chips-a11y'; import {GridListAccessibilityDemo} from './grid-list/grid-list-a11y'; @@ -44,6 +45,7 @@ export class AccessibilityRoutingModule {} AutocompleteAccessibilityDemo, ButtonAccessibilityDemo, ButtonToggleAccessibilityDemo, + CardAccessibilityDemo, CheckboxAccessibilityDemo, ChipsAccessibilityDemo, DatepickerAccessibilityDemo, diff --git a/src/demo-app/a11y/a11y.ts b/src/demo-app/a11y/a11y.ts index ecbb35968117..2874c7c59f2c 100644 --- a/src/demo-app/a11y/a11y.ts +++ b/src/demo-app/a11y/a11y.ts @@ -20,6 +20,7 @@ export class AccessibilityDemo { {name: 'Autocomplete', route: 'autocomplete'}, {name: 'Button', route: 'button'}, {name: 'Button toggle', route: 'button-toggle'}, + {name: 'Card', route: 'card'}, {name: 'Checkbox', route: 'checkbox'}, {name: 'Chips', route: 'chips'}, {name: 'Datepicker', route: 'datepicker'}, diff --git a/src/demo-app/a11y/card/assets/dachshund-avatar.jpg b/src/demo-app/a11y/card/assets/dachshund-avatar.jpg new file mode 100644 index 000000000000..91460a7a7041 Binary files /dev/null and b/src/demo-app/a11y/card/assets/dachshund-avatar.jpg differ diff --git a/src/demo-app/a11y/card/assets/dachshund.jpg b/src/demo-app/a11y/card/assets/dachshund.jpg new file mode 100644 index 000000000000..a6d561ba790d Binary files /dev/null and b/src/demo-app/a11y/card/assets/dachshund.jpg differ diff --git a/src/demo-app/a11y/card/assets/shiba-inu-avatar.jpg b/src/demo-app/a11y/card/assets/shiba-inu-avatar.jpg new file mode 100644 index 000000000000..d2054d434c35 Binary files /dev/null and b/src/demo-app/a11y/card/assets/shiba-inu-avatar.jpg differ diff --git a/src/demo-app/a11y/card/assets/shiba-inu.jpg b/src/demo-app/a11y/card/assets/shiba-inu.jpg new file mode 100644 index 000000000000..1687c4ff8290 Binary files /dev/null and b/src/demo-app/a11y/card/assets/shiba-inu.jpg differ diff --git a/src/demo-app/a11y/card/card-a11y.html b/src/demo-app/a11y/card/card-a11y.html new file mode 100644 index 000000000000..6a1961f088ce --- /dev/null +++ b/src/demo-app/a11y/card/card-a11y.html @@ -0,0 +1,93 @@ +
+

Dogs group

+

Showing a card with a group of content

+ + +

Herding Group

+

Hound Group

+

Non-Sporting Group

+

Sporting Group

+

Terrier Group

+

Toy Group

+

Working Group

+

Foundation Stock Service

+

Miscellaneous Class

+
+
+
+ +
+

Husky

+

Showing a card with title only

+ + Siberian Husky + +
+ +
+

Malamute

+

Showing a Card with title and subtitle.

+ + Alaskan Malamute + Dog breed + +
+ + +
+

German Shepherd

+

+ Showing a card with title, subtitle, and a footer. +

+ + Dog breed + German Shepherd + + The German Shepherd is a breed of medium to large-sized working dog that originated in + Germany. The breed's officially recognized name is German Shepherd Dog in the English + language. The breed is also known as the Alsatian in Britain and Ireland. + + + People also search for Rottweiler, Siberian Husky, Labrador Retriever, Doberman Pinscher + + +
+ +
+

Dachshund

+

Showing a card with title, subtitle, and avatar as header and a card image.

+ + + + Dachshund + Dog breed + + + + The dachshund is a short-legged, long-bodied, hound-type dog breed. + + +
+ +
+

Shiba Inu

+

Showing a card with header, content, image, and two action buttons: "share" and "like".

+ + + + Shiba Inu + Dog Breed + + + + The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. + A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally + bred for hunting. + + + + + + +
diff --git a/src/demo-app/a11y/card/card-a11y.scss b/src/demo-app/a11y/card/card-a11y.scss new file mode 100644 index 000000000000..142cadb36ca0 --- /dev/null +++ b/src/demo-app/a11y/card/card-a11y.scss @@ -0,0 +1,7 @@ +.example-card button { + text-transform: uppercase; +} + +.example-card { + max-width: 450px; +} diff --git a/src/demo-app/a11y/card/card-a11y.ts b/src/demo-app/a11y/card/card-a11y.ts new file mode 100644 index 000000000000..613d72d3af4f --- /dev/null +++ b/src/demo-app/a11y/card/card-a11y.ts @@ -0,0 +1,18 @@ +import {Component} from '@angular/core'; +import {MdSnackBar} from '@angular/material'; + +@Component({ + moduleId: module.id, + selector: 'card-a11y', + templateUrl: 'card-a11y.html', + styleUrls: ['card-a11y.css'], +}) +export class CardAccessibilityDemo { + showProgress: boolean = false; + + constructor(private snackBar: MdSnackBar) {} + + openSnackbar(message: string) { + this.snackBar.open(message, '', {duration: 2000}); + } +} diff --git a/src/demo-app/a11y/routes.ts b/src/demo-app/a11y/routes.ts index a43ea23f6244..c3090152b910 100644 --- a/src/demo-app/a11y/routes.ts +++ b/src/demo-app/a11y/routes.ts @@ -2,6 +2,7 @@ import {Routes} from '@angular/router'; import {AutocompleteAccessibilityDemo} from './autocomplete/autocomplete-a11y'; import {ButtonAccessibilityDemo} from './button/button-a11y'; import {ButtonToggleAccessibilityDemo} from './button-toggle/button-toggle-a11y'; +import {CardAccessibilityDemo} from './card/card-a11y'; import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y'; import {ChipsAccessibilityDemo} from './chips/chips-a11y'; import {GridListAccessibilityDemo} from './grid-list/grid-list-a11y'; @@ -19,6 +20,7 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [ {path: 'autocomplete', component: AutocompleteAccessibilityDemo}, {path: 'button', component: ButtonAccessibilityDemo}, {path: 'button-toggle', component: ButtonToggleAccessibilityDemo}, + {path: 'card', component: CardAccessibilityDemo}, {path: 'checkbox', component: CheckboxAccessibilityDemo}, {path: 'chips', component: ChipsAccessibilityDemo}, {path: 'datepicker', component: DatepickerAccessibilityDemo},