Skip to content

Commit 837b7a2

Browse files
committed
address comments
1 parent 6024bb6 commit 837b7a2

File tree

1 file changed

+14
-10
lines changed

1 file changed

+14
-10
lines changed

src/lib/sidenav/sidenav.md

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,14 @@ A sidenav container may contain one or two `<md-sidenav>` elements. When there a
1818
`<md-sidenav>` elements, each must be placed on a different side of the container.
1919
See the section on positioning below.
2020

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+
2129
### Sidenav mode
2230
The sidenav can render in one of three different ways based on the `mode` property.
2331

@@ -71,18 +79,14 @@ html, body, material-app, md-sidenav-container, .my-content {
7179
For a sidenav with a FAB (Floating Action Button) or other floating element, the recommended approach is to place the FAB
7280
outside of the scrollable region and absolutely position it.
7381

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-
7982

8083
### Disabling closing of sidenav and drawer
8184
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.
8488
```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>
8892
```

0 commit comments

Comments
 (0)