Skip to content

Commit 35f07c5

Browse files
authored
docs(cdk/dialog): add initial setup instructions for CDK dialogs (#29209)
* 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. * docs(cdk/dialog): added cdk.overlay mixin import Added alternative method for including CDK styles using the cdk.overlay mixin
1 parent 58a30cf commit 35f07c5

File tree

1 file changed

+18
-0
lines changed

1 file changed

+18
-0
lines changed

src/cdk/dialog/dialog.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,24 @@
11
The `Dialog` service can be used to open unstyled modal dialogs and to build your own dialog
22
services.
33

4+
### Initial setup
5+
The CDK dialogs depend on a small set of structural styles to work correctly. If you're using
6+
Angular Material, these styles have been included together with the theme, otherwise if you're
7+
using the CDK on its own, you'll have to include the styles yourself. You can do so by importing
8+
the prebuilt styles in your global stylesheet:
9+
10+
```scss
11+
@import '@angular/cdk/overlay-prebuilt.css';
12+
```
13+
14+
Alternatively, you can include the styles using the `cdk.overlay` mixin in your Sass file. You can import the mixin as follows:
15+
16+
```scss
17+
@use '@angular/cdk' as cdk;
18+
19+
@include cdk.overlay();
20+
```
21+
422
<!-- example(cdk-dialog-overview) -->
523

624
You can open a dialog by calling the `open` method either with a component or with a `TemplateRef`

0 commit comments

Comments
 (0)