@@ -18,6 +18,14 @@ A sidenav container may contain one or two `<md-sidenav>` elements. When there a
18
18
` <md-sidenav> ` elements, each must be placed on a different side of the container.
19
19
See the section on positioning below.
20
20
21
+
22
+ ### Sidenav vs. Drawer
23
+ The difference between sidenav and drawer is that the sidenav takes up fullscreen whereas drawer is a smaller element
24
+ that takes up a subsection of the screen. ` md-sidenav ` has to be placed inside ` md-sidenav-container ` and ` md-drawer `
25
+ has to be placed inside ` md-drawer-container ` . Currently ` md-drawer ` and ` md-sidenav ` support all the same features.
26
+ However, in the future we expect to add different features specific to the different use cases.
27
+
28
+
21
29
### Sidenav mode
22
30
The sidenav can render in one of three different ways based on the ` mode ` property.
23
31
@@ -71,18 +79,14 @@ html, body, material-app, md-sidenav-container, .my-content {
71
79
For a sidenav with a FAB (Floating Action Button) or other floating element, the recommended approach is to place the FAB
72
80
outside of the scrollable region and absolutely position it.
73
81
74
- ### Sidenav vs. Drawer
75
- The difference between sidenav and drawer is that the sidenav takes up fullscreen whereas drawer is a smaller element
76
- that takes up a subsection of the screen. ` md-sidenav ` has to be placed inside ` md-sidenav-container ` and ` md-drawer `
77
- has to be placed inside ` md-drawer-container ` . More functionalities will be added to sidenav in the future.
78
-
79
82
80
83
### Disabling closing of sidenav and drawer
81
84
By default, sidenav and drawer can be closed either by clicking on the backdrop or by pressing <kbd >ESCAPE</kbd >.
82
- ` disableClose ` attribute can be set on ` md-drawer ` or ` md-sidenav ` to disable closing by two methods. To enable one
83
- of the two methods to allow closing with ` disableClose ` attribute set, then custom event handlers can be used as below:
85
+ The ` disableClose ` attribute can be set on ` md-drawer ` or ` md-sidenav ` to disable automatic closing when the backdrop
86
+ is clicked or <kbd >ESCAPE</kbd > is pressed. To add custom logic on backdrop click, add a ` (backdropClick) ` listener to
87
+ ` md-sidenav-container ` . For custom <kdb >ESCAPE</kbd > logic, a standard ` (keydown) ` listener will suffice.
84
88
``` html
85
- <md-drawer -container (backdropClick) =" customBackdropClickHandler()" >
86
- <md-drawer disableClose (keydown) =" customKeydownHandler($event)" ></md-drawer >
87
- </md-drawer -container >
89
+ <md-sidenav -container (backdropClick) =" customBackdropClickHandler()" >
90
+ <md-sidenav disableClose (keydown) =" customKeydownHandler($event)" ></md-sidenav >
91
+ </md-sidenav -container >
88
92
```
0 commit comments