1
1
< h2 > Basic Use Case</ h2 >
2
2
3
- < md-sidenav -container class ="demo-sidenav -container ">
4
- < md-sidenav #start (open) ="myinput.focus() " mode ="side ">
3
+ < md-drawer -container class ="demo-drawer -container ">
4
+ < md-drawer #start (open) ="myinput.focus() " mode ="side ">
5
5
Start Side Drawer
6
6
< br >
7
7
< button md-button (click) ="start.close() "> Close</ button >
@@ -13,19 +13,19 @@ <h2>Basic Use Case</h2>
13
13
< div > Mode: {{start.mode}}</ div >
14
14
< br >
15
15
< input #myinput >
16
- </ md-sidenav >
16
+ </ md-drawer >
17
17
18
- < md-sidenav #end position ="end ">
18
+ < md-drawer #end position ="end ">
19
19
End Side Drawer
20
20
< br >
21
21
< button md-button (click) ="end.close() "> Close</ button >
22
- </ md-sidenav >
22
+ </ md-drawer >
23
23
24
- < div class ="demo-sidenav -content ">
24
+ < div class ="demo-drawer -content ">
25
25
< h1 > My Content</ h1 >
26
26
27
27
< div >
28
- < header > Sidenav </ header >
28
+ < header > Drawer </ header >
29
29
< button md-button (click) ="start.toggle() "> Toggle Start Side Drawer</ button >
30
30
< button md-button (click) ="end.toggle() "> Toggle End Side Drawer</ button >
31
31
</ div >
@@ -34,38 +34,38 @@ <h1>My Content</h1>
34
34
< button md-raised-button class ="mat-primary "> HELLO</ button >
35
35
< button md-fab class ="mat-accent "> HI</ button >
36
36
</ div >
37
- </ md-sidenav -container >
37
+ </ md-drawer -container >
38
38
39
- < h2 > Sidenav Already Opened</ h2 >
39
+ < h2 > Drawer Already Opened</ h2 >
40
40
41
- < md-sidenav -container class ="demo-sidenav -container ">
42
- < md-sidenav #start2 opened mode ="side ">
41
+ < md-drawer -container class ="demo-drawer -container ">
42
+ < md-drawer #start2 opened mode ="side ">
43
43
Drawer
44
- </ md-sidenav >
44
+ </ md-drawer >
45
45
46
- < div class ="demo-sidenav -content ">
46
+ < div class ="demo-drawer -content ">
47
47
< button md-button (click) ="start2.toggle() "> Toggle Start Side Drawer</ button >
48
48
</ div >
49
- </ md-sidenav -container >
49
+ </ md-drawer -container >
50
50
51
- < h2 > Dynamic Position Sidenav </ h2 >
51
+ < h2 > Dynamic Position Drawer </ h2 >
52
52
53
- < md-sidenav -container class ="demo-sidenav -container ">
54
- < md-sidenav #dynamicPosSidenav1 mode ="side " [position] ="invert ? 'end' : 'start' "> Start</ md-sidenav >
55
- < md-sidenav #dynamicPosSidenav2 mode ="side " [position] ="invert ? 'start' : 'end' "> End</ md-sidenav >
53
+ < md-drawer -container class ="demo-drawer -container ">
54
+ < md-drawer #dynamicPosDrawer1 mode ="side " [position] ="invert ? 'end' : 'start' "> Start</ md-drawer >
55
+ < md-drawer #dynamicPosDrawer2 mode ="side " [position] ="invert ? 'start' : 'end' "> End</ md-drawer >
56
56
57
- < div class ="demo-sidenav -content ">
58
- < button (click) ="dynamicPosSidenav1 .toggle(); dynamicPosSidenav2 .toggle() ">
59
- Toggle sidenavs
57
+ < div class ="demo-drawer -content ">
58
+ < button (click) ="dynamicPosDrawer1 .toggle(); dynamicPosDrawer2 .toggle() ">
59
+ Toggle drawers
60
60
</ button >
61
61
< button (click) ="invert = !invert "> Change sides</ button >
62
62
</ div >
63
- </ md-sidenav -container >
63
+ </ md-drawer -container >
64
64
65
- < h2 > Sidenav with focus attributes</ h2 >
65
+ < h2 > Drawer with focus attributes</ h2 >
66
66
67
- < md-sidenav -container class ="demo-sidenav -container ">
68
- < md-sidenav #focusSidenav >
67
+ < md-drawer -container class ="demo-drawer -container ">
68
+ < md-drawer #focusDrawer >
69
69
< md-nav-list >
70
70
< a md-list-item routerLink > Link</ a >
71
71
< a md-list-item routerLink cdk-focus-region-start > Focus region start</ a >
@@ -74,14 +74,14 @@ <h2>Sidenav with focus attributes</h2>
74
74
< a md-list-item routerLink cdk-focus-region-end > Focus region end</ a >
75
75
< a md-list-item routerLink > Link</ a >
76
76
</ md-nav-list >
77
- </ md-sidenav >
77
+ </ md-drawer >
78
78
79
- < div class ="demo-sidenav -content ">
79
+ < div class ="demo-drawer -content ">
80
80
< h1 > My Content</ h1 >
81
81
82
82
< div >
83
- < header > Sidenav </ header >
84
- < button md-button (click) ="focusSidenav .toggle() "> Toggle Drawer</ button >
83
+ < header > Drawer </ header >
84
+ < button md-button (click) ="focusDrawer .toggle() "> Toggle Drawer</ button >
85
85
</ div >
86
86
</ div >
87
- </ md-sidenav -container >
87
+ </ md-drawer -container >
0 commit comments