docs(sidenav): add docs for hasBackdrop (#10287)

src/lib/sidenav/sidenav.md

@@ -117,7 +117,15 @@ If no `mode` is specified, `over` is used by default.
 
 <!-- example(sidenav-mode) -->
 
-`<mat-drawer>` also supports all of these same modes.
+The `over` and `push` sidenav modes show a backdrop by default, while the `side` mode does not. This
+can be customized by setting the `hasBackdrop` property on `mat-sidenav-container`. Explicitly
+setting `hasBackdrop` to `true` or `false` will override the default backdrop visibility setting for
+all sidenavs regadless of mode. Leaving the property unset or setting it to `null` will use the
+default backdrop visibility for each mode.
+
+<!-- example(sidenav-backdrop) -->
+
+`<mat-drawer>` also supports all of these same modes and options.
 
 ### Disabling automatic close
 

src/material-examples/sidenav-backdrop/sidenav-backdrop-example.css

@@ -0,0 +1,6 @@
+.example-container {
+  width: 400px;
+  height: 200px;
+  margin: 10px;
+  border: 1px solid #555;
+}

src/material-examples/sidenav-backdrop/sidenav-backdrop-example.html

@@ -0,0 +1,22 @@
+<mat-drawer-container class="example-container" [hasBackdrop]="hasBackdrop.value">
+  <mat-drawer #drawer [mode]="mode.value">I'm a drawer</mat-drawer>
+  <mat-drawer-content>
+    <mat-form-field>
+      <mat-label>Sidenav mode</mat-label>
+      <mat-select #mode value="side">
+        <mat-option value="side">Side</mat-option>
+        <mat-option value="over">Over</mat-option>
+        <mat-option value="push">Push</mat-option>
+      </mat-select>
+    </mat-form-field>
+    <mat-form-field>
+      <mat-label>Has backdrop</mat-label>
+      <mat-select #hasBackdrop>
+        <mat-option>Unset</mat-option>
+        <mat-option [value]="true">True</mat-option>
+        <mat-option [value]="false">False</mat-option>
+      </mat-select>
+    </mat-form-field>
+    <button mat-raised-button (click)="drawer.toggle()">Toggle drawer</button>
+  </mat-drawer-content>
+</mat-drawer-container>

src/material-examples/sidenav-backdrop/sidenav-backdrop-example.ts

@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+/** @title Drawer with explicit backdrop setting */
+@Component({
+  selector: 'sidenav-backdrop-example',
+  templateUrl: 'sidenav-backdrop-example.html',
+  styleUrls: ['sidenav-backdrop-example.css'],
+})
+export class SidenavBackdropExample {}