diff --git a/package.json b/package.json index 34b34ec74..a8ae8e664 100644 --- a/package.json +++ b/package.json @@ -16,14 +16,14 @@ }, "private": true, "dependencies": { - "@angular/common": "^2.4.0", - "@angular/compiler": "^2.4.0", - "@angular/core": "^2.4.0", - "@angular/forms": "^2.4.0", - "@angular/http": "^2.4.0", + "@angular/common": "^2.4.1", + "@angular/compiler": "^2.4.1", + "@angular/core": "^2.4.1", + "@angular/forms": "^2.4.1", + "@angular/http": "^2.4.1", "@angular/material": "angular/material2-builds", - "@angular/platform-browser": "^2.4.0", - "@angular/platform-browser-dynamic": "^2.4.0", + "@angular/platform-browser": "^2.4.1", + "@angular/platform-browser-dynamic": "^2.4.1", "@angular/router": "~3.2.3", "core-js": "^2.4.1", "fs-extra": "^1.0.0", @@ -34,7 +34,7 @@ "zone.js": "^0.7.4" }, "devDependencies": { - "@angular/compiler-cli": "^2.4.0", + "@angular/compiler-cli": "^2.4.1", "@types/jasmine": "^2.2.30", "@types/node": "^6.0.42", "angular-cli": "1.0.0-beta.24", diff --git a/src/app/examples/example-module.ts b/src/app/examples/example-module.ts index edacaea19..548c8d000 100644 --- a/src/app/examples/example-module.ts +++ b/src/app/examples/example-module.ts @@ -147,7 +147,7 @@ export const EXAMPLE_COMPONENTS = { }, 'snack-bar-overview': {title: 'Basic snack-bar', component: SnackBarOverviewExample}, 'tabs-overview': {title: 'Basic tabs', component: TabsOverviewExample}, - 'tabs-template-label': {title: 'Tabs with a label template', component: TabsTemplateLabelExample}, + 'tabs-template-label': {title: 'Coming soon!', component: TabsTemplateLabelExample}, 'toolbar-multirow': {title: 'Multi-row toolbar', component: ToolbarMultirowExample}, 'toolbar-overview': {title: 'basic toolbar', component: ToolbarOverviewExample}, 'tooltip-overview': {title: 'Basic tooltip', component: TooltipOverviewExample}, diff --git a/src/app/examples/slider-configurable/slider-configurable-example.ts b/src/app/examples/slider-configurable/slider-configurable-example.ts index 3367e3f01..933a9dee7 100644 --- a/src/app/examples/slider-configurable/slider-configurable-example.ts +++ b/src/app/examples/slider-configurable/slider-configurable-example.ts @@ -2,7 +2,7 @@ import {Component, ViewEncapsulation} from '@angular/core'; @Component({ - selector: 'configurable-slider-example', + selector: 'slider-configurable-example', templateUrl: './slider-configurable-example.html', styleUrls: ['./slider-configurable-example.css'], encapsulation: ViewEncapsulation.None, diff --git a/src/app/examples/tabs-template-label/tabs-template-label-example.html b/src/app/examples/tabs-template-label/tabs-template-label-example.html index cbec3b983..bde67b8e9 100644 --- a/src/app/examples/tabs-template-label/tabs-template-label-example.html +++ b/src/app/examples/tabs-template-label/tabs-template-label-example.html @@ -1,9 +1 @@ - - - - Content 1 - - Content 2 - +More examples coming soon! diff --git a/src/app/shared/documentation-items/documentation-items.ts b/src/app/shared/documentation-items/documentation-items.ts index 2f6efb460..88d859951 100644 --- a/src/app/shared/documentation-items/documentation-items.ts +++ b/src/app/shared/documentation-items/documentation-items.ts @@ -44,6 +44,7 @@ const DOCS = [ {id: 'list', name: 'List', examples: ['list-sections']}, {id: 'grid-list', name: 'Grid list', examples: ['grid-list-dynamic']}, {id: 'card', name: 'Card', examples: ['card-fancy']}, + {id: 'tabs', name: 'Tabs', examples: ['tabs-template-label']}, ] }, { diff --git a/src/app/shared/footer/footer.scss b/src/app/shared/footer/footer.scss index ea8ad6db1..bc0d17497 100644 --- a/src/app/shared/footer/footer.scss +++ b/src/app/shared/footer/footer.scss @@ -1,5 +1,6 @@ .docs-footer { margin-top: 40px; - padding: 20px; + padding: 15px; text-align: center; + font-size: 12px; } diff --git a/src/assets/documents/overview/tabs.html b/src/assets/documents/overview/tabs.html index f3d99d212..8d9a39ae4 100644 --- a/src/assets/documents/overview/tabs.html +++ b/src/assets/documents/overview/tabs.html @@ -4,7 +4,7 @@ of the header, pagination controls appear to let the user scroll left and right across the labels.

The active tab may be set using the selectedIndex input or when the user selects one of the tab labels in the header.

-
+

Events

The selectChange output event is emitted when the active tab changes.

The focusChange output event is emitted when the user puts focus on any of the tab labels in diff --git a/src/assets/examples/card-fancy-example-css.html b/src/assets/examples/card-fancy-example-css.html index 7d6289e80..47713de19 100644 --- a/src/assets/examples/card-fancy-example-css.html +++ b/src/assets/examples/card-fancy-example-css.html @@ -3,6 +3,6 @@ } .example-header-image { - background-image: url('shiba1.jpg'); + background-image: url('assets/img/examples/shiba1.jpg'); background-size: cover; } diff --git a/src/assets/examples/card-fancy-example-html.html b/src/assets/examples/card-fancy-example-html.html index b56f01f40..991c80600 100644 --- a/src/assets/examples/card-fancy-example-html.html +++ b/src/assets/examples/card-fancy-example-html.html @@ -4,7 +4,7 @@ <md-card-title>Shiba Inu</md-card-title> <md-card-subtitle>Dog Breed</md-card-subtitle> </md-card-header> - <img md-card-image src="shiba2.jpg"> + <img md-card-image src="assets/img/examples/shiba2.jpg"> <md-card-content> <p> The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. diff --git a/src/assets/examples/icon-svg-example-html.html b/src/assets/examples/icon-svg-example-html.html index 4bd249500..1811729fc 100644 --- a/src/assets/examples/icon-svg-example-html.html +++ b/src/assets/examples/icon-svg-example-html.html @@ -1 +1 @@ -<md-icon svgSrc="ic_3d_rotation_black_24px.svg"></md-icon> +<md-icon svgIcon="thumbs-up"></md-icon> diff --git a/src/assets/examples/icon-svg-example-ts.html b/src/assets/examples/icon-svg-example-ts.html index 605f603e2..c243b3f94 100644 --- a/src/assets/examples/icon-svg-example-ts.html +++ b/src/assets/examples/icon-svg-example-ts.html @@ -1,8 +1,16 @@ import {Component} from '@angular/core'; +import {DomSanitizer} from '@angular/platform-browser'; +import {MdIconRegistry} from '@angular/material'; @Component({ selector: 'icon-svg-example', templateUrl: './icon-svg-example.html', }) -export class IconSvgExample {} +export class IconSvgExample { + constructor(iconRegistry: MdIconRegistry, sanitizer: DomSanitizer) { + iconRegistry.addSvgIcon( + 'thumbs-up', + sanitizer.bypassSecurityTrustResourceUrl('assets/img/examples/thumbup-icon.svg')); + } +} diff --git a/src/assets/examples/slider-configurable-example-ts.html b/src/assets/examples/slider-configurable-example-ts.html index 1f2c74b6c..d13098cfd 100644 --- a/src/assets/examples/slider-configurable-example-ts.html +++ b/src/assets/examples/slider-configurable-example-ts.html @@ -2,7 +2,7 @@ @Component({ - selector: 'configurable-slider-example', + selector: 'slider-configurable-example', templateUrl: './slider-configurable-example.html', styleUrls: ['./slider-configurable-example.css'], encapsulation: ViewEncapsulation.None, diff --git a/src/assets/examples/tabs-template-label-example-html.html b/src/assets/examples/tabs-template-label-example-html.html index 760d31da9..bde67b8e9 100644 --- a/src/assets/examples/tabs-template-label-example-html.html +++ b/src/assets/examples/tabs-template-label-example-html.html @@ -1,9 +1 @@ -<md-tab-group> - <md-tab> - <template md-tab-label> - I'm a <em>fancy</em> tab <md-icon>sentiment_very_satisfied</md-icon> - </template> - Content 1 - </md-tab> - <md-tab label="Tab 2">Content 2</md-tab> -</md-tab-group> +More examples coming soon! diff --git a/src/assets/plunker/examples/button-overview/button-overview-example.css b/src/assets/plunker/examples/button-overview/button-overview-example.css new file mode 100644 index 000000000..743230875 --- /dev/null +++ b/src/assets/plunker/examples/button-overview/button-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/plunker/examples/button-overview/button-overview-example.html b/src/assets/plunker/examples/button-overview/button-overview-example.html new file mode 100644 index 000000000..56f6fa44f --- /dev/null +++ b/src/assets/plunker/examples/button-overview/button-overview-example.html @@ -0,0 +1 @@ + diff --git a/src/assets/plunker/examples/button-overview/button-overview-example.ts b/src/assets/plunker/examples/button-overview/button-overview-example.ts new file mode 100644 index 000000000..41a52022f --- /dev/null +++ b/src/assets/plunker/examples/button-overview/button-overview-example.ts @@ -0,0 +1,8 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'button-overview-example', + templateUrl: './button-overview-example.html', +}) +export class ButtonOverviewExample {} diff --git a/src/assets/plunker/examples/button-toggle-exclusive/button-toggle-exclusive-example.css b/src/assets/plunker/examples/button-toggle-exclusive/button-toggle-exclusive-example.css new file mode 100644 index 000000000..d21ca3ce5 --- /dev/null +++ b/src/assets/plunker/examples/button-toggle-exclusive/button-toggle-exclusive-example.css @@ -0,0 +1,3 @@ +.example-selected-value { + margin: 15px 0; +} diff --git a/src/assets/plunker/examples/button-toggle-exclusive/button-toggle-exclusive-example.html b/src/assets/plunker/examples/button-toggle-exclusive/button-toggle-exclusive-example.html new file mode 100644 index 000000000..dd5cd2771 --- /dev/null +++ b/src/assets/plunker/examples/button-toggle-exclusive/button-toggle-exclusive-example.html @@ -0,0 +1,15 @@ + + + format_align_left + + + format_align_center + + + format_align_right + + + format_align_justify + + +

Selected value: {{group.value}}
diff --git a/src/assets/plunker/examples/button-toggle-exclusive/button-toggle-exclusive-example.ts b/src/assets/plunker/examples/button-toggle-exclusive/button-toggle-exclusive-example.ts new file mode 100644 index 000000000..d014b8a28 --- /dev/null +++ b/src/assets/plunker/examples/button-toggle-exclusive/button-toggle-exclusive-example.ts @@ -0,0 +1,9 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'button-toggle-exclusive-example', + templateUrl: './button-toggle-exclusive-example.html', + styleUrls: ['./button-toggle-exclusive-example.css'], +}) +export class ButtonToggleExclusiveExample {} diff --git a/src/assets/plunker/examples/button-toggle-overview/button-toggle-overview-example.css b/src/assets/plunker/examples/button-toggle-overview/button-toggle-overview-example.css new file mode 100644 index 000000000..743230875 --- /dev/null +++ b/src/assets/plunker/examples/button-toggle-overview/button-toggle-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/plunker/examples/button-toggle-overview/button-toggle-overview-example.html b/src/assets/plunker/examples/button-toggle-overview/button-toggle-overview-example.html new file mode 100644 index 000000000..bb215d5b5 --- /dev/null +++ b/src/assets/plunker/examples/button-toggle-overview/button-toggle-overview-example.html @@ -0,0 +1 @@ +Toggle me! diff --git a/src/assets/plunker/examples/button-toggle-overview/button-toggle-overview-example.ts b/src/assets/plunker/examples/button-toggle-overview/button-toggle-overview-example.ts new file mode 100644 index 000000000..38a4afd05 --- /dev/null +++ b/src/assets/plunker/examples/button-toggle-overview/button-toggle-overview-example.ts @@ -0,0 +1,8 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'button-toggle-overview-example', + templateUrl: './button-toggle-overview-example.html', +}) +export class ButtonToggleOverviewExample {} diff --git a/src/assets/plunker/examples/button-types/button-types-example.css b/src/assets/plunker/examples/button-types/button-types-example.css new file mode 100644 index 000000000..b0b34952f --- /dev/null +++ b/src/assets/plunker/examples/button-types/button-types-example.css @@ -0,0 +1,9 @@ +.example-container { + width: 500px; +} + +.example-button-row { + display: flex; + align-items: center; + justify-content: space-around; +} diff --git a/src/assets/plunker/examples/button-types/button-types-example.html b/src/assets/plunker/examples/button-types/button-types-example.html new file mode 100644 index 000000000..4c5783de9 --- /dev/null +++ b/src/assets/plunker/examples/button-types/button-types-example.html @@ -0,0 +1,17 @@ +
+

Normal Buttons

+
+ + + + +
+ +

Link Buttons

+
+ Flat button + Raised button + check + check +
+
diff --git a/src/assets/plunker/examples/button-types/button-types-example.ts b/src/assets/plunker/examples/button-types/button-types-example.ts new file mode 100644 index 000000000..9dbb329f1 --- /dev/null +++ b/src/assets/plunker/examples/button-types/button-types-example.ts @@ -0,0 +1,9 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'button-types-example', + templateUrl: './button-types-example.html', + styleUrls: ['./button-types-example.css'], +}) +export class ButtonTypesExample {} diff --git a/src/assets/plunker/examples/card-fancy/card-fancy-example.css b/src/assets/plunker/examples/card-fancy/card-fancy-example.css new file mode 100644 index 000000000..daef28f16 --- /dev/null +++ b/src/assets/plunker/examples/card-fancy/card-fancy-example.css @@ -0,0 +1,8 @@ +.example-card { + width: 400px; +} + +.example-header-image { + background-image: url('assets/img/examples/shiba1.jpg'); + background-size: cover; +} diff --git a/src/assets/plunker/examples/card-fancy/card-fancy-example.html b/src/assets/plunker/examples/card-fancy/card-fancy-example.html new file mode 100644 index 000000000..07d25dfb8 --- /dev/null +++ b/src/assets/plunker/examples/card-fancy/card-fancy-example.html @@ -0,0 +1,19 @@ + + +
+ 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/assets/plunker/examples/card-fancy/card-fancy-example.ts b/src/assets/plunker/examples/card-fancy/card-fancy-example.ts new file mode 100644 index 000000000..8e19840d7 --- /dev/null +++ b/src/assets/plunker/examples/card-fancy/card-fancy-example.ts @@ -0,0 +1,9 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'card-fancy-example', + templateUrl: './card-fancy-example.html', + styleUrls: ['./card-fancy-example.css'], +}) +export class CardFancyExample {} diff --git a/src/assets/plunker/examples/card-overview/card-overview-example.css b/src/assets/plunker/examples/card-overview/card-overview-example.css new file mode 100644 index 000000000..743230875 --- /dev/null +++ b/src/assets/plunker/examples/card-overview/card-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/plunker/examples/card-overview/card-overview-example.html b/src/assets/plunker/examples/card-overview/card-overview-example.html new file mode 100644 index 000000000..5e0c2b6df --- /dev/null +++ b/src/assets/plunker/examples/card-overview/card-overview-example.html @@ -0,0 +1 @@ +Simple card diff --git a/src/assets/plunker/examples/card-overview/card-overview-example.ts b/src/assets/plunker/examples/card-overview/card-overview-example.ts new file mode 100644 index 000000000..55fc9a690 --- /dev/null +++ b/src/assets/plunker/examples/card-overview/card-overview-example.ts @@ -0,0 +1,8 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'card-overview-example', + templateUrl: './card-overview-example.html', +}) +export class CardOverviewExample {} diff --git a/src/assets/plunker/examples/checkbox-configurable/checkbox-configurable-example.css b/src/assets/plunker/examples/checkbox-configurable/checkbox-configurable-example.css new file mode 100644 index 000000000..558293fbb --- /dev/null +++ b/src/assets/plunker/examples/checkbox-configurable/checkbox-configurable-example.css @@ -0,0 +1,14 @@ +.example-h2 { + margin: 10px; +} + +.example-section { + display: flex; + align-content: center; + align-items: center; + height: 60px; +} + +.example-margin { + margin: 0 10px; +} diff --git a/src/assets/plunker/examples/checkbox-configurable/checkbox-configurable-example.html b/src/assets/plunker/examples/checkbox-configurable/checkbox-configurable-example.html new file mode 100644 index 000000000..5876c05c6 --- /dev/null +++ b/src/assets/plunker/examples/checkbox-configurable/checkbox-configurable-example.html @@ -0,0 +1,40 @@ + + +

Checkbox configuration

+ +
+ Checked + Indeterminate +
+ +
+ + + Start + End + +
+ +
+ Disabled +
+ + + + + +

Result

+ +
+ + I'm a checkbox + +
+ + + diff --git a/src/assets/plunker/examples/checkbox-configurable/checkbox-configurable-example.ts b/src/assets/plunker/examples/checkbox-configurable/checkbox-configurable-example.ts new file mode 100644 index 000000000..2c0149199 --- /dev/null +++ b/src/assets/plunker/examples/checkbox-configurable/checkbox-configurable-example.ts @@ -0,0 +1,14 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'checkbox-configurable-example', + templateUrl: './checkbox-configurable-example.html', + styleUrls: ['./checkbox-configurable-example.css'], +}) +export class CheckboxConfigurableExample { + checked = false; + indeterminate = false; + align = 'start'; + disabled = false; +} diff --git a/src/assets/plunker/examples/checkbox-overview/checkbox-overview-example.css b/src/assets/plunker/examples/checkbox-overview/checkbox-overview-example.css new file mode 100644 index 000000000..743230875 --- /dev/null +++ b/src/assets/plunker/examples/checkbox-overview/checkbox-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/plunker/examples/checkbox-overview/checkbox-overview-example.html b/src/assets/plunker/examples/checkbox-overview/checkbox-overview-example.html new file mode 100644 index 000000000..c301bbe5c --- /dev/null +++ b/src/assets/plunker/examples/checkbox-overview/checkbox-overview-example.html @@ -0,0 +1 @@ +Check me! diff --git a/src/assets/plunker/examples/checkbox-overview/checkbox-overview-example.ts b/src/assets/plunker/examples/checkbox-overview/checkbox-overview-example.ts new file mode 100644 index 000000000..be9aefc59 --- /dev/null +++ b/src/assets/plunker/examples/checkbox-overview/checkbox-overview-example.ts @@ -0,0 +1,8 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'checkbox-overview-example', + templateUrl: './checkbox-overview-example.html', +}) +export class CheckboxOverviewExample {} diff --git a/src/assets/plunker/examples/chips-overview/chips-overview-example.css b/src/assets/plunker/examples/chips-overview/chips-overview-example.css new file mode 100644 index 000000000..743230875 --- /dev/null +++ b/src/assets/plunker/examples/chips-overview/chips-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/plunker/examples/chips-overview/chips-overview-example.html b/src/assets/plunker/examples/chips-overview/chips-overview-example.html new file mode 100644 index 000000000..bb0410569 --- /dev/null +++ b/src/assets/plunker/examples/chips-overview/chips-overview-example.html @@ -0,0 +1,6 @@ + + One fish + Two fish + Primary fish + Accent fish + diff --git a/src/assets/plunker/examples/chips-overview/chips-overview-example.ts b/src/assets/plunker/examples/chips-overview/chips-overview-example.ts new file mode 100644 index 000000000..fa1bbf7c1 --- /dev/null +++ b/src/assets/plunker/examples/chips-overview/chips-overview-example.ts @@ -0,0 +1,8 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'chips-overview-example', + templateUrl: './chips-overview-example.html', +}) +export class ChipsOverviewExample {} diff --git a/src/assets/plunker/examples/chips-stacked/chips-stacked-example.css b/src/assets/plunker/examples/chips-stacked/chips-stacked-example.css new file mode 100644 index 000000000..dfb2f8c00 --- /dev/null +++ b/src/assets/plunker/examples/chips-stacked/chips-stacked-example.css @@ -0,0 +1,3 @@ +md-chip { + max-width: 200px; +} diff --git a/src/assets/plunker/examples/chips-stacked/chips-stacked-example.html b/src/assets/plunker/examples/chips-stacked/chips-stacked-example.html new file mode 100644 index 000000000..48ea7b3c5 --- /dev/null +++ b/src/assets/plunker/examples/chips-stacked/chips-stacked-example.html @@ -0,0 +1,7 @@ + + + {{chipColor.name}} + + diff --git a/src/assets/plunker/examples/chips-stacked/chips-stacked-example.ts b/src/assets/plunker/examples/chips-stacked/chips-stacked-example.ts new file mode 100644 index 000000000..8c48ccc92 --- /dev/null +++ b/src/assets/plunker/examples/chips-stacked/chips-stacked-example.ts @@ -0,0 +1,18 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'chips-stacked-example', + templateUrl: './chips-stacked-example.html', + styleUrls: ['./chips-stacked-example.css'], +}) +export class ChipsStackedExample { + color: string; + + availableColors = [ + { name: 'none', color: '' }, + { name: 'Primary', color: 'primary' }, + { name: 'Accent', color: 'accent' }, + { name: 'Warn', color: 'warn' } + ]; +} diff --git a/src/assets/plunker/examples/dialog-overview/dialog-overview-example-dialog.html b/src/assets/plunker/examples/dialog-overview/dialog-overview-example-dialog.html new file mode 100644 index 000000000..751e1339b --- /dev/null +++ b/src/assets/plunker/examples/dialog-overview/dialog-overview-example-dialog.html @@ -0,0 +1 @@ +

Hi, I'm a dialog!

diff --git a/src/assets/plunker/examples/dialog-overview/dialog-overview-example.css b/src/assets/plunker/examples/dialog-overview/dialog-overview-example.css new file mode 100644 index 000000000..743230875 --- /dev/null +++ b/src/assets/plunker/examples/dialog-overview/dialog-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/plunker/examples/dialog-overview/dialog-overview-example.html b/src/assets/plunker/examples/dialog-overview/dialog-overview-example.html new file mode 100644 index 000000000..176a3c411 --- /dev/null +++ b/src/assets/plunker/examples/dialog-overview/dialog-overview-example.html @@ -0,0 +1 @@ + diff --git a/src/assets/plunker/examples/dialog-overview/dialog-overview-example.ts b/src/assets/plunker/examples/dialog-overview/dialog-overview-example.ts new file mode 100644 index 000000000..9bc9882ac --- /dev/null +++ b/src/assets/plunker/examples/dialog-overview/dialog-overview-example.ts @@ -0,0 +1,22 @@ +import {Component} from '@angular/core'; +import {MdDialog} from '@angular/material'; + + +@Component({ + selector: 'dialog-overview-example', + templateUrl: './dialog-overview-example.html', +}) +export class DialogOverviewExample { + constructor(public dialog: MdDialog) {} + + openDialog() { + this.dialog.open(DialogOverviewExampleDialog); + } +} + + +@Component({ + selector: 'dialog-overview-example-dialog', + templateUrl: './dialog-overview-example-dialog.html', +}) +export class DialogOverviewExampleDialog {} diff --git a/src/assets/plunker/examples/dialog-result/dialog-result-example-dialog.html b/src/assets/plunker/examples/dialog-result/dialog-result-example-dialog.html new file mode 100644 index 000000000..0e4dd6339 --- /dev/null +++ b/src/assets/plunker/examples/dialog-result/dialog-result-example-dialog.html @@ -0,0 +1,6 @@ +

Dialog

+
What would you like to do?
+
+ + +
diff --git a/src/assets/plunker/examples/dialog-result/dialog-result-example.css b/src/assets/plunker/examples/dialog-result/dialog-result-example.css new file mode 100644 index 000000000..743230875 --- /dev/null +++ b/src/assets/plunker/examples/dialog-result/dialog-result-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/plunker/examples/dialog-result/dialog-result-example.html b/src/assets/plunker/examples/dialog-result/dialog-result-example.html new file mode 100644 index 000000000..04850b42d --- /dev/null +++ b/src/assets/plunker/examples/dialog-result/dialog-result-example.html @@ -0,0 +1,2 @@ + +You chose: {{selectedOption}} diff --git a/src/assets/plunker/examples/dialog-result/dialog-result-example.ts b/src/assets/plunker/examples/dialog-result/dialog-result-example.ts new file mode 100644 index 000000000..ec25f92f1 --- /dev/null +++ b/src/assets/plunker/examples/dialog-result/dialog-result-example.ts @@ -0,0 +1,29 @@ +import {Component} from '@angular/core'; +import {MdDialog, MdDialogRef} from '@angular/material'; + + +@Component({ + selector: 'dialog-result-example', + templateUrl: './dialog-result-example.html', +}) +export class DialogResultExample { + selectedOption: string; + + constructor(public dialog: MdDialog) {} + + openDialog() { + let dialogRef = this.dialog.open(DialogResultExampleDialog); + dialogRef.afterClosed().subscribe(result => { + this.selectedOption = result; + }); + } +} + + +@Component({ + selector: 'dialog-result-example-dialog', + templateUrl: './dialog-result-example-dialog.html', +}) +export class DialogResultExampleDialog { + constructor(public dialogRef: MdDialogRef) {} +} diff --git a/src/assets/plunker/examples/example-data.ts b/src/assets/plunker/examples/example-data.ts new file mode 100644 index 000000000..a1fc1c883 --- /dev/null +++ b/src/assets/plunker/examples/example-data.ts @@ -0,0 +1,48 @@ +import {EXAMPLE_COMPONENTS} from './example-module'; + + +/** + * Example data + * with information about Component name, selector, files used in example, and path to examples + */ +export class ExampleData { + // TODO: figure out how do we get these variables. + description: string = 'Some description for material'; + // TODO: use real example and delete the example/ folder. + examplePath = '/assets/example/'; + exampleFiles = ['button-demo.html', 'button-demo.scss', 'button-demo.ts']; + + // TODO: extract these variables from example code. + selectorName = 'button-demo'; + indexFilename = 'button-demo'; + componentName = 'ButtonDemo'; + + constructor(example: string) { + if (example && EXAMPLE_COMPONENTS[example]) { + this.examplePath = `/assets/plunker/examples/${example}/`; + // TODO(tinayuangao): Do not hard-code extensions + this.exampleFiles = ['html', 'ts', 'css'] + .map((extension) => `${example}-example.${extension}`); + if (EXAMPLE_COMPONENTS[example].additionalFiles) { + this.exampleFiles = this.exampleFiles.concat(EXAMPLE_COMPONENTS[example].additionalFiles); + } + this.selectorName = this.indexFilename = `${example}-example`; + + var exampleName = example.replace(/(?:^\w|\b\w)/g, function(letter) { + return letter.toUpperCase(); + }); + + if (EXAMPLE_COMPONENTS[example].title) { + this.description = EXAMPLE_COMPONENTS[example].title; + } else { + this.description = exampleName.replace(/[\-]+/g, ' ') + ' Example'; + } + + if (EXAMPLE_COMPONENTS[example].selectorName) { + this.componentName = EXAMPLE_COMPONENTS[example].selectorName; + } else { + this.componentName = exampleName.replace(/[\-]+/g, '') + 'Example'; + } + } + } +} diff --git a/src/assets/plunker/examples/example-module.ts b/src/assets/plunker/examples/example-module.ts new file mode 100644 index 000000000..548c8d000 --- /dev/null +++ b/src/assets/plunker/examples/example-module.ts @@ -0,0 +1,220 @@ +import {NgModule} from '@angular/core'; +import {FormsModule} from '@angular/forms'; +import {CommonModule} from '@angular/common'; +import {MaterialModule} from '@angular/material'; +import {ButtonOverviewExample} from './button-overview/button-overview-example'; +import {ButtonTypesExample} from './button-types/button-types-example'; +import {CheckboxOverviewExample} from './checkbox-overview/checkbox-overview-example'; +import {SliderConfigurableExample} from './slider-configurable/slider-configurable-example'; +import {TabsOverviewExample} from './tabs-overview/tabs-overview-example'; +import { + PizzaPartyComponent, + SnackBarComponentExample +} from './snack-bar-component/snack-bar-component-example'; +import { + ProgressBarConfigurableExample +} from './progress-bar-configurable/progress-bar-configurable-example'; +import { + DialogOverviewExampleDialog, + DialogOverviewExample +} from './dialog-overview/dialog-overview-example'; +import {RadioNgModelExample} from './radio-ng-model/radio-ng-model-example'; +import {CardFancyExample} from './card-fancy/card-fancy-example'; +import {ToolbarOverviewExample} from './toolbar-overview/toolbar-overview-example'; +import {ToolbarMultirowExample} from './toolbar-multirow/toolbar-multirow-example'; +import {MenuIconsExample} from './menu-icons/menu-icons-example'; +import {GridListDynamicExample} from './grid-list-dynamic/grid-list-dynamic-example'; +import {IconOverviewExample} from './icon-overview/icon-overview-example'; +import {ProgressBarOverviewExample} from './progress-bar-overview/progress-bar-overview-example'; +import {SlideToggleOverviewExample} from './slide-toggle-overview/slide-toggle-overview-example'; +import {InputOverviewExample} from './input-overview/input-overview-example'; +import {MenuOverviewExample} from './menu-overview/menu-overview-example'; +import {CheckboxConfigurableExample} from './checkbox-configurable/checkbox-configurable-example'; +import { + ButtonToggleExclusiveExample +} from './button-toggle-exclusive/button-toggle-exclusive-example'; +import {ListSectionsExample} from './list-sections/list-sections-example'; +import {SnackBarOverviewExample} from './snack-bar-overview/snack-bar-overview-example'; +import { + DialogResultExampleDialog, + DialogResultExample +} from './dialog-result/dialog-result-example'; +import {TooltipOverviewExample} from './tooltip-overview/tooltip-overview-example'; +import {ButtonToggleOverviewExample} from './button-toggle-overview/button-toggle-overview-example'; +import {GridListOverviewExample} from './grid-list-overview/grid-list-overview-example'; +import {TooltipPositionExample} from './tooltip-position/tooltip-position-example'; +import { + ProgressSpinnerConfigurableExample +} from './progress-spinner-configurable/progress-spinner-configurable-example'; +import {InputFormExample} from './input-form/input-form-example'; +import {ListOverviewExample} from './list-overview/list-overview-example'; +import {SliderOverviewExample} from './slider-overview/slider-overview-example'; +import { + SlideToggleConfigurableExample +} from './slide-toggle-configurable/slide-toggle-configurable-example'; +import {IconSvgExample} from './icon-svg-example/icon-svg-example'; +import {SidenavFabExample} from './sidenav-fab/sidenav-fab-example'; +import {CardOverviewExample} from './card-overview/card-overview-example'; +import { + ProgressSpinnerOverviewExample +} from './progress-spinner-overview/progress-spinner-overview-example'; +import {TabsTemplateLabelExample} from './tabs-template-label/tabs-template-label-example'; +import {RadioOverviewExample} from './radio-overview/radio-overview-example'; +import {SidenavOverviewExample} from './sidenav-overview/sidenav-overview-example'; +import {SelectOverviewExample} from './select-overview/select-overview-example'; +import {ChipsOverviewExample} from './chips-overview/chips-overview-example'; +import {ChipsStackedExample} from './chips-stacked/chips-stacked-example'; +import {SelectFormExample} from './select-form/select-form-example'; + + +export interface LiveExample { + title: string; + component: any; + additionalFiles: string[]; + selectorName: string; +} + +/** + * The list of example components. + * Key is the example name which will be used in `material-docs-example="key"`. + * Value is the component. + */ +export const EXAMPLE_COMPONENTS = { + 'button-overview': {title: 'Basic buttons', component: ButtonOverviewExample}, + 'button-types': {title: 'Button varieties', component: ButtonTypesExample}, + 'button-toggle-exclusive': { + title: 'Exclusive selection', + component: ButtonToggleExclusiveExample + }, + 'button-toggle-overview': {title: 'Basic button-toggles', component: ButtonToggleOverviewExample}, + 'chips-overview': {title: 'Basic chips', component: ChipsOverviewExample}, + 'chips-stacked': {title: 'Stacked chips', component: ChipsStackedExample}, + 'card-fancy': {title: 'Card with multiple sections', component: CardFancyExample}, + 'card-overview': {title: 'Basic cards', component: CardOverviewExample}, + 'checkbox-configurable': {title: 'Configurable checkbox', component: CheckboxConfigurableExample}, + 'checkbox-overview': {title: 'Basic checkboxes', component: CheckboxOverviewExample}, + 'dialog-overview': { + title: 'Basic dialog', + component: DialogOverviewExample, + additionalFiles: ['dialog-overview-example-dialog.html'], + selectorName: 'DialogOverviewExample, DialogOverviewExampleDialog', + }, + 'dialog-result': { + title: 'Dailog with a result', + component: DialogResultExample, + additionalFiles: ['dialog-result-example-dialog.html'], + selectorName: 'DialogResultExample, DialogResultExampleDialog', + }, + 'grid-list-dynamic': {title: 'Dynamic grid-list', component: GridListDynamicExample}, + 'grid-list-overview': {title: 'Basic grid-list', component: GridListOverviewExample}, + 'icon-overview': {title: 'Basic icons', component: IconOverviewExample}, + 'icon-svg': {title: 'SVG icons', component: IconSvgExample}, + 'input-form': {title: 'Inputs in a form', component: InputFormExample}, + 'input-overview': {title: 'Basic inputs', component: InputOverviewExample}, + 'list-overview': {title: 'Basic list', component: ListOverviewExample}, + 'list-sections': {title: 'List with sections', component: ListSectionsExample}, + 'menu-icons': {title: 'Menu with icons', component: MenuIconsExample}, + 'menu-overview': {title: 'Basic menu', component: MenuOverviewExample}, + 'progress-bar-configurable': { + title: 'Configurable progress-bar', + component: ProgressBarConfigurableExample + }, + 'progress-bar-overview': {title: 'Basic progress-bar', component: ProgressBarOverviewExample}, + 'progress-spinner-configurable': { + title: 'Configurable progress-bar', + component: ProgressSpinnerConfigurableExample + }, + 'progress-spinner-overview': { + title: 'Basic progress-spinner', + component: ProgressSpinnerOverviewExample + }, + 'radio-ng-model': {title: 'Radios with ngModel', component: RadioNgModelExample}, + 'radio-overview': {title: 'Basic radios', component: RadioOverviewExample}, + 'select-overview': {title: 'Basic select', component: SelectOverviewExample}, + 'select-form': {title: 'Select in a form', component: SelectFormExample}, + 'sidenav-fab': {title: 'Sidenav with a FAB', component: SidenavFabExample}, + 'sidenav-overview': {title: 'Basic sidenav', component: SidenavOverviewExample}, + 'slider-configurable': {title: 'Configurable slider', component: SliderConfigurableExample}, + 'slider-overview': {title: 'Basic slider', component: SliderOverviewExample}, + 'slide-toggle-configurable': { + title: 'Configurable slide-toggle', + component: SlideToggleConfigurableExample + }, + 'slide-toggle-overview': {title: 'Basic slide-toggles', component: SlideToggleOverviewExample}, + 'snack-bar-component': { + title: 'Snack-bar with a custom component', + component: SnackBarComponentExample + }, + 'snack-bar-overview': {title: 'Basic snack-bar', component: SnackBarOverviewExample}, + 'tabs-overview': {title: 'Basic tabs', component: TabsOverviewExample}, + 'tabs-template-label': {title: 'Coming soon!', component: TabsTemplateLabelExample}, + 'toolbar-multirow': {title: 'Multi-row toolbar', component: ToolbarMultirowExample}, + 'toolbar-overview': {title: 'basic toolbar', component: ToolbarOverviewExample}, + 'tooltip-overview': {title: 'Basic tooltip', component: TooltipOverviewExample}, + 'tooltip-position': {title: 'Tooltip with custom position', component: TooltipPositionExample}, +}; + +/** + * The list of all example components. + * We need to put them in both `declarations` and `entryComponents` to make them work. + */ +export const EXAMPLE_LIST = [ + ButtonOverviewExample, + ButtonToggleExclusiveExample, + ButtonToggleOverviewExample, + ButtonTypesExample, + CardFancyExample, + CardOverviewExample, + ChipsOverviewExample, + ChipsStackedExample, + CheckboxConfigurableExample, + CheckboxOverviewExample, + DialogOverviewExample, + DialogOverviewExampleDialog, + DialogResultExample, + DialogResultExampleDialog, + GridListDynamicExample, + GridListOverviewExample, + IconOverviewExample, + IconSvgExample, + InputFormExample, + InputOverviewExample, + ListOverviewExample, + ListSectionsExample, + MenuIconsExample, + MenuOverviewExample, + ProgressBarConfigurableExample, + ProgressBarOverviewExample, + ProgressSpinnerConfigurableExample, + ProgressSpinnerOverviewExample, + RadioNgModelExample, + RadioOverviewExample, + SidenavFabExample, + SelectOverviewExample, + SelectFormExample, + SidenavOverviewExample, + SliderConfigurableExample, + SliderOverviewExample, + SlideToggleConfigurableExample, + SlideToggleOverviewExample, + SnackBarComponentExample, + PizzaPartyComponent, + SnackBarOverviewExample, + TabsOverviewExample, + TabsTemplateLabelExample, + ToolbarMultirowExample, + ToolbarOverviewExample, + TooltipOverviewExample, + TooltipPositionExample, +]; + +@NgModule({ + declarations: EXAMPLE_LIST, + entryComponents: EXAMPLE_LIST, + imports: [ + MaterialModule, + FormsModule, + CommonModule, + ] +}) +export class ExampleModule { } diff --git a/src/assets/plunker/examples/grid-list-dynamic/grid-list-dynamic-example.css b/src/assets/plunker/examples/grid-list-dynamic/grid-list-dynamic-example.css new file mode 100644 index 000000000..743230875 --- /dev/null +++ b/src/assets/plunker/examples/grid-list-dynamic/grid-list-dynamic-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/plunker/examples/grid-list-dynamic/grid-list-dynamic-example.html b/src/assets/plunker/examples/grid-list-dynamic/grid-list-dynamic-example.html new file mode 100644 index 000000000..19c84dd5b --- /dev/null +++ b/src/assets/plunker/examples/grid-list-dynamic/grid-list-dynamic-example.html @@ -0,0 +1,9 @@ + + + {{tile.text}} + + diff --git a/src/assets/plunker/examples/grid-list-dynamic/grid-list-dynamic-example.ts b/src/assets/plunker/examples/grid-list-dynamic/grid-list-dynamic-example.ts new file mode 100644 index 000000000..8f0834fa0 --- /dev/null +++ b/src/assets/plunker/examples/grid-list-dynamic/grid-list-dynamic-example.ts @@ -0,0 +1,15 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'grid-list-dynamic-example', + templateUrl: './grid-list-dynamic-example.html', +}) +export class GridListDynamicExample { + tiles = [ + {text: 'One', cols: 3, rows: 1, color: 'lightblue'}, + {text: 'Two', cols: 1, rows: 2, color: 'lightgreen'}, + {text: 'Three', cols: 1, rows: 1, color: 'lightpink'}, + {text: 'Four', cols: 2, rows: 1, color: '#DDBDF1'}, + ]; +} diff --git a/src/assets/plunker/examples/grid-list-overview/grid-list-overview-example.css b/src/assets/plunker/examples/grid-list-overview/grid-list-overview-example.css new file mode 100644 index 000000000..743230875 --- /dev/null +++ b/src/assets/plunker/examples/grid-list-overview/grid-list-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/plunker/examples/grid-list-overview/grid-list-overview-example.html b/src/assets/plunker/examples/grid-list-overview/grid-list-overview-example.html new file mode 100644 index 000000000..bbcdb140f --- /dev/null +++ b/src/assets/plunker/examples/grid-list-overview/grid-list-overview-example.html @@ -0,0 +1,6 @@ + + 1 + 2 + 3 + 4 + diff --git a/src/assets/plunker/examples/grid-list-overview/grid-list-overview-example.ts b/src/assets/plunker/examples/grid-list-overview/grid-list-overview-example.ts new file mode 100644 index 000000000..2485bb516 --- /dev/null +++ b/src/assets/plunker/examples/grid-list-overview/grid-list-overview-example.ts @@ -0,0 +1,8 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'grid-list-overview-example', + templateUrl: './grid-list-overview-example.html', +}) +export class GridListOverviewExample {} diff --git a/src/assets/plunker/examples/icon-overview/icon-overview-example.css b/src/assets/plunker/examples/icon-overview/icon-overview-example.css new file mode 100644 index 000000000..743230875 --- /dev/null +++ b/src/assets/plunker/examples/icon-overview/icon-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/plunker/examples/icon-overview/icon-overview-example.html b/src/assets/plunker/examples/icon-overview/icon-overview-example.html new file mode 100644 index 000000000..dd46af80f --- /dev/null +++ b/src/assets/plunker/examples/icon-overview/icon-overview-example.html @@ -0,0 +1 @@ +home diff --git a/src/assets/plunker/examples/icon-overview/icon-overview-example.ts b/src/assets/plunker/examples/icon-overview/icon-overview-example.ts new file mode 100644 index 000000000..90ed28a61 --- /dev/null +++ b/src/assets/plunker/examples/icon-overview/icon-overview-example.ts @@ -0,0 +1,8 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'icon-overview-example', + templateUrl: './icon-overview-example.html', +}) +export class IconOverviewExample {} diff --git a/src/assets/plunker/examples/icon-svg-example/icon-svg-example.css b/src/assets/plunker/examples/icon-svg-example/icon-svg-example.css new file mode 100644 index 000000000..743230875 --- /dev/null +++ b/src/assets/plunker/examples/icon-svg-example/icon-svg-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/plunker/examples/icon-svg-example/icon-svg-example.html b/src/assets/plunker/examples/icon-svg-example/icon-svg-example.html new file mode 100644 index 000000000..ac74cf790 --- /dev/null +++ b/src/assets/plunker/examples/icon-svg-example/icon-svg-example.html @@ -0,0 +1 @@ + diff --git a/src/assets/plunker/examples/icon-svg-example/icon-svg-example.ts b/src/assets/plunker/examples/icon-svg-example/icon-svg-example.ts new file mode 100644 index 000000000..b9689b420 --- /dev/null +++ b/src/assets/plunker/examples/icon-svg-example/icon-svg-example.ts @@ -0,0 +1,16 @@ +import {Component} from '@angular/core'; +import {DomSanitizer} from '@angular/platform-browser'; +import {MdIconRegistry} from '@angular/material'; + + +@Component({ + selector: 'icon-svg-example', + templateUrl: './icon-svg-example.html', +}) +export class IconSvgExample { + constructor(iconRegistry: MdIconRegistry, sanitizer: DomSanitizer) { + iconRegistry.addSvgIcon( + 'thumbs-up', + sanitizer.bypassSecurityTrustResourceUrl('assets/img/examples/thumbup-icon.svg')); + } +} diff --git a/src/assets/plunker/examples/input-form/input-form-example.css b/src/assets/plunker/examples/input-form/input-form-example.css new file mode 100644 index 000000000..269cb291a --- /dev/null +++ b/src/assets/plunker/examples/input-form/input-form-example.css @@ -0,0 +1,7 @@ +.example-form { + width: 500px; +} + +.example-full-width { + width: 100%; +} diff --git a/src/assets/plunker/examples/input-form/input-form-example.html b/src/assets/plunker/examples/input-form/input-form-example.html new file mode 100644 index 000000000..d2507d604 --- /dev/null +++ b/src/assets/plunker/examples/input-form/input-form-example.html @@ -0,0 +1,36 @@ +
+ + + + + + + +
+ + + +
+ +

+ + + + + + +

+ + + + + +
+ + + + + + {{postalCode.value.length}} / 5 +
+
diff --git a/src/assets/plunker/examples/input-form/input-form-example.ts b/src/assets/plunker/examples/input-form/input-form-example.ts new file mode 100644 index 000000000..2e209d9f5 --- /dev/null +++ b/src/assets/plunker/examples/input-form/input-form-example.ts @@ -0,0 +1,9 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'input-form-example', + templateUrl: './input-form-example.html', + styleUrls: ['./input-form-example.css'], +}) +export class InputFormExample {} diff --git a/src/assets/plunker/examples/input-overview/input-overview-example.css b/src/assets/plunker/examples/input-overview/input-overview-example.css new file mode 100644 index 000000000..743230875 --- /dev/null +++ b/src/assets/plunker/examples/input-overview/input-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/plunker/examples/input-overview/input-overview-example.html b/src/assets/plunker/examples/input-overview/input-overview-example.html new file mode 100644 index 000000000..39b608f5e --- /dev/null +++ b/src/assets/plunker/examples/input-overview/input-overview-example.html @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/plunker/examples/input-overview/input-overview-example.ts b/src/assets/plunker/examples/input-overview/input-overview-example.ts new file mode 100644 index 000000000..2bdc3fd6b --- /dev/null +++ b/src/assets/plunker/examples/input-overview/input-overview-example.ts @@ -0,0 +1,8 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'input-overview-example', + templateUrl: './input-overview-example.html', +}) +export class InputOverviewExample {} diff --git a/src/assets/plunker/examples/list-overview/list-overview-example.css b/src/assets/plunker/examples/list-overview/list-overview-example.css new file mode 100644 index 000000000..743230875 --- /dev/null +++ b/src/assets/plunker/examples/list-overview/list-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/plunker/examples/list-overview/list-overview-example.html b/src/assets/plunker/examples/list-overview/list-overview-example.html new file mode 100644 index 000000000..ada715ee0 --- /dev/null +++ b/src/assets/plunker/examples/list-overview/list-overview-example.html @@ -0,0 +1,5 @@ + + Item 1 + Item 2 + Item 3 + diff --git a/src/assets/plunker/examples/list-overview/list-overview-example.ts b/src/assets/plunker/examples/list-overview/list-overview-example.ts new file mode 100644 index 000000000..f38e18602 --- /dev/null +++ b/src/assets/plunker/examples/list-overview/list-overview-example.ts @@ -0,0 +1,8 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'list-overview-example', + templateUrl: './list-overview-example.html', +}) +export class ListOverviewExample {} diff --git a/src/assets/plunker/examples/list-sections/list-sections-example.css b/src/assets/plunker/examples/list-sections/list-sections-example.css new file mode 100644 index 000000000..743230875 --- /dev/null +++ b/src/assets/plunker/examples/list-sections/list-sections-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/plunker/examples/list-sections/list-sections-example.html b/src/assets/plunker/examples/list-sections/list-sections-example.html new file mode 100644 index 000000000..fe81facd9 --- /dev/null +++ b/src/assets/plunker/examples/list-sections/list-sections-example.html @@ -0,0 +1,15 @@ + +

Folders

+ + folder +

{{folder.name}}

+

{{folder.updated | date}}

+ + +

Notes

+ + note +

{{note.name}}

+

{{note.updated | date}}

+ + diff --git a/src/assets/plunker/examples/list-sections/list-sections-example.ts b/src/assets/plunker/examples/list-sections/list-sections-example.ts new file mode 100644 index 000000000..d6fd70339 --- /dev/null +++ b/src/assets/plunker/examples/list-sections/list-sections-example.ts @@ -0,0 +1,33 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'list-sections-example', + templateUrl: './list-sections-example.html', +}) +export class ListSectionsExample { + folders = [ + { + name: 'Photos', + updated: new Date('1/1/16'), + }, + { + name: 'Recipes', + updated: new Date('1/17/16'), + }, + { + name: 'Work', + updated: new Date('1/28/16'), + } + ]; + notes = [ + { + name: 'Vacation Itinerary', + updated: new Date('2/20/16'), + }, + { + name: 'Kitchen Remodel', + updated: new Date('1/18/16'), + } + ]; +} diff --git a/src/assets/plunker/examples/menu-icons/menu-icons-example.css b/src/assets/plunker/examples/menu-icons/menu-icons-example.css new file mode 100644 index 000000000..743230875 --- /dev/null +++ b/src/assets/plunker/examples/menu-icons/menu-icons-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/plunker/examples/menu-icons/menu-icons-example.html b/src/assets/plunker/examples/menu-icons/menu-icons-example.html new file mode 100644 index 000000000..e14942451 --- /dev/null +++ b/src/assets/plunker/examples/menu-icons/menu-icons-example.html @@ -0,0 +1,17 @@ + + + + + + diff --git a/src/assets/plunker/examples/menu-icons/menu-icons-example.ts b/src/assets/plunker/examples/menu-icons/menu-icons-example.ts new file mode 100644 index 000000000..070bc434b --- /dev/null +++ b/src/assets/plunker/examples/menu-icons/menu-icons-example.ts @@ -0,0 +1,8 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'menu-icons-example', + templateUrl: './menu-icons-example.html', +}) +export class MenuIconsExample {} diff --git a/src/assets/plunker/examples/menu-overview/menu-overview-example.css b/src/assets/plunker/examples/menu-overview/menu-overview-example.css new file mode 100644 index 000000000..743230875 --- /dev/null +++ b/src/assets/plunker/examples/menu-overview/menu-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/plunker/examples/menu-overview/menu-overview-example.html b/src/assets/plunker/examples/menu-overview/menu-overview-example.html new file mode 100644 index 000000000..2b5d246c2 --- /dev/null +++ b/src/assets/plunker/examples/menu-overview/menu-overview-example.html @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/plunker/examples/menu-overview/menu-overview-example.ts b/src/assets/plunker/examples/menu-overview/menu-overview-example.ts new file mode 100644 index 000000000..b5b8c8a8d --- /dev/null +++ b/src/assets/plunker/examples/menu-overview/menu-overview-example.ts @@ -0,0 +1,8 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'menu-overview-example', + templateUrl: './menu-overview-example.html', +}) +export class MenuOverviewExample {} diff --git a/src/assets/plunker/examples/progress-bar-configurable/progress-bar-configurable-example.css b/src/assets/plunker/examples/progress-bar-configurable/progress-bar-configurable-example.css new file mode 100644 index 000000000..558293fbb --- /dev/null +++ b/src/assets/plunker/examples/progress-bar-configurable/progress-bar-configurable-example.css @@ -0,0 +1,14 @@ +.example-h2 { + margin: 10px; +} + +.example-section { + display: flex; + align-content: center; + align-items: center; + height: 60px; +} + +.example-margin { + margin: 0 10px; +} diff --git a/src/assets/plunker/examples/progress-bar-configurable/progress-bar-configurable-example.html b/src/assets/plunker/examples/progress-bar-configurable/progress-bar-configurable-example.html new file mode 100644 index 000000000..1faee8af1 --- /dev/null +++ b/src/assets/plunker/examples/progress-bar-configurable/progress-bar-configurable-example.html @@ -0,0 +1,63 @@ + + +

Progress bar configuration

+ +
+ + + + Primary + + + Accent + + + Warn + + +
+ +
+ + + + Determinate + + + Indeterminate + + + Buffer + + + Query + + +
+ +
+ + +
+
+ + +
+ + + + + +

Result

+ +
+ + +
+ + diff --git a/src/assets/plunker/examples/progress-bar-configurable/progress-bar-configurable-example.ts b/src/assets/plunker/examples/progress-bar-configurable/progress-bar-configurable-example.ts new file mode 100644 index 000000000..f3fa93782 --- /dev/null +++ b/src/assets/plunker/examples/progress-bar-configurable/progress-bar-configurable-example.ts @@ -0,0 +1,14 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'progress-bar-configurable-example', + templateUrl: './progress-bar-configurable-example.html', + styleUrls: ['./progress-bar-configurable-example.css'], +}) +export class ProgressBarConfigurableExample { + color = 'primary'; + mode = 'determinate'; + value = 50; + bufferValue = 75; +} diff --git a/src/assets/plunker/examples/progress-bar-overview/progress-bar-overview-example.css b/src/assets/plunker/examples/progress-bar-overview/progress-bar-overview-example.css new file mode 100644 index 000000000..743230875 --- /dev/null +++ b/src/assets/plunker/examples/progress-bar-overview/progress-bar-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/plunker/examples/progress-bar-overview/progress-bar-overview-example.html b/src/assets/plunker/examples/progress-bar-overview/progress-bar-overview-example.html new file mode 100644 index 000000000..8ab16e9cf --- /dev/null +++ b/src/assets/plunker/examples/progress-bar-overview/progress-bar-overview-example.html @@ -0,0 +1 @@ + diff --git a/src/assets/plunker/examples/progress-bar-overview/progress-bar-overview-example.ts b/src/assets/plunker/examples/progress-bar-overview/progress-bar-overview-example.ts new file mode 100644 index 000000000..cf11f1cf2 --- /dev/null +++ b/src/assets/plunker/examples/progress-bar-overview/progress-bar-overview-example.ts @@ -0,0 +1,8 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'progress-bar-overview-example', + templateUrl: './progress-bar-overview-example.html', +}) +export class ProgressBarOverviewExample {} diff --git a/src/assets/plunker/examples/progress-spinner-configurable/progress-spinner-configurable-example.css b/src/assets/plunker/examples/progress-spinner-configurable/progress-spinner-configurable-example.css new file mode 100644 index 000000000..558293fbb --- /dev/null +++ b/src/assets/plunker/examples/progress-spinner-configurable/progress-spinner-configurable-example.css @@ -0,0 +1,14 @@ +.example-h2 { + margin: 10px; +} + +.example-section { + display: flex; + align-content: center; + align-items: center; + height: 60px; +} + +.example-margin { + margin: 0 10px; +} diff --git a/src/assets/plunker/examples/progress-spinner-configurable/progress-spinner-configurable-example.html b/src/assets/plunker/examples/progress-spinner-configurable/progress-spinner-configurable-example.html new file mode 100644 index 000000000..a034e2f85 --- /dev/null +++ b/src/assets/plunker/examples/progress-spinner-configurable/progress-spinner-configurable-example.html @@ -0,0 +1,49 @@ + + +

Progress circle configuration

+ +
+ + + + Primary + + + Accent + + + Warn + + +
+ +
+ + + + Determinate + + + Indeterminate + + +
+ +
+ + +
+ + + + +

Result

+ + + + + diff --git a/src/assets/plunker/examples/progress-spinner-configurable/progress-spinner-configurable-example.ts b/src/assets/plunker/examples/progress-spinner-configurable/progress-spinner-configurable-example.ts new file mode 100644 index 000000000..e8538a0f8 --- /dev/null +++ b/src/assets/plunker/examples/progress-spinner-configurable/progress-spinner-configurable-example.ts @@ -0,0 +1,13 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'progress-spinner-configurable-example', + templateUrl: './progress-spinner-configurable-example.html', + styleUrls: ['./progress-spinner-configurable-example.css'], +}) +export class ProgressSpinnerConfigurableExample { + color = 'praimry'; + mode = 'determinate'; + value = 50; +} diff --git a/src/assets/plunker/examples/progress-spinner-overview/progress-spinner-overview-example.css b/src/assets/plunker/examples/progress-spinner-overview/progress-spinner-overview-example.css new file mode 100644 index 000000000..743230875 --- /dev/null +++ b/src/assets/plunker/examples/progress-spinner-overview/progress-spinner-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/plunker/examples/progress-spinner-overview/progress-spinner-overview-example.html b/src/assets/plunker/examples/progress-spinner-overview/progress-spinner-overview-example.html new file mode 100644 index 000000000..cd768c673 --- /dev/null +++ b/src/assets/plunker/examples/progress-spinner-overview/progress-spinner-overview-example.html @@ -0,0 +1 @@ + diff --git a/src/assets/plunker/examples/progress-spinner-overview/progress-spinner-overview-example.ts b/src/assets/plunker/examples/progress-spinner-overview/progress-spinner-overview-example.ts new file mode 100644 index 000000000..89cce852a --- /dev/null +++ b/src/assets/plunker/examples/progress-spinner-overview/progress-spinner-overview-example.ts @@ -0,0 +1,8 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'progress-spinner-overview-example', + templateUrl: './progress-spinner-overview-example.html', +}) +export class ProgressSpinnerOverviewExample {} diff --git a/src/assets/plunker/examples/radio-ng-model/radio-ng-model-example.css b/src/assets/plunker/examples/radio-ng-model/radio-ng-model-example.css new file mode 100644 index 000000000..f70c1b3b5 --- /dev/null +++ b/src/assets/plunker/examples/radio-ng-model/radio-ng-model-example.css @@ -0,0 +1,12 @@ +.example-radio-group { + display: inline-flex; + flex-direction: column; +} + +.example-radio-button { + margin: 5px; +} + +.example-selected-value { + margin: 15px 0; +} diff --git a/src/assets/plunker/examples/radio-ng-model/radio-ng-model-example.html b/src/assets/plunker/examples/radio-ng-model/radio-ng-model-example.html new file mode 100644 index 000000000..108971b57 --- /dev/null +++ b/src/assets/plunker/examples/radio-ng-model/radio-ng-model-example.html @@ -0,0 +1,6 @@ + + + {{season}} + + +
Your favorite season is: {{favoriteSeason}}
diff --git a/src/assets/plunker/examples/radio-ng-model/radio-ng-model-example.ts b/src/assets/plunker/examples/radio-ng-model/radio-ng-model-example.ts new file mode 100644 index 000000000..42e93bc5d --- /dev/null +++ b/src/assets/plunker/examples/radio-ng-model/radio-ng-model-example.ts @@ -0,0 +1,18 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'radio-ng-model-example', + templateUrl: './radio-ng-model-example.html', + styleUrls: ['./radio-ng-model-example.css'], +}) +export class RadioNgModelExample { + favoriteSeason: string; + + seasons = [ + 'Winter', + 'Spring', + 'Summer', + 'Autumn', + ]; +} diff --git a/src/assets/plunker/examples/radio-overview/radio-overview-example.css b/src/assets/plunker/examples/radio-overview/radio-overview-example.css new file mode 100644 index 000000000..743230875 --- /dev/null +++ b/src/assets/plunker/examples/radio-overview/radio-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/plunker/examples/radio-overview/radio-overview-example.html b/src/assets/plunker/examples/radio-overview/radio-overview-example.html new file mode 100644 index 000000000..4038381cc --- /dev/null +++ b/src/assets/plunker/examples/radio-overview/radio-overview-example.html @@ -0,0 +1,4 @@ + + Option 1 + Option 2 + diff --git a/src/assets/plunker/examples/radio-overview/radio-overview-example.ts b/src/assets/plunker/examples/radio-overview/radio-overview-example.ts new file mode 100644 index 000000000..a845835e4 --- /dev/null +++ b/src/assets/plunker/examples/radio-overview/radio-overview-example.ts @@ -0,0 +1,8 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'radio-overview-example', + templateUrl: './radio-overview-example.html', +}) +export class RadioOverviewExample {} diff --git a/src/assets/plunker/examples/select-form/select-form-example.css b/src/assets/plunker/examples/select-form/select-form-example.css new file mode 100644 index 000000000..743230875 --- /dev/null +++ b/src/assets/plunker/examples/select-form/select-form-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/plunker/examples/select-form/select-form-example.html b/src/assets/plunker/examples/select-form/select-form-example.html new file mode 100644 index 000000000..6dea33cc5 --- /dev/null +++ b/src/assets/plunker/examples/select-form/select-form-example.html @@ -0,0 +1,9 @@ +
+ + + {{food.viewValue}} + + + +

Selected value: {{selectedValue}}

+
diff --git a/src/assets/plunker/examples/select-form/select-form-example.ts b/src/assets/plunker/examples/select-form/select-form-example.ts new file mode 100644 index 000000000..684bf016e --- /dev/null +++ b/src/assets/plunker/examples/select-form/select-form-example.ts @@ -0,0 +1,16 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'select-form-example', + templateUrl: './select-form-example.html', +}) +export class SelectFormExample { + selectedValue: string; + + foods = [ + {value: 'steak-0', viewValue: 'Steak'}, + {value: 'pizza-1', viewValue: 'Pizza'}, + {value: 'tacos-2', viewValue: 'Tacos'} + ]; +} diff --git a/src/assets/plunker/examples/select-overview/select-overview-example.css b/src/assets/plunker/examples/select-overview/select-overview-example.css new file mode 100644 index 000000000..743230875 --- /dev/null +++ b/src/assets/plunker/examples/select-overview/select-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/plunker/examples/select-overview/select-overview-example.html b/src/assets/plunker/examples/select-overview/select-overview-example.html new file mode 100644 index 000000000..a4017ca5c --- /dev/null +++ b/src/assets/plunker/examples/select-overview/select-overview-example.html @@ -0,0 +1,5 @@ + + + {{ food.viewValue }} + + diff --git a/src/assets/plunker/examples/select-overview/select-overview-example.ts b/src/assets/plunker/examples/select-overview/select-overview-example.ts new file mode 100644 index 000000000..8162dc7f6 --- /dev/null +++ b/src/assets/plunker/examples/select-overview/select-overview-example.ts @@ -0,0 +1,14 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'select-overview-example', + templateUrl: './select-overview-example.html', +}) +export class SelectOverviewExample { + foods = [ + {value: 'steak-0', viewValue: 'Steak'}, + {value: 'pizza-1', viewValue: 'Pizza'}, + {value: 'tacos-2', viewValue: 'Tacos'} + ]; +} diff --git a/src/assets/plunker/examples/sidenav-fab/sidenav-fab-example.css b/src/assets/plunker/examples/sidenav-fab/sidenav-fab-example.css new file mode 100644 index 000000000..98d497acf --- /dev/null +++ b/src/assets/plunker/examples/sidenav-fab/sidenav-fab-example.css @@ -0,0 +1,25 @@ +.example-sidenav-fab-container { + width: 500px; + height: 300px; + border: 1px solid rgba(0, 0, 0, 0.5); +} + +.example-sidenav-fab-container md-sidenav { + max-width: 200px; +} + +.example-sidenav-fab-container .md-sidenav-content, +.example-sidenav-fab-container md-sidenav { + display: flex; + overflow: visible; +} + +.example-scrolling-content { + overflow: auto; +} + +.example-fab { + position: absolute; + right: 20px; + bottom: 10px; +} diff --git a/src/assets/plunker/examples/sidenav-fab/sidenav-fab-example.html b/src/assets/plunker/examples/sidenav-fab/sidenav-fab-example.html new file mode 100644 index 000000000..f194c0985 --- /dev/null +++ b/src/assets/plunker/examples/sidenav-fab/sidenav-fab-example.html @@ -0,0 +1,32 @@ + + + +
+ Lorem ipsum dolor sit amet, pede a libero aenean phasellus, lectus metus sint ut risus, + fusce vel in pellentesque. Nisl rutrum etiam morbi consectetuer tempor magna, aenean nullam + nunc id, neque vivamus interdum sociis nulla scelerisque sem, dolor id wisi turpis magna + aliquam magna. Risus accumsan hac eget etiam donec sed, senectus erat mattis quam, tempor + vel urna occaecat cras, metus urna augue nec at. Et morbi amet dui praesent, nec eu at, + ligula ipsum dui sollicitudin, quis nisl massa viverra ligula, mauris fermentum orci arcu + enim fringilla. Arcu erat nulla in aenean lacinia ullamcorper, urna ante nam et sagittis, + tristique vehicula nibh ipsum vivamus, proin proin. Porta commodo nibh quis libero amet. + Taciti dui, sapien consectetuer. +
+ + +
+ Lorem ipsum dolor sit amet, pede a libero aenean phasellus, lectus metus sint ut risus, fusce + vel in pellentesque. Nisl rutrum etiam morbi consectetuer tempor magna, aenean nullam nunc id, + neque vivamus interdum sociis nulla scelerisque sem, dolor id wisi turpis magna aliquam magna. + Risus accumsan hac eget etiam donec sed, senectus erat mattis quam, tempor vel urna occaecat + cras, metus urna augue nec at. Et morbi amet dui praesent, nec eu at, ligula ipsum dui + sollicitudin, quis nisl massa viverra ligula, mauris fermentum orci arcu enim fringilla. Arcu + erat nulla in aenean lacinia ullamcorper, urna ante nam et sagittis, tristique vehicula nibh + ipsum vivamus, proin proin. Porta commodo nibh quis libero amet. Taciti dui, sapien + consectetuer. +
+ diff --git a/src/assets/plunker/examples/sidenav-fab/sidenav-fab-example.ts b/src/assets/plunker/examples/sidenav-fab/sidenav-fab-example.ts new file mode 100644 index 000000000..a86050b29 --- /dev/null +++ b/src/assets/plunker/examples/sidenav-fab/sidenav-fab-example.ts @@ -0,0 +1,10 @@ +import {Component, ViewEncapsulation} from '@angular/core'; + + +@Component({ + selector: 'sidenav-fab-example', + templateUrl: './sidenav-fab-example.html', + styleUrls: ['./sidenav-fab-example.css'], + encapsulation: ViewEncapsulation.None, +}) +export class SidenavFabExample {} diff --git a/src/assets/plunker/examples/sidenav-overview/sidenav-overview-example.css b/src/assets/plunker/examples/sidenav-overview/sidenav-overview-example.css new file mode 100644 index 000000000..8ab00588b --- /dev/null +++ b/src/assets/plunker/examples/sidenav-overview/sidenav-overview-example.css @@ -0,0 +1,16 @@ +.example-container { + width: 500px; + height: 300px; + border: 1px solid rgba(0, 0, 0, 0.5); +} + +.example-sidenav-content { + display: flex; + height: 100%; + align-items: center; + justify-content: center; +} + +.example-sidenav { + padding: 20px; +} diff --git a/src/assets/plunker/examples/sidenav-overview/sidenav-overview-example.html b/src/assets/plunker/examples/sidenav-overview/sidenav-overview-example.html new file mode 100644 index 000000000..83f34793b --- /dev/null +++ b/src/assets/plunker/examples/sidenav-overview/sidenav-overview-example.html @@ -0,0 +1,12 @@ + + + Jolly good! + + +
+ +
+ + diff --git a/src/assets/plunker/examples/sidenav-overview/sidenav-overview-example.ts b/src/assets/plunker/examples/sidenav-overview/sidenav-overview-example.ts new file mode 100644 index 000000000..533802a90 --- /dev/null +++ b/src/assets/plunker/examples/sidenav-overview/sidenav-overview-example.ts @@ -0,0 +1,9 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'sidenav-overview-example', + templateUrl: './sidenav-overview-example.html', + styleUrls: ['./sidenav-overview-example.css'], +}) +export class SidenavOverviewExample {} diff --git a/src/assets/plunker/examples/slide-toggle-configurable/slide-toggle-configurable-example.css b/src/assets/plunker/examples/slide-toggle-configurable/slide-toggle-configurable-example.css new file mode 100644 index 000000000..060532ee7 --- /dev/null +++ b/src/assets/plunker/examples/slide-toggle-configurable/slide-toggle-configurable-example.css @@ -0,0 +1,14 @@ +.example-h2 { + margin: 10px; +} + +.example-section { + display: flex; + align-content: center; + align-items: center; + height: 60px; +} + +.example-margin { + margin: 10px; +} diff --git a/src/assets/plunker/examples/slide-toggle-configurable/slide-toggle-configurable-example.html b/src/assets/plunker/examples/slide-toggle-configurable/slide-toggle-configurable-example.html new file mode 100644 index 000000000..88099f4b0 --- /dev/null +++ b/src/assets/plunker/examples/slide-toggle-configurable/slide-toggle-configurable-example.html @@ -0,0 +1,44 @@ + + +

Slider configuration

+ +
+ + + + Primary + + + Accent + + + Warn + + +
+ +
+ Checked +
+ +
+ Disabled +
+ + + + + +

Result

+ +
+ + Slide me! + +
+ + diff --git a/src/assets/plunker/examples/slide-toggle-configurable/slide-toggle-configurable-example.ts b/src/assets/plunker/examples/slide-toggle-configurable/slide-toggle-configurable-example.ts new file mode 100644 index 000000000..cfa28cedd --- /dev/null +++ b/src/assets/plunker/examples/slide-toggle-configurable/slide-toggle-configurable-example.ts @@ -0,0 +1,13 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'slide-toggle-configurable-example', + templateUrl: './slide-toggle-configurable-example.html', + styleUrls: ['./slide-toggle-configurable-example.css'], +}) +export class SlideToggleConfigurableExample { + color = 'accent'; + checked = false; + disabled = false; +} diff --git a/src/assets/plunker/examples/slide-toggle-overview/slide-toggle-overview-example.css b/src/assets/plunker/examples/slide-toggle-overview/slide-toggle-overview-example.css new file mode 100644 index 000000000..743230875 --- /dev/null +++ b/src/assets/plunker/examples/slide-toggle-overview/slide-toggle-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/plunker/examples/slide-toggle-overview/slide-toggle-overview-example.html b/src/assets/plunker/examples/slide-toggle-overview/slide-toggle-overview-example.html new file mode 100644 index 000000000..6b9586e14 --- /dev/null +++ b/src/assets/plunker/examples/slide-toggle-overview/slide-toggle-overview-example.html @@ -0,0 +1 @@ +Slide me! diff --git a/src/assets/plunker/examples/slide-toggle-overview/slide-toggle-overview-example.ts b/src/assets/plunker/examples/slide-toggle-overview/slide-toggle-overview-example.ts new file mode 100644 index 000000000..0f35c9d5e --- /dev/null +++ b/src/assets/plunker/examples/slide-toggle-overview/slide-toggle-overview-example.ts @@ -0,0 +1,8 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'slide-toggle-overview-example', + templateUrl: './slide-toggle-overview-example.html', +}) +export class SlideToggleOverviewExample {} diff --git a/src/assets/plunker/examples/slider-configurable/slider-configurable-example.css b/src/assets/plunker/examples/slider-configurable/slider-configurable-example.css new file mode 100644 index 000000000..389e65bd7 --- /dev/null +++ b/src/assets/plunker/examples/slider-configurable/slider-configurable-example.css @@ -0,0 +1,22 @@ +.example-h2 { + margin: 10px; +} + +.example-section { + display: flex; + align-content: center; + align-items: center; + height: 60px; +} + +.example-margin { + margin: 10px; +} + +.md-slider-horizontal { + width: 300px; +} + +.md-slider-vertical { + height: 300px; +} diff --git a/src/assets/plunker/examples/slider-configurable/slider-configurable-example.html b/src/assets/plunker/examples/slider-configurable/slider-configurable-example.html new file mode 100644 index 000000000..5c842cfd5 --- /dev/null +++ b/src/assets/plunker/examples/slider-configurable/slider-configurable-example.html @@ -0,0 +1,63 @@ + + +

Slider configuration

+ +
+ + + + + + + + + + + + +
+ +
+ Show ticks + + Auto ticks + + + + +
+ +
+ Show thumb label +
+ +
+ Vertical + Inverted +
+ +
+ Disabled +
+ + + + + + +

Result

+ + + + + diff --git a/src/assets/plunker/examples/slider-configurable/slider-configurable-example.ts b/src/assets/plunker/examples/slider-configurable/slider-configurable-example.ts new file mode 100644 index 000000000..933a9dee7 --- /dev/null +++ b/src/assets/plunker/examples/slider-configurable/slider-configurable-example.ts @@ -0,0 +1,29 @@ +import {Component, ViewEncapsulation} from '@angular/core'; + + +@Component({ + selector: 'slider-configurable-example', + templateUrl: './slider-configurable-example.html', + styleUrls: ['./slider-configurable-example.css'], + encapsulation: ViewEncapsulation.None, +}) +export class SliderConfigurableExample { + autoTicks = false; + disabled = false; + invert = false; + max = 100; + min = 0; + showTicks = false; + step = 1; + thumbLabel = false; + value = 0; + vertical = false; + + get tickInterval(): number | 'auto' { + return this.showTicks ? (this.autoTicks ? 'auto' : this._tickInterval) : null; + } + set tickInterval(v) { + this._tickInterval = Number(v); + } + private _tickInterval = 1; +} diff --git a/src/assets/plunker/examples/slider-overview/slider-overview-example.css b/src/assets/plunker/examples/slider-overview/slider-overview-example.css new file mode 100644 index 000000000..8dfe08ccc --- /dev/null +++ b/src/assets/plunker/examples/slider-overview/slider-overview-example.css @@ -0,0 +1,4 @@ +/** No CSS for this example */ +md-slider { + width: 300px; +} diff --git a/src/assets/plunker/examples/slider-overview/slider-overview-example.html b/src/assets/plunker/examples/slider-overview/slider-overview-example.html new file mode 100644 index 000000000..9a92c8f86 --- /dev/null +++ b/src/assets/plunker/examples/slider-overview/slider-overview-example.html @@ -0,0 +1 @@ + diff --git a/src/assets/plunker/examples/slider-overview/slider-overview-example.ts b/src/assets/plunker/examples/slider-overview/slider-overview-example.ts new file mode 100644 index 000000000..1f020fd66 --- /dev/null +++ b/src/assets/plunker/examples/slider-overview/slider-overview-example.ts @@ -0,0 +1,9 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'slider-overview-example', + templateUrl: './slider-overview-example.html', + styleUrls: ['./slider-overview-example.css'], +}) +export class SliderOverviewExample {} diff --git a/src/assets/plunker/examples/snack-bar-component/snack-bar-component-example-snack.css b/src/assets/plunker/examples/snack-bar-component/snack-bar-component-example-snack.css new file mode 100644 index 000000000..fa7dc6749 --- /dev/null +++ b/src/assets/plunker/examples/snack-bar-component/snack-bar-component-example-snack.css @@ -0,0 +1,3 @@ +.example-pizza-party { + color: hotpink; +} diff --git a/src/assets/plunker/examples/snack-bar-component/snack-bar-component-example-snack.html b/src/assets/plunker/examples/snack-bar-component/snack-bar-component-example-snack.html new file mode 100644 index 000000000..d43b91e9a --- /dev/null +++ b/src/assets/plunker/examples/snack-bar-component/snack-bar-component-example-snack.html @@ -0,0 +1,3 @@ + + 🍕🍕🍕🍕🍕 Pizza party!!! 🍕🍕🍕🍕🍕 + diff --git a/src/assets/plunker/examples/snack-bar-component/snack-bar-component-example.html b/src/assets/plunker/examples/snack-bar-component/snack-bar-component-example.html new file mode 100644 index 000000000..69fe01bc3 --- /dev/null +++ b/src/assets/plunker/examples/snack-bar-component/snack-bar-component-example.html @@ -0,0 +1,3 @@ + diff --git a/src/assets/plunker/examples/snack-bar-component/snack-bar-component-example.ts b/src/assets/plunker/examples/snack-bar-component/snack-bar-component-example.ts new file mode 100644 index 000000000..03ef19e8a --- /dev/null +++ b/src/assets/plunker/examples/snack-bar-component/snack-bar-component-example.ts @@ -0,0 +1,25 @@ +import {Component} from '@angular/core'; +import {MdSnackBar} from '@angular/material'; + + +@Component({ + selector: 'snack-bar-component-example', + templateUrl: './snack-bar-component-example.html', +}) +export class SnackBarComponentExample { + constructor(public snackBar: MdSnackBar) {} + + openSnackBar() { + this.snackBar.openFromComponent(PizzaPartyComponent, { + duration: 500, + }); + } +} + + +@Component({ + selector: 'snack-bar-component-example-snack', + templateUrl: './snack-bar-component-example-snack.html', + styleUrls: ['./snack-bar-component-example-snack.css'], +}) +export class PizzaPartyComponent {} diff --git a/src/assets/plunker/examples/snack-bar-overview/snack-bar-overview-example.css b/src/assets/plunker/examples/snack-bar-overview/snack-bar-overview-example.css new file mode 100644 index 000000000..743230875 --- /dev/null +++ b/src/assets/plunker/examples/snack-bar-overview/snack-bar-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/plunker/examples/snack-bar-overview/snack-bar-overview-example.html b/src/assets/plunker/examples/snack-bar-overview/snack-bar-overview-example.html new file mode 100644 index 000000000..1076f3b70 --- /dev/null +++ b/src/assets/plunker/examples/snack-bar-overview/snack-bar-overview-example.html @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/plunker/examples/snack-bar-overview/snack-bar-overview-example.ts b/src/assets/plunker/examples/snack-bar-overview/snack-bar-overview-example.ts new file mode 100644 index 000000000..312de83ea --- /dev/null +++ b/src/assets/plunker/examples/snack-bar-overview/snack-bar-overview-example.ts @@ -0,0 +1,17 @@ +import {Component} from '@angular/core'; +import {MdSnackBar} from '@angular/material'; + + +@Component({ + selector: 'snack-bar-overview-example', + templateUrl: './snack-bar-overview-example.html', +}) +export class SnackBarOverviewExample { + constructor(public snackBar: MdSnackBar) {} + + openSnackBar(message: string, action: string) { + this.snackBar.open(message, action, { + duration: 2000, + }); + } +} diff --git a/src/assets/plunker/examples/tabs-overview/tabs-overview-example.css b/src/assets/plunker/examples/tabs-overview/tabs-overview-example.css new file mode 100644 index 000000000..743230875 --- /dev/null +++ b/src/assets/plunker/examples/tabs-overview/tabs-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/plunker/examples/tabs-overview/tabs-overview-example.html b/src/assets/plunker/examples/tabs-overview/tabs-overview-example.html new file mode 100644 index 000000000..173ece5dc --- /dev/null +++ b/src/assets/plunker/examples/tabs-overview/tabs-overview-example.html @@ -0,0 +1,4 @@ + + Content 1 + Content 2 + diff --git a/src/assets/plunker/examples/tabs-overview/tabs-overview-example.ts b/src/assets/plunker/examples/tabs-overview/tabs-overview-example.ts new file mode 100644 index 000000000..4f222c112 --- /dev/null +++ b/src/assets/plunker/examples/tabs-overview/tabs-overview-example.ts @@ -0,0 +1,8 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'tabs-overview-example', + templateUrl: './tabs-overview-example.html', +}) +export class TabsOverviewExample {} diff --git a/src/assets/plunker/examples/tabs-template-label/tabs-template-label-example.css b/src/assets/plunker/examples/tabs-template-label/tabs-template-label-example.css new file mode 100644 index 000000000..743230875 --- /dev/null +++ b/src/assets/plunker/examples/tabs-template-label/tabs-template-label-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/plunker/examples/tabs-template-label/tabs-template-label-example.html b/src/assets/plunker/examples/tabs-template-label/tabs-template-label-example.html new file mode 100644 index 000000000..bde67b8e9 --- /dev/null +++ b/src/assets/plunker/examples/tabs-template-label/tabs-template-label-example.html @@ -0,0 +1 @@ +More examples coming soon! diff --git a/src/assets/plunker/examples/tabs-template-label/tabs-template-label-example.ts b/src/assets/plunker/examples/tabs-template-label/tabs-template-label-example.ts new file mode 100644 index 000000000..7015b1f74 --- /dev/null +++ b/src/assets/plunker/examples/tabs-template-label/tabs-template-label-example.ts @@ -0,0 +1,8 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'tabs-template-label-example', + templateUrl: './tabs-template-label-example.html', +}) +export class TabsTemplateLabelExample {} diff --git a/src/assets/plunker/examples/toolbar-multirow/toolbar-multirow-example.css b/src/assets/plunker/examples/toolbar-multirow/toolbar-multirow-example.css new file mode 100644 index 000000000..d7c40156b --- /dev/null +++ b/src/assets/plunker/examples/toolbar-multirow/toolbar-multirow-example.css @@ -0,0 +1,7 @@ +.example-icon { + padding: 0 14px; +} + +.example-spacer { + flex: 1 1 auto; +} diff --git a/src/assets/plunker/examples/toolbar-multirow/toolbar-multirow-example.html b/src/assets/plunker/examples/toolbar-multirow/toolbar-multirow-example.html new file mode 100644 index 000000000..9b178a212 --- /dev/null +++ b/src/assets/plunker/examples/toolbar-multirow/toolbar-multirow-example.html @@ -0,0 +1,16 @@ + + Custom Toolbar + + + Second Line + + verified_user + + + + Third Line + + favorite + delete + + diff --git a/src/assets/plunker/examples/toolbar-multirow/toolbar-multirow-example.ts b/src/assets/plunker/examples/toolbar-multirow/toolbar-multirow-example.ts new file mode 100644 index 000000000..132b98174 --- /dev/null +++ b/src/assets/plunker/examples/toolbar-multirow/toolbar-multirow-example.ts @@ -0,0 +1,9 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'toolbar-multirow-example', + templateUrl: './toolbar-multirow-example.html', + styleUrls: ['./toolbar-multirow-example.css'], +}) +export class ToolbarMultirowExample {} diff --git a/src/assets/plunker/examples/toolbar-overview/toolbar-overview-example.css b/src/assets/plunker/examples/toolbar-overview/toolbar-overview-example.css new file mode 100644 index 000000000..743230875 --- /dev/null +++ b/src/assets/plunker/examples/toolbar-overview/toolbar-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/plunker/examples/toolbar-overview/toolbar-overview-example.html b/src/assets/plunker/examples/toolbar-overview/toolbar-overview-example.html new file mode 100644 index 000000000..bf8cc3998 --- /dev/null +++ b/src/assets/plunker/examples/toolbar-overview/toolbar-overview-example.html @@ -0,0 +1 @@ +My App diff --git a/src/assets/plunker/examples/toolbar-overview/toolbar-overview-example.ts b/src/assets/plunker/examples/toolbar-overview/toolbar-overview-example.ts new file mode 100644 index 000000000..6919aca4f --- /dev/null +++ b/src/assets/plunker/examples/toolbar-overview/toolbar-overview-example.ts @@ -0,0 +1,8 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'toolbar-overview-example', + templateUrl: './toolbar-overview-example.html', +}) +export class ToolbarOverviewExample {} diff --git a/src/assets/plunker/examples/tooltip-overview/tooltip-overview-example.css b/src/assets/plunker/examples/tooltip-overview/tooltip-overview-example.css new file mode 100644 index 000000000..743230875 --- /dev/null +++ b/src/assets/plunker/examples/tooltip-overview/tooltip-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/plunker/examples/tooltip-overview/tooltip-overview-example.html b/src/assets/plunker/examples/tooltip-overview/tooltip-overview-example.html new file mode 100644 index 000000000..8319a8545 --- /dev/null +++ b/src/assets/plunker/examples/tooltip-overview/tooltip-overview-example.html @@ -0,0 +1 @@ +I have a tooltip diff --git a/src/assets/plunker/examples/tooltip-overview/tooltip-overview-example.ts b/src/assets/plunker/examples/tooltip-overview/tooltip-overview-example.ts new file mode 100644 index 000000000..cf9eefc94 --- /dev/null +++ b/src/assets/plunker/examples/tooltip-overview/tooltip-overview-example.ts @@ -0,0 +1,8 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'tooltip-overview-example', + templateUrl: './tooltip-overview-example.html', +}) +export class TooltipOverviewExample {} diff --git a/src/assets/plunker/examples/tooltip-position/tooltip-position-example.css b/src/assets/plunker/examples/tooltip-position/tooltip-position-example.css new file mode 100644 index 000000000..04ec59dd1 --- /dev/null +++ b/src/assets/plunker/examples/tooltip-position/tooltip-position-example.css @@ -0,0 +1,9 @@ +.example-tooltip-host { + display: inline-flex; + align-items: center; + margin: 50px; +} + +.example-select { + margin: 0 10px; +} diff --git a/src/assets/plunker/examples/tooltip-position/tooltip-position-example.html b/src/assets/plunker/examples/tooltip-position/tooltip-position-example.html new file mode 100644 index 000000000..156a5bf68 --- /dev/null +++ b/src/assets/plunker/examples/tooltip-position/tooltip-position-example.html @@ -0,0 +1,11 @@ +
+ Show tooltip + + Before + After + Above + Below + Left + Right + +
diff --git a/src/assets/plunker/examples/tooltip-position/tooltip-position-example.ts b/src/assets/plunker/examples/tooltip-position/tooltip-position-example.ts new file mode 100644 index 000000000..0b580c722 --- /dev/null +++ b/src/assets/plunker/examples/tooltip-position/tooltip-position-example.ts @@ -0,0 +1,11 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'tooltip-position-example', + templateUrl: './tooltip-position-example.html', + styleUrls: ['./tooltip-position-example.css'], +}) +export class TooltipPositionExample { + position = 'before'; +} diff --git a/src/assets/plunker/systemjs.config.js b/src/assets/plunker/systemjs.config.js index d9df643f0..d69059a39 100644 --- a/src/assets/plunker/systemjs.config.js +++ b/src/assets/plunker/systemjs.config.js @@ -27,7 +27,7 @@ System.config({ '@angular/router': 'https://unpkg.com/@angular/router/bundles/router.umd.js', '@angular/platform-browser': 'https://unpkg.com/@angular/platform-browser/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'https://unpkg.com/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', - '@angular/material': 'https://unpkg.com/@angular/material/material.umd.js', + '@angular/material': 'https://unpkg.com/@angular/material/bundles/material.umd.js', // Rxjs mapping 'rxjs': 'https://unpkg.com/rxjs',