docs(snackbar): add position example (#10000)

src/material-examples/snack-bar-position/snack-bar-position-example.html

@@ -0,0 +1,19 @@
+<mat-form-field>
+  <mat-select placeholder="Horizontal position" [(value)]="horizontalPosition">
+    <mat-option value="start">Start</mat-option>
+    <mat-option value="center">Center</mat-option>
+    <mat-option value="end">End</mat-option>
+    <mat-option value="left">Left</mat-option>
+    <mat-option value="right">Right</mat-option>
+  </mat-select>
+</mat-form-field>
+<mat-form-field>
+  <mat-select placeholder="Vertical position" [(value)]="verticalPosition">
+    <mat-option value="top">Top</mat-option>
+    <mat-option value="bottom">Bottom</mat-option>
+  </mat-select>
+</mat-form-field>
+
+<button mat-button (click)="openSnackBar()" aria-label="Show an example snack-bar">
+  Pool party!
+</button>

src/material-examples/snack-bar-position/snack-bar-position-example.ts

@@ -0,0 +1,29 @@
+import {Component} from '@angular/core';
+import {
+  MatSnackBar,
+  MatSnackBarHorizontalPosition,
+  MatSnackBarVerticalPosition,
+} from '@angular/material';
+
+/**
+ * @title Snack-bar with configurable position
+ */
+@Component({
+  selector: 'snack-bar-position-example',
+  templateUrl: 'snack-bar-position-example.html',
+})
+export class SnackBarPositionExample {
+
+  horizontalPosition: MatSnackBarHorizontalPosition = 'start';
+  verticalPosition: MatSnackBarVerticalPosition = 'bottom';
+
+  constructor(public snackBar: MatSnackBar) {}
+
+  openSnackBar() {
+    this.snackBar.open('Canonball!!', 'End now', {
+      duration: 500,
+      horizontalPosition: this.horizontalPosition,
+      verticalPosition: this.verticalPosition,
+    });
+  }
+}