docs: add example for cdk platform (#13821)

Since the overview for `cdk/platform` is pretty bare on the docs site at the moment, these changes add an example that illustrates how the utilities can be used.

Author: crisbeto

src/cdk/platform/platform.md

@@ -1,3 +1,6 @@
 ### Platform
 
-A service for determing the current platform.
+A set of utilities that gather information about the current
+platform and the different features it supports.
+
+<!-- example(cdk-platform-overview) -->

src/material-examples/cdk-platform-overview/cdk-platform-overview-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

src/material-examples/cdk-platform-overview/cdk-platform-overview-example.html

@@ -0,0 +1,11 @@
+<h3>Platform information:</h3>
+<p>Is Android: {{platform.ANDROID}}</p>
+<p>Is iOS: {{platform.IOS}}</p>
+<p>Is Firefox: {{platform.FIREFOX}}</p>
+<p>Is Blink: {{platform.BLINK}}</p>
+<p>Is Webkit: {{platform.WEBKIT}}</p>
+<p>Is Trident: {{platform.TRIDENT}}</p>
+<p>Is Edge: {{platform.EDGE}}</p>
+<p>Supported input types: {{supportedInputTypes}}</p>
+<p>Supports passive event listeners: {{supportsPassiveEventListeners}}</p>
+<p>Supports scroll behavior: {{supportsScrollBehavior}}</p>

src/material-examples/cdk-platform-overview/cdk-platform-overview-example.ts

@@ -0,0 +1,23 @@
+import {Component} from '@angular/core';
+import {
+  getSupportedInputTypes,
+  Platform,
+  supportsPassiveEventListeners,
+  supportsScrollBehavior,
+} from '@angular/cdk/platform';
+
+/**
+ * @title Platform overview
+ */
+@Component({
+  selector: 'cdk-platform-overview-example',
+  templateUrl: 'cdk-platform-overview-example.html',
+  styleUrls: ['cdk-platform-overview-example.css'],
+})
+export class CdkPlatformOverviewExample {
+  supportedInputTypes = Array.from(getSupportedInputTypes()).join(', ');
+  supportsPassiveEventListeners = supportsPassiveEventListeners();
+  supportsScrollBehavior = supportsScrollBehavior();
+
+  constructor(public platform: Platform) {}
+}