-
Notifications
You must be signed in to change notification settings - Fork 6.7k
/
dialog-demo.html
93 lines (75 loc) · 2.79 KB
/
dialog-demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<h1>Dialog demo</h1>
<button md-raised-button color="primary" (click)="openJazz()">
Open dialog
</button>
<button md-raised-button color="accent" (click)="openContentElement()">
Open dialog with content elements
</button>
<button md-raised-button color="accent" (click)="openTemplate()">
Open dialog with template content
</button>
<md-card class="demo-dialog-card">
<md-card-content>
<h2>Dialog dimensions</h2>
<p>
<md-form-field>
<input mdInput [(ngModel)]="config.width" placeholder="Width">
</md-form-field>
<md-form-field>
<input mdInput [(ngModel)]="config.height" placeholder="Height">
</md-form-field>
</p>
<h2>Dialog position</h2>
<p>
<md-form-field>
<input mdInput [(ngModel)]="config.position.top" (change)="config.position.bottom = ''" placeholder="Top">
</md-form-field>
<md-form-field>
<input mdInput [(ngModel)]="config.position.bottom" (change)="config.position.top = ''" placeholder="Bottom">
</md-form-field>
</p>
<p>
<md-form-field>
<input mdInput [(ngModel)]="config.position.left" (change)="config.position.right = ''" placeholder="Left">
</md-form-field>
<md-form-field>
<input mdInput [(ngModel)]="config.position.right" (change)="config.position.left = ''" placeholder="Right">
</md-form-field>
</p>
<h2>Dialog backdrop</h2>
<p>
<md-form-field>
<input mdInput [(ngModel)]="config.backdropClass" placeholder="Backdrop class">
</md-form-field>
</p>
<md-checkbox [(ngModel)]="config.hasBackdrop">Has backdrop</md-checkbox>
<h2>Other options</h2>
<p>
<md-select placeholder="Button alignment" [(ngModel)]="actionsAlignment">
<md-option>Start</md-option>
<md-option value="end">End</md-option>
<md-option value="center">Center</md-option>
</md-select>
</p>
<p>
<md-form-field>
<input mdInput [(ngModel)]="config.data.message" placeholder="Dialog message">
</md-form-field>
</p>
<p>
<md-checkbox [(ngModel)]="config.disableClose">Disable close</md-checkbox>
</p>
</md-card-content>
</md-card>
<p>Last afterClosed result: {{lastAfterClosedResult}}</p>
<p>Last beforeClose result: {{lastBeforeCloseResult}}</p>
<ng-template let-data let-dialogRef="dialogRef">
I'm a template dialog. I've been opened {{numTemplateOpens}} times!
<p>It's Jazz!</p>
<md-input-container>
<input mdInput placeholder="How much?" #howMuch>
</md-input-container>
<p> {{ data.message }} </p>
<button type="button" (click)="dialogRef.close(lastCloseResult = howMuch.value)">Close dialog</button>
<button (click)="dialogRef.updateSize('500px', '500px').updatePosition({ top: '25px', left: '25px' });">Change dimensions</button>`
</ng-template>