diff --git a/src/lib/sidenav/drawer.ts b/src/lib/sidenav/drawer.ts index 4a00b86a035f..a045a922afa2 100644 --- a/src/lib/sidenav/drawer.ts +++ b/src/lib/sidenav/drawer.ts @@ -118,7 +118,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); } diff --git a/src/lib/sidenav/sidenav.md b/src/lib/sidenav/sidenav.md index e58f54c3faee..ab3a2527c32d 100644 --- a/src/lib/sidenav/sidenav.md +++ b/src/lib/sidenav/sidenav.md @@ -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 ESCAPE. +The `disableClose` attribute can be set on `md-sidenav` to disable automatic closing when the backdrop +is clicked or ESCAPE is pressed. To add custom logic on backdrop click, add a `(backdropClick)` listener to +`md-sidenav-container`. For custom ESCAPE logic, a standard `(keydown)` listener will suffice. +```html + + + +``` \ No newline at end of file