Angular Material
Material Design, Chinese name: Material Design Language, is a new design language launched by Google, which Google says is designed to provide a more consistent and broader "look and feel" for mobile phones, tablets, desktops and "other platforms".
According to Google, Material Design is based on "real touch, inspired by the study of paper and ink," and is able to allow users to "understand the visual cues used to replace the real world" "without going against the principles of mechanics". In addition, the basic principles of light, surface, and movement are key to representing how objects move, interact and exist in space in relation to each other. Realistic light and shadow effects show the seams between blocks, divide spaces, and mark moving parts. For more detailed introduction, please visit the official website of MaterialThe hyperlink login is visible.。
Angular Material is a set of Angular2+ UI frameworks perfectly implemented by the Angular team based on the Material specification, the official website address:The hyperlink login is visible.
This article uses Angular Material's MatSnackBar component to encapsulate an alert box, let's first look at the renderings:
Step 1: Install
Step 2: Configure the animation
Once the animation package is installed, import the BrowserAnimationsModule into your application to enable animation support.
app.module.ts import as follows:
Step 3: Import the theme
Including themes is necessary to apply all core and theme styles to your application.
To get started with pre-built themes, include one of the pre-built themes of Angular Material globally in your application. If you're using the Angular CLI, you can set it upto styles.scss：
If youNot usedAngular CLI, then<link>can passYour elements contain pre-built thematic index.html.
Step 4: Start encapsulating the alert box
Enter the /app/services directory through the cmd command cd, and you can modify the directory according to your own project and execute the Create Service command:
The ts code is as follows:
Step 5: Configure the prompt box CSS style
in the projectstyles.scssAt the bottom of the file, add the following style, which can be modified according to your actual situation! The code is as follows:
Step 6: Use the alert box
I take the login interface as an example and import it in login.module.tsalert serviceandMatSnackBarModuleComponent modules, as follows:
Used in login.component.ts component, the code is as follows:
MatSnackBar component api documentation:The hyperlink login is visible.
(End)
|
Posted on 11/22/2018 3:00:49 PM
|
|
|
|
