From 02c8ab955e9d5377f157b3c0a195864ed30f08b9 Mon Sep 17 00:00:00 2001 From: Dzhanik Marupov <41643887+ifrntnd@users.noreply.github.com> Date: Fri, 7 Jun 2024 00:58:59 +0500 Subject: [PATCH 1/2] docs(cdk/dialog): add initial setup instructions for CDK dialogs Added instructions for including structural styles required by CDK dialogs. Noted that without importing '@angular/cdk/overlay-prebuilt.css' in the global stylesheet, CDK dialogs did not work correctly. --- src/cdk/dialog/dialog.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/cdk/dialog/dialog.md b/src/cdk/dialog/dialog.md index 2392ea8e8535..44b155f9ef5b 100644 --- a/src/cdk/dialog/dialog.md +++ b/src/cdk/dialog/dialog.md @@ -1,6 +1,16 @@ The `Dialog` service can be used to open unstyled modal dialogs and to build your own dialog services. +### Initial setup +The CDK dialogs depend on a small set of structural styles to work correctly. If you're using +Angular Material, these styles have been included together with the theme, otherwise if you're +using the CDK on its own, you'll have to include the styles yourself. You can do so by importing +the prebuilt styles in your global stylesheet: + +```scss +@import '@angular/cdk/overlay-prebuilt.css'; +``` + You can open a dialog by calling the `open` method either with a component or with a `TemplateRef` From 5a0a5959e844c8661fac72d2daca169121b1a1f9 Mon Sep 17 00:00:00 2001 From: Dzhanik Marupov <41643887+ifrntnd@users.noreply.github.com> Date: Fri, 7 Jun 2024 15:12:29 +0500 Subject: [PATCH 2/2] docs(cdk/dialog): added cdk.overlay mixin import Added alternative method for including CDK styles using the cdk.overlay mixin --- src/cdk/dialog/dialog.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/cdk/dialog/dialog.md b/src/cdk/dialog/dialog.md index 44b155f9ef5b..fb7e1c95e16b 100644 --- a/src/cdk/dialog/dialog.md +++ b/src/cdk/dialog/dialog.md @@ -11,6 +11,14 @@ the prebuilt styles in your global stylesheet: @import '@angular/cdk/overlay-prebuilt.css'; ``` +Alternatively, you can include the styles using the `cdk.overlay` mixin in your Sass file. You can import the mixin as follows: + +```scss +@use '@angular/cdk' as cdk; + +@include cdk.overlay(); +``` + You can open a dialog by calling the `open` method either with a component or with a `TemplateRef`