品安 發表於 2019-9-24 09:22:00

Angular Material的安装和使用

<h2>一、安装</h2>
<p>&nbsp; 1.前期准备：npm(安装node即可)，angular cli脚手架</p>
<p>&nbsp; 2.自建项目</p>
<blockquote>
<p><strong>ng new my-app</strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//my-app项目名字</p>
<p><strong>ng g c project&nbsp;</strong> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //组件名project</p>
</blockquote>
<p>&nbsp; 3.安装angular material和angular cdk</p>
<blockquote>
<p>//npm方法</p>
<p><strong>npm install --save @angular/material @angular/cdk</strong></p>
<p>//yarn方法</p>
<p><strong>yarn add @angular/material @angular/cdk</strong></p>
</blockquote>
<p>&nbsp; 4.常用项animations（非必备）</p>
<blockquote>
<p>//npm方法</p>
<p><strong>npm install --save @angular/animations</strong></p>
<p>//yarn方法</p>
<p><strong>yarn add @angular/animations</strong></p>
</blockquote>
<p>&nbsp; &nbsp; &nbsp;&nbsp;<img src="https://img2018.cnblogs.com/blog/1523596/201909/1523596-20190924084808632-272383938.png" alt="" width="594" height="216"></p>
<p>&nbsp; 5.引入组件模块</p>
<p>&nbsp; &nbsp; &nbsp;&nbsp;<img src="https://img2018.cnblogs.com/blog/1523596/201909/1523596-20190924085517184-532402341.png" alt="" width="710" height="262"></p>
<p>&nbsp; 6.引入主题</p>
<blockquote>
<p>//根目录的styles.css</p>
<p><strong>@import '~@angular/material/prebuilt-themes/indigo-pink.css';</strong></p>
<p>//或者直接在index.html里使用&lt;link&gt;标签</p>
<p><strong>&lt;link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet"&gt;</strong></p>
</blockquote>
<p>&nbsp; 7.手势支持</p>
<p>&nbsp; &nbsp; &nbsp; 有的标签（mat-slide-toggle,mat-slider,mattooltip等）需要<strong>hammerJS</strong>来支持，为了获取这些组件的所有特性，通过npm引入到项目中。</p>
<blockquote>
<p>//npm</p>
<p><strong>npm install --save hammerjs</strong></p>
<p>//yarn</p>
<p><strong>yarn add hammerjs</strong></p>
</blockquote>
<p>&nbsp; &nbsp; &nbsp; 然后在入口文件（main.js）中引入</p>
<blockquote>
<p><strong>import 'hammerjs';</strong></p>
</blockquote>
<p>&nbsp; 8.添加material的icon（可选）</p>
<p>&nbsp; &nbsp; &nbsp; 如果想要你的mat-icon标签获取官方的Material Design Icons，在index.html文件中加入下面的link。</p>
<blockquote>
<p><strong>&lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;</strong></p>
</blockquote>
<h2>二、使用</h2>
<p>&nbsp; 该安装的都已经安装好了，可以放心大胆地使用了，详见官网哦。</p>
<p>&nbsp; 参考文档：angular5+ 之如何用material的UI库组件构建你的web页面。</p><br><br>
来源：https://www.cnblogs.com/crackedlove/p/11576451.html
頁: [1]
查看完整版本: Angular Material的安装和使用