Har*_*mer 1 angular-material angular
我尝试npm i @angular/material并将@angular/material包安装到我的 Angular CLI 项目中。
然后我尝试ng add @angular/material并提示我在不同的主题之间进行选择,我期待一些更改,style.scss但没有引入任何更改。
两个命令的输出有什么区别?
npm i @angular/material只安装@angular/material包。
另一方面,ng add @angular/material-
@angular/material软件包@angular/cdk和@angular/animations软件包在您的styles.scss文件中,将添加以下行 -
html,
body {
height: 100%;
}
body {
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
}
Run Code Online (Sandbox Code Playgroud)
在该angular.json文件中,您将找到对所选主题的引用 -
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
Run Code Online (Sandbox Code Playgroud)
如果您允许设置材质排版,则和 指向字体的class="mat-typography"链接将添加到您的文件中 -RobotoMaterial Iconindex.html
<head>
...
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="mat-typography">
<dx-root></dx-root>
</body>
Run Code Online (Sandbox Code Playgroud)
如果您允许设置浏览器动画,那么您会发现BrowserAnimationsModule很容易导入并添加到imports:您的数组中app.module.ts-
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// and
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule
],
Run Code Online (Sandbox Code Playgroud)
这里有详细记录 -安装 Angular Material
| 归档时间: |
|
| 查看次数: |
1039 次 |
| 最近记录: |