docs(dialog): add example of dialog elements (#3083)

Adds an example that shows how to use the various dialog content directives.

Fixes #2621.

Author: crisbeto

src/examples/dialog-elements/dialog-elements-example-dialog.html

@@ -0,0 +1,5 @@
+<h1 md-dialog-title>Dialog with elements</h1>
+<div md-dialog-content>This dialog showcases the title, close, content and actions elements.</div>
+<div md-dialog-actions>
+  <button md-button md-dialog-close>Close</button>
+</div>

src/examples/dialog-elements/dialog-elements-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

src/examples/dialog-elements/dialog-elements-example.html

@@ -0,0 +1 @@
+<button md-button (click)="openDialog()">Launch dialog</button>

src/examples/dialog-elements/dialog-elements-example.ts

@@ -0,0 +1,22 @@
+import {Component} from '@angular/core';
+import {MdDialog} from '@angular/material';
+
+
+@Component({
+  selector: 'dialog-elements-example',
+  templateUrl: './dialog-elements-example.html',
+})
+export class DialogElementsExample {
+  constructor(public dialog: MdDialog) { }
+
+  openDialog() {
+    this.dialog.open(DialogElementsExampleDialog);
+  }
+}
+
+
+@Component({
+  selector: 'dialog-elements-example-dialog',
+  templateUrl: './dialog-elements-example-dialog.html',
+})
+export class DialogElementsExampleDialog { }

src/examples/example-module.ts

@@ -39,6 +39,10 @@ import {
   DialogResultExampleDialog,
   DialogResultExample
 } from './dialog-result/dialog-result-example';
+import {
+  DialogElementsExampleDialog,
+  DialogElementsExample
+} from './dialog-elements/dialog-elements-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';
@@ -100,11 +104,17 @@ export const EXAMPLE_COMPONENTS = {
     selectorName: 'DialogOverviewExample, DialogOverviewExampleDialog',
   },
   'dialog-result': {
-    title: 'Dailog with a result',
+    title: 'Dialog with a result',
     component: DialogResultExample,
     additionalFiles: ['dialog-result-example-dialog.html'],
     selectorName: 'DialogResultExample, DialogResultExampleDialog',
   },
+  'dialog-elements': {
+    title: 'Dialog elements',
+    component: DialogElementsExample,
+    additionalFiles: ['dialog-elements-example-dialog.html'],
+    selectorName: 'DialogElementsExample, DialogElementsExampleDialog',
+  },
   '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},
@@ -173,6 +183,8 @@ export const EXAMPLE_LIST = [
   DialogOverviewExampleDialog,
   DialogResultExample,
   DialogResultExampleDialog,
+  DialogElementsExample,
+  DialogElementsExampleDialog,
   GridListDynamicExample,
   GridListOverviewExample,
   IconOverviewExample,