|
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