docs(cdk/overlay): add a simple overlay example (#19419)

Add a basic component in order to build out an example for cdk/overlay

Author: andy9775

src/components-examples/BUILD.bazel

@@ -56,6 +56,7 @@ ALL_EXAMPLES = [
     "//src/components-examples/cdk/drag-drop",
     "//src/components-examples/cdk/clipboard",
     "//src/components-examples/cdk/a11y",
+    "//src/components-examples/cdk/overlay",
     "//src/components-examples/cdk-experimental/popover-edit",
 ]
 

src/components-examples/cdk/overlay/BUILD.bazel

@@ -0,0 +1,25 @@
+load("//tools:defaults.bzl", "ng_module")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+    name = "overlay",
+    srcs = glob(["**/*.ts"]),
+    assets = glob([
+        "**/*.html",
+        "**/*.css",
+    ]),
+    module_name = "@angular/components-examples/cdk/overlay",
+    deps = [
+        "//src/cdk/overlay",
+    ],
+)
+
+filegroup(
+    name = "source-files",
+    srcs = glob([
+        "**/*.html",
+        "**/*.css",
+        "**/*.ts",
+    ]),
+)

src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.css

@@ -0,0 +1,19 @@
+.example-list {
+  width: 100px;
+  border: solid 1px #ccc;
+  border-radius: 5px;
+  background: #fff;
+  text-align: center;
+  padding: 10px;
+  margin: 0;
+}
+
+.example-list > li {
+  list-style-type: none;
+  border-bottom: solid 1px #8b8b8b;
+  padding: 8px 0;
+}
+
+.example-list > li:last-child {
+  border-bottom: none;
+}

src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.html

@@ -0,0 +1,17 @@
+<!-- This button triggers the overlay and is it's origin -->
+<button (click)="isOpen = !isOpen" type="button" cdkOverlayOrigin #trigger="cdkOverlayOrigin">
+  {{isOpen ? "Close" : "Open"}}
+</button>
+
+<!-- This template displays the overlay content and is connected to the button -->
+<ng-template
+  cdkConnectedOverlay
+  [cdkConnectedOverlayOrigin]="trigger"
+  [cdkConnectedOverlayOpen]="isOpen"
+>
+  <ul class="example-list">
+    <li>Item 1</li>
+    <li>Item 2</li>
+    <li>Item 3</li>
+  </ul>
+</ng-template>

src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts

@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Overlay basic example
+ */
+@Component({
+  selector: 'cdk-overlay-basic-example',
+  templateUrl: './cdk-overlay-basic-example.html',
+  styleUrls: ['./cdk-overlay-basic-example.css'],
+})
+export class CdkOverlayBasicExample {
+  isOpen = false;
+}

src/components-examples/cdk/overlay/index.ts

@@ -0,0 +1,16 @@
+import {NgModule} from '@angular/core';
+import {OverlayModule} from '@angular/cdk/overlay';
+
+import {CdkOverlayBasicExample} from './cdk-overlay-basic/cdk-overlay-basic-example';
+
+export {CdkOverlayBasicExample};
+
+const EXAMPLES = [CdkOverlayBasicExample];
+
+@NgModule({
+  imports: [OverlayModule],
+  declarations: EXAMPLES,
+  exports: EXAMPLES,
+  entryComponents: EXAMPLES,
+})
+export class CdkOverlayExamplesModule {}

src/dev-app/connected-overlay/BUILD.bazel

@@ -13,6 +13,7 @@ ng_module(
         "//src/cdk/bidi",
         "//src/cdk/overlay",
         "//src/cdk/portal",
+        "//src/components-examples/cdk/overlay",
         "//src/material/button",
         "//src/material/checkbox",
         "//src/material/radio",

src/dev-app/connected-overlay/connected-overlay-demo-module.ts

@@ -14,10 +14,13 @@ import {MatButtonModule} from '@angular/material/button';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatRadioModule} from '@angular/material/radio';
 import {RouterModule} from '@angular/router';
+import {CdkOverlayExamplesModule} from '@angular/components-examples/cdk/overlay';
+
 import {ConnectedOverlayDemo} from './connected-overlay-demo';
 
 @NgModule({
   imports: [
+    CdkOverlayExamplesModule,
     CommonModule,
     FormsModule,
     MatButtonModule,
@@ -28,5 +31,4 @@ import {ConnectedOverlayDemo} from './connected-overlay-demo';
   ],
   declarations: [ConnectedOverlayDemo],
 })
-export class ConnectedOverlayDemoModule {
-}
+export class ConnectedOverlayDemoModule {}

src/dev-app/connected-overlay/connected-overlay-demo.html

@@ -1,5 +1,10 @@
+<h3>Basic overlay</h3>
+<cdk-overlay-basic-example></cdk-overlay-basic-example>
+
 <div style="height: 500px"></div>
 
+<h3>Debug Overlay</h3>
+
 <div class="demo-options-connected-overlay mat-typography">
   <div>
     <h2>Origin X</h2>