From 249201b3565466fdd0f13e352eeb5b79c570df80 Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Fri, 28 May 2021 01:08:28 -0400 Subject: [PATCH] docs(cdk/layout): add BreakpointObserver example (#22828) Also adds a layout page to the dev-app since it didn't have one --- .github/CODEOWNERS | 1 + src/cdk/layout/layout.md | 2 + src/components-examples/BUILD.bazel | 1 + .../cdk/layout/BUILD.bazel | 25 +++++++++++ .../breakpoint-observer-overview-example.css | 1 + .../breakpoint-observer-overview-example.html | 6 +++ .../breakpoint-observer-overview-example.ts | 45 +++++++++++++++++++ src/components-examples/cdk/layout/index.ts | 23 ++++++++++ src/dev-app/BUILD.bazel | 1 + src/dev-app/dev-app/dev-app-layout.ts | 1 + src/dev-app/dev-app/routes.ts | 1 + src/dev-app/layout/BUILD.bazel | 22 +++++++++ src/dev-app/layout/layout-demo-module.ts | 23 ++++++++++ src/dev-app/layout/layout-demo.html | 2 + src/dev-app/layout/layout-demo.scss | 0 src/dev-app/layout/layout-demo.ts | 17 +++++++ 16 files changed, 171 insertions(+) create mode 100644 src/components-examples/cdk/layout/BUILD.bazel create mode 100644 src/components-examples/cdk/layout/breakpoint-observer-overview/breakpoint-observer-overview-example.css create mode 100644 src/components-examples/cdk/layout/breakpoint-observer-overview/breakpoint-observer-overview-example.html create mode 100644 src/components-examples/cdk/layout/breakpoint-observer-overview/breakpoint-observer-overview-example.ts create mode 100644 src/components-examples/cdk/layout/index.ts create mode 100644 src/dev-app/layout/BUILD.bazel create mode 100644 src/dev-app/layout/layout-demo-module.ts create mode 100644 src/dev-app/layout/layout-demo.html create mode 100644 src/dev-app/layout/layout-demo.scss create mode 100644 src/dev-app/layout/layout-demo.ts diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 3ab054d73603..de68db312731 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -175,6 +175,7 @@ /src/dev-app/grid-list/** @jelbourn /src/dev-app/icon/** @jelbourn /src/dev-app/input/** @mmalerba +/src/dev-app/layout/** @jelbourn /src/dev-app/list/** @jelbourn @crisbeto @devversion /src/dev-app/live-announcer/** @jelbourn /src/dev-app/mdc-button/** @andrewseguin diff --git a/src/cdk/layout/layout.md b/src/cdk/layout/layout.md index 31ee08a5a841..888476bfc40a 100644 --- a/src/cdk/layout/layout.md +++ b/src/cdk/layout/layout.md @@ -8,6 +8,8 @@ size ranges between breakpoints correspond to different standard screen sizes. `BreakpointObserver` lets you evaluate media queries to determine the current screen size and react to changes when the viewport size crosses a breakpoint. + + #### Check the current viewport size You can use the `isMatched` method to evaluate one or more media queries against the current viewport size. diff --git a/src/components-examples/BUILD.bazel b/src/components-examples/BUILD.bazel index 9ad3bb8ad421..77fc9f8530ee 100644 --- a/src/components-examples/BUILD.bazel +++ b/src/components-examples/BUILD.bazel @@ -58,6 +58,7 @@ ALL_EXAMPLES = [ "//src/components-examples/cdk/drag-drop", "//src/components-examples/cdk/clipboard", "//src/components-examples/cdk/a11y", + "//src/components-examples/cdk/layout", "//src/components-examples/cdk/overlay", "//src/components-examples/cdk-experimental/menu", "//src/components-examples/cdk-experimental/popover-edit", diff --git a/src/components-examples/cdk/layout/BUILD.bazel b/src/components-examples/cdk/layout/BUILD.bazel new file mode 100644 index 000000000000..c17f5915275f --- /dev/null +++ b/src/components-examples/cdk/layout/BUILD.bazel @@ -0,0 +1,25 @@ +load("//tools:defaults.bzl", "ng_module") + +package(default_visibility = ["//visibility:public"]) + +ng_module( + name = "layout", + srcs = glob(["**/*.ts"]), + assets = glob([ + "**/*.html", + "**/*.css", + ]), + module_name = "@angular/components-examples/cdk/layout", + deps = [ + "//src/cdk/layout", + ], +) + +filegroup( + name = "source-files", + srcs = glob([ + "**/*.html", + "**/*.css", + "**/*.ts", + ]), +) diff --git a/src/components-examples/cdk/layout/breakpoint-observer-overview/breakpoint-observer-overview-example.css b/src/components-examples/cdk/layout/breakpoint-observer-overview/breakpoint-observer-overview-example.css new file mode 100644 index 000000000000..7432308753e6 --- /dev/null +++ b/src/components-examples/cdk/layout/breakpoint-observer-overview/breakpoint-observer-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/components-examples/cdk/layout/breakpoint-observer-overview/breakpoint-observer-overview-example.html b/src/components-examples/cdk/layout/breakpoint-observer-overview/breakpoint-observer-overview-example.html new file mode 100644 index 000000000000..ec84b3cc4391 --- /dev/null +++ b/src/components-examples/cdk/layout/breakpoint-observer-overview/breakpoint-observer-overview-example.html @@ -0,0 +1,6 @@ +

+ Resize your browser window to see the current screen size change. +

+

+ The current screen size is {{currentScreenSize}} +

diff --git a/src/components-examples/cdk/layout/breakpoint-observer-overview/breakpoint-observer-overview-example.ts b/src/components-examples/cdk/layout/breakpoint-observer-overview/breakpoint-observer-overview-example.ts new file mode 100644 index 000000000000..777326dcaf77 --- /dev/null +++ b/src/components-examples/cdk/layout/breakpoint-observer-overview/breakpoint-observer-overview-example.ts @@ -0,0 +1,45 @@ +import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout'; +import {Component, OnDestroy} from '@angular/core'; +import {Subject} from 'rxjs'; +import {takeUntil} from 'rxjs/operators'; + +/** @title Respond to viewport changes with BreakpointObserver */ +@Component({ + selector: 'breakpoint-observer-overview-example', + templateUrl: 'breakpoint-observer-overview-example.html', + styleUrls: ['breakpoint-observer-overview-example.css'] +}) +export class BreakpointObserverOverviewExample implements OnDestroy { + destroyed = new Subject(); + currentScreenSize: string; + + // Create a map to display breakpoint names for demonstration purposes. + displayNameMap = new Map([ + [Breakpoints.XSmall, 'XSmall'], + [Breakpoints.Small, 'Small'], + [Breakpoints.Medium, 'Medium'], + [Breakpoints.Large, 'Large'], + [Breakpoints.XLarge, 'XLarge'], + ]); + + constructor(breakpointObserver: BreakpointObserver) { + breakpointObserver.observe([ + Breakpoints.XSmall, + Breakpoints.Small, + Breakpoints.Medium, + Breakpoints.Large, + Breakpoints.XLarge, + ]).pipe(takeUntil(this.destroyed)).subscribe(result => { + for (const query of Object.keys(result.breakpoints)) { + if (result.breakpoints[query]) { + this.currentScreenSize = this.displayNameMap.get(query) ?? 'Unknown'; + } + } + }); + } + + ngOnDestroy() { + this.destroyed.next(); + this.destroyed.complete(); + } +} diff --git a/src/components-examples/cdk/layout/index.ts b/src/components-examples/cdk/layout/index.ts new file mode 100644 index 000000000000..f6d7121ab22c --- /dev/null +++ b/src/components-examples/cdk/layout/index.ts @@ -0,0 +1,23 @@ +import {LayoutModule} from '@angular/cdk/layout'; +import {NgModule} from '@angular/core'; +import { + BreakpointObserverOverviewExample, +} from './breakpoint-observer-overview/breakpoint-observer-overview-example'; + +export {BreakpointObserverOverviewExample}; + +const EXAMPLES = [ + BreakpointObserverOverviewExample, +]; + +@NgModule({ + imports: [ + LayoutModule, + ], + declarations: EXAMPLES, + exports: EXAMPLES, + entryComponents: EXAMPLES, +}) +export class CdkLayoutExamplesModule { +} + diff --git a/src/dev-app/BUILD.bazel b/src/dev-app/BUILD.bazel index 15aad8ac2c6c..705c56244a76 100644 --- a/src/dev-app/BUILD.bazel +++ b/src/dev-app/BUILD.bazel @@ -45,6 +45,7 @@ ng_module( "//src/dev-app/grid-list", "//src/dev-app/icon", "//src/dev-app/input", + "//src/dev-app/layout", "//src/dev-app/list", "//src/dev-app/live-announcer", "//src/dev-app/mdc-autocomplete", diff --git a/src/dev-app/dev-app/dev-app-layout.ts b/src/dev-app/dev-app/dev-app-layout.ts index 937b524e2669..1df1239e7bc3 100644 --- a/src/dev-app/dev-app/dev-app-layout.ts +++ b/src/dev-app/dev-app/dev-app-layout.ts @@ -56,6 +56,7 @@ export class DevAppLayout { {name: 'Icon', route: '/icon'}, {name: 'Input', route: '/input'}, {name: 'List', route: '/list'}, + {name: 'Layout', route: '/layout'}, {name: 'Live Announcer', route: '/live-announcer'}, {name: 'Menu', route: '/menu'}, {name: 'Menubar', route: '/menubar'}, diff --git a/src/dev-app/dev-app/routes.ts b/src/dev-app/dev-app/routes.ts index fb5765ed72b0..d49836ad4bb1 100644 --- a/src/dev-app/dev-app/routes.ts +++ b/src/dev-app/dev-app/routes.ts @@ -61,6 +61,7 @@ export const DEV_APP_ROUTES: Routes = [ {path: 'grid-list', loadChildren: 'grid-list/grid-list-demo-module#GridListDemoModule'}, {path: 'icon', loadChildren: 'icon/icon-demo-module#IconDemoModule'}, {path: 'input', loadChildren: 'input/input-demo-module#InputDemoModule'}, + {path: 'layout', loadChildren: 'layout/layout-demo-module#LayoutDemoModule'}, {path: 'list', loadChildren: 'list/list-demo-module#ListDemoModule'}, { path: 'live-announcer', diff --git a/src/dev-app/layout/BUILD.bazel b/src/dev-app/layout/BUILD.bazel new file mode 100644 index 000000000000..13ccdb19326b --- /dev/null +++ b/src/dev-app/layout/BUILD.bazel @@ -0,0 +1,22 @@ +load("//tools:defaults.bzl", "ng_module", "sass_binary") + +package(default_visibility = ["//visibility:public"]) + +ng_module( + name = "layout", + srcs = glob(["**/*.ts"]), + assets = [ + "layout-demo.html", + ":layout_demo_scss", + ], + deps = [ + "//src/cdk/layout", + "//src/components-examples/cdk/layout", + "@npm//@angular/router", + ], +) + +sass_binary( + name = "layout_demo_scss", + src = "layout-demo.scss", +) diff --git a/src/dev-app/layout/layout-demo-module.ts b/src/dev-app/layout/layout-demo-module.ts new file mode 100644 index 000000000000..e9cc30f60315 --- /dev/null +++ b/src/dev-app/layout/layout-demo-module.ts @@ -0,0 +1,23 @@ +/** + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; +import {RouterModule} from '@angular/router'; +import {LayoutDemo} from './layout-demo'; +import {CdkLayoutExamplesModule} from '@angular/components-examples/cdk/layout'; + +@NgModule({ + imports: [ + CommonModule, + CdkLayoutExamplesModule, + RouterModule.forChild([{path: '', component: LayoutDemo}]), + ], + declarations: [LayoutDemo], +}) +export class LayoutDemoModule { } diff --git a/src/dev-app/layout/layout-demo.html b/src/dev-app/layout/layout-demo.html new file mode 100644 index 000000000000..705ee66e45bf --- /dev/null +++ b/src/dev-app/layout/layout-demo.html @@ -0,0 +1,2 @@ +

Respond to viewport changes with BreakpointObserver

+ diff --git a/src/dev-app/layout/layout-demo.scss b/src/dev-app/layout/layout-demo.scss new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/src/dev-app/layout/layout-demo.ts b/src/dev-app/layout/layout-demo.ts new file mode 100644 index 000000000000..b6e79bbf00ab --- /dev/null +++ b/src/dev-app/layout/layout-demo.ts @@ -0,0 +1,17 @@ +/** + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +import {Component} from '@angular/core'; + + +@Component({ + selector: 'layout-demo', + templateUrl: 'layout-demo.html', + styleUrls: ['layout-demo.css'], +}) +export class LayoutDemo { }