This article mainly introduces the use of Material (including Material Icon) in Angular2. Friends who need it can refer to it
1.Introducing the material npm package
1 |
|
2. Create a new ebiz-material.module.ts to facilitate the management of modules that introduce material
1 |
|
3.Introduce ebiz-material.module into the root module of the app. ts
1 2 3 4 5 6 7 8 |
|
Using material component
1. First introduce the module of material component in ebiz-material.module.ts, For example, if we want to use checkbox
(https://material.angular.io/components/checkbox/overview), then introduce MatCheckboxModule and then export it.
1 2 3 4 5 6 7 8 9 |
|
2. Use components in html files
1 |
|
Use material-icon
1.Introduce material-icon
1 |
|
If the download fails (I failed to install, I don’t care about it, as long as it works), you can download it from github, then take out the iconfont folder and put it in your own project directory, and use it when you need to use the icon. Introduced in css (scss), generally we will use it globally in style.scss.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
|
2. Place the icon in the appropriate position of the html
1 |
|
Use material’s built-in theme and custom theme
1. The components in material will be different according to the theme. There will be different styles presented, but these style differences are only limited to the inside of the material component and will not affect the style of the custom component.
2.Change the styles.css file name to styles.scss, and modify it in the angular-cli.json file to
1 2 3 |
|
3.Introduce the material pre-built theme into the style.scss file (4 in total)
1 2 3 4 |
|
4. If you feel that these themes are not suitable, you can customize the theme, create a new theme.scss in the same directory as styles.scss, and write the content of the custom theme (https ://material.angular.io/guide/theming)
1 2 3 4 5 6 7 |
|
5. Some colors are used in step 3, such as $mat-blue, you can refer to here
6. If you want To theme a certain component, you can refer here
7.Introduce a custom theme into styles.scss
@import './theme';
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
How to implement a circular progress bar in the WeChat applet
Implement dynamic introduction of files in webpack
The above is the detailed content of About the use of Material in Angular2 (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!