Skip to content

Commit 651ac58

Browse files
committed
docs: add README files for experimental packages
1 parent f21d1ae commit 651ac58

File tree

2 files changed

+69
-0
lines changed

2 files changed

+69
-0
lines changed

src/cdk-experimental/README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Angular CDK Experimental
2+
3+
This package contains prototypes and experiments in development for Angular CDK. Nothing in
4+
this package is considered stable or production ready. While the package released with Angular
5+
CDK, breaking changes may occur with any release.

src/material-experimental/README.md

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
# Angular Material Experimental
2+
3+
This package contains prototypes and experiments in development for Angular Material. Nothing in
4+
this package is considered stable or production ready. While the package released with Angular
5+
Material, breaking changes may occur with any release.
6+
7+
## Using the experimental components based on MDC Web
8+
Assuming your application is already up and running using Angular Material, you can add this
9+
component by following these steps:
10+
11+
1. Install Angular Material Experimental & MDC WEB:
12+
13+
```bash
14+
npm i material-components-web @angular/material-experimental
15+
```
16+
17+
2. In your `angular.json`, make sure `node_modules/` is listed as a Sass include path. This is
18+
needed for the Sass compiler to be able to find the MDC Web Sass files.
19+
20+
```json
21+
...
22+
"styles": [
23+
"src/styles.scss"
24+
],
25+
"stylePreprocessorOptions": {
26+
"includePaths": [
27+
"node_modules/"
28+
]
29+
},
30+
...
31+
```
32+
33+
3. Import the `NgModule` for the component you want to use. For example, the checkbox:
34+
```ts
35+
import {MatCheckboxModule} from '@angular/material-experimental/mdc-checkbox';
36+
37+
@NgModule({
38+
declarations: [MyComponent],
39+
imports: [MatCheckboxModule],
40+
})
41+
export class MyModule {}
42+
```
43+
44+
4. Add use the components just as you would the normal Angular Material components. For example,
45+
the checkbox:
46+
```html
47+
<mat-checkbox [checked]="isChecked">Check me</mat-checkbox>
48+
```
49+
50+
5. Add the theme and typography mixins to your Sass. These align with the normal Angular Material
51+
mixins except that they are suffixed with `-mdc`. There is currently no pre-built CSS option for
52+
the experimental components. For example, using the checkbox:
53+
54+
```scss
55+
@import '~@angular/material/theming';
56+
@import '~@angular/material-experimental/mdc-checkbox';
57+
58+
$my-primary: mat-palette($mat-indigo);
59+
$my-accent: mat-palette($mat-pink, A200, A100, A400);
60+
$my-theme: mat-light-theme($my-primary, $my-accent);
61+
62+
@include mat-checkbox-theme-mdc($my-theme);
63+
@include mat-checkbox-typography-mdc();
64+
```

0 commit comments

Comments
 (0)