docs(drawer): Add additional documentation for disableClose (#6750)

* create event for ESCAPE keydown

* revert changes and update doc instead

* address comments

* minor modification

* remove mention of drawer
This commit is contained in:
Ji Won Shin
2017-09-08 14:31:06 -07:00
committed by tinayuangao
parent 9f2fd477f2
commit 4f4c48c6e0
2 changed files with 13 additions and 1 deletions
+1 -1
View File
@@ -119,7 +119,7 @@ export class MdDrawer implements AfterContentInit, OnDestroy {
/** Mode of the drawer; one of 'over', 'push' or 'side'. */
@Input() mode: 'over' | 'push' | 'side' = 'over';
/** Whether the drawer can be closed with the escape key or not. */
/** Whether the drawer can be closed with the escape key or by clicking on the backdrop. */
@Input()
get disableClose(): boolean { return this._disableClose; }
set disableClose(value: boolean) { this._disableClose = coerceBooleanProperty(value); }
+12
View File
@@ -70,3 +70,15 @@ html, body, material-app, md-sidenav-container, .my-content {
### FABs inside sidenav
For a sidenav with a FAB (Floating Action Button) or other floating element, the recommended approach is to place the FAB
outside of the scrollable region and absolutely position it.
### Disabling closing of sidenav
By default, sidenav can be closed either by clicking on the backdrop or by pressing <kbd>ESCAPE</kbd>.
The `disableClose` attribute can be set on `md-sidenav` to disable automatic closing when the backdrop
is clicked or <kbd>ESCAPE</kbd> is pressed. To add custom logic on backdrop click, add a `(backdropClick)` listener to
`md-sidenav-container`. For custom <kbd>ESCAPE</kbd> logic, a standard `(keydown)` listener will suffice.
```html
<md-sidenav-container (backdropClick)="customBackdropClickHandler()">
<md-sidenav disableClose (keydown)="customKeydownHandler($event)"></md-sidenav>
</md-sidenav-container>
```