|
1 |
| -This version of `<mat-progress-bar>` is built on top of |
2 |
| -[MDC Web](https://github.com/material-components/material-components-web). |
3 |
| - |
4 |
| -## How to use |
5 |
| -Assuming your application is already up and running using Angular Material, you can add this |
6 |
| -component by following these steps: |
7 |
| - |
8 |
| -1. Install Angular Material & MDC WEB: |
9 |
| - |
10 |
| - ```bash |
11 |
| - npm i material-components-web @angular/material |
12 |
| - ``` |
13 |
| - |
14 |
| -2. In your `angular.json`, make sure `node_modules/` is listed as a Sass include path. This is |
15 |
| - needed for the Sass compiler to be able to find the MDC Web Sass files. |
16 |
| - |
17 |
| - ```json |
18 |
| - ... |
19 |
| - "styles": [ |
20 |
| - "src/styles.scss" |
21 |
| - ], |
22 |
| - "stylePreprocessorOptions": { |
23 |
| - "includePaths": [ |
24 |
| - "node_modules/" |
25 |
| - ] |
26 |
| - }, |
27 |
| - ... |
28 |
| - ``` |
29 |
| - |
30 |
| -3. Import the `MatProgressBarModule` and add it to the module that declares your component: |
31 |
| - |
32 |
| - ```ts |
33 |
| - import {MatProgressBarModule} from '@angular/material/progress-bar'; |
34 |
| - |
35 |
| - @NgModule({ |
36 |
| - declarations: [MyComponent], |
37 |
| - imports: [MatProgressBarModule], |
38 |
| - }) |
39 |
| - export class MyModule {} |
40 |
| - ``` |
41 |
| - |
42 |
| -4. Add use `<mat-progress-bar>` in your component's template, just like you would the normal |
43 |
| - `<mat-progress-bar>`: |
44 |
| - |
45 |
| - ```html |
46 |
| - <mat-progress-bar [value]="42"></mat-progress-bar> |
47 |
| - ``` |
48 |
| - |
49 |
| -5. Add the theme and typography mixins to your Sass: |
50 |
| - |
51 |
| - ```scss |
52 |
| - @use '@angular/material' as mat; |
53 |
| - |
54 |
| - $my-primary: mat.define-palette(mat.$indigo-palette); |
55 |
| - $my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400); |
56 |
| - $my-theme: mat.define-light-theme(( |
57 |
| - color: ( |
58 |
| - primary: $my-primary, |
59 |
| - accent: $my-accent |
60 |
| - ) |
61 |
| - )); |
62 |
| - |
63 |
| - @include mat.progress-bar-theme($my-theme); |
64 |
| - @include mat.progress-bar-typography($my-theme); |
65 |
| - ``` |
| 1 | +Please see the official documentation at https://material.angular.io/components/component/progress-bar |
0 commit comments