本文档介绍了如何安装和使用Angular Material框架，包括创建新项目、安装依赖库、引入模块以及在组件中使用Material组件。同时，展示了基于Material框架的登录界面示例，并提供了多级下拉菜单和彩色按钮的实现代码。目前对Material的样式模块掌握不足，需要进一步学习以灵活定制样式。下周计划将继续深入研究框架应用，尝试将教程实例融入个人项目。
学习使用angular material
angular material框架的安装
1.首先创建新项目
2.在创建好的项目里输入以下代码
(1)npm install --save @angular/cdk@8.1.2 @angular/material@8.1.2 @angular/animations@8.2.8 hammerjs
(2)npm install --save @angular/flex-layout@8.0.0-beta.26
(3)ng add @angular/material
3.在app.module.ts中引入对应的material模块
4.新创建组件使用material
5.可以参照官方文档里的例子
下载基于material框架登陆界面示例，尝试学习修改
html
<!doctype html>
<html lang="en" class="login-content" data-ng-app="materialAdmin">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Material Admin</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<!-- Vendor CSS -->
<link href="css/material-design-iconic-font/css/material-design-iconic-font.min.css" rel="stylesheet" type="text/css">
<!-- CSS -->
<link href="css/app.min.1.css" rel="stylesheet" type="text/css">
</head>
<body class="login-content" data-ng-controller="loginCtrl as lctrl">
<div class="lc-block" id="l-login" data-ng-class="{'toggled':lctrl.login === 1}">
<h1 class="lean">工程监测云平台</h1>
<div class="input-group m-b-20">
<span class="input-group-addon">
<i class="zmdi zmdi-account"></i>
</span>
<div class="fg-line">
<input type="text" class="form-control" placeholder="Username" regex="^\w{3,16}$"/>
</div>
</div>
<div class="input-group m-b-20">
<span class="input-group-addon">
<i class="zmdi zmdi-male"></i>
</span>
<div class="fg-line">
<input type="password" class="form-control" placeholder="Password" regex="^\w+"/>
</div>
</div>
<div class="clearfix"></div>
<div class="checkbox">
<label>
<input type="checkbox" value="" />
<i class="input-helper">
Keep me signed in
</i>
</label>
</div>
<a href="" class="btn btn-login btn-danger btn-float">
<i class="zmdi zmdi-arrow-forward"></i>
</a>
<ul class="login-navigation">
<li class="bgm-red" data-ng-click="lctrl.login = 0; lctrl.register = 1">Register</li>
<li data-block="#l-forget-password" class="bgm-orange" data-ng-click="lctrl.login = 0; lctrl.forgot = 1">Forgot Password?</li>
</ul>
</div>
<div class="lc-block" id="l-register" data-ng-class="{ 'toggled': lctrl.register === 1 }" data-ng-if="lctrl.register === 1">
<h1 class="lean">Azrael</h1>
<div class="input-group m-b-20">
<span class="input-group-addon">
<i class="zmdi zmdi-account"></i>
</span>
<div class="fg-line">
<input type="text" class="form-control" placeholder="Username" regex="^\w{3,16}$"/>
</div>
</div>
<div class="input-group m-b-20">
<span class="input-group-addon">
<i class="zmdi zmdi-email"></i>
</span>
<div class="fg-line">
<input type="text" class="form-control" placeholder="Email Address" regex="^\w+@\w+\.[a-zA-Z]+(\.[a-zA-Z]+)?$"/>
</div>
</div>
<div class="input-group m-b-20">
<span class="input-group-addon">
<i class="zmdi zmdi-male"></i>
</span>
<div class="fg-line">
<input type="password" class="form-control" placeholder="Password" regex="^\w+"/>
</div>
</div>
<div class="clearfix"></div>
<div class="checkbox">
<label>
<input type="checkbox" value=""/>
<i class="input-helper"></i>
Accept the license agreement
</label>
</div>
<a href="" class="btn btn-login btn-danger btn-float"><i class="zmdi zmdi-arrow-forward"></i></a>
<ul class="login-navigation">
<li data-block="#l-login" class="bgm-green" data-ng-click="lctrl.register = 0; lctrl.login = 1">Login</li>
<li data-block="#l-forget-password" class="bgm-orange" data-ng-click="lctrl.register = 0; lctrl.forgot = 1">Forgot Password?</li>
</ul>
</div>
<div class="lc-block" id="l-forget-password" data-ng-class="{ 'toggled': lctrl.forgot === 1 }" data-ng-if="lctrl.forgot === 1">
<h1 class="lean">Azrael</h1>
<p class="text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu risus. Curabitur commodo lorem fringilla enim feugiat commodo sed ac lacus.</p>
<div class="input-group m-b-20">
<span class="input-group-addon"><i class="zmdi zmdi-email"></i></span>
<div class="fg-line">
<input type="text" class="form-control" placeholder="Email Address" regex="^\w+@\w+\.[a-zA-Z]+(\.[a-zA-Z]+)?$"/>
</div>
</div>
<a href="" class="btn btn-login btn-danger btn-float"><i class="zmdi zmdi-arrow-forward"></i></a>
<ul class="login-navigation">
<li data-block="#l-login" class="bgm-green" data-ng-click="lctrl.forgot = 0; lctrl.login = 1">Login</li>
<li data-block="#l-register" class="bgm-red" data-ng-click="lctrl.forgot = 0; lctrl.register = 1">Register</li>
</ul>
</div>
</body>
<script src="js/bower_components/jquery/dist/jquery.min.js"></script>
<script src="js/log.js"></script>
<!-- Angular -->
<script src="js/bower_components/angular/angular.min.js"></script>
<script src="js/bower_components/angular-resource/angular-resource.min.js"></script>
<script src="js/bower_components/angular-animate/angular-animate.min.js"></script>
<!-- Angular Modules -->
<script src="js/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="js/bower_components/angular-loading-bar/src/loading-bar.js"></script>
<script src="js/bower_components/oclazyload/dist/ocLazyLoad.min.js"></script>
<script src="js/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<!-- Common js -->
<script src="js/bower_components/angular-nouislider/src/nouislider.min.js"></script>
<script src="js/bower_components/ng-table/dist/ng-table.min.js"></script>
<!-- Placeholder for IE9 -->
<!--[if IE 9 ]>
<script src="js/bower_components/jquery-placeholder/jquery.placeholder.min.js"></script>
<![endif]-->
<!-- App level -->
<script src="js/app.js"></script>
<script src="js/controllers/main.js"></script>
<script src="js/controllers/ui-bootstrap.js"></script>
<!-- Template Modules -->
<script src="js/modules/form.js"></script>
</html>
问题：对material的样式模块还是不熟悉，无法随心所欲的修改成自己喜欢的模样，还需继续学习。
跟随官网教程尝试一些样式的制作
1.多级下拉菜单的制作
nestedMenuItems = [
{ type: mui.MenuItem.Types.NESTED, text: 'Reports', items: [
{ payload: '1', text: 'Nested Item 1' },
{ type: mui.MenuItem.Types.NESTED, text: 'Nested Item 2', items: [
{ payload: '1', text: 'Nested Item 2.1' },
{ type: mui.MenuItem.Types.NESTED, text: 'Nested Item 2.2', items: [
{ payload: '1', text: 'Nested Item 2.2.1' },
{ payload: '3', text: 'Nested Item 2.2.2' }
] },
{ payload: '3', text: 'Nested Item 2.3' }
] },
{ payload: '3', text: 'Nested Item 3' },
{ type: mui.MenuItem.Types.NESTED, text: 'Nested Item 4', items: [
{ payload: '1', text: 'Nested Item 4.1' },
{ type: mui.MenuItem.Types.NESTED, text: 'Nested Item 4.2', items: [
{ payload: '1', text: 'Nested Item 4.2.1', disabled: true },
{ payload: '3', text: 'Nested Item 4.2.2' }
] },
{ payload: '3', text: 'Nested Item 4.3' }
] },
{ payload: '4', text: 'Nested Item 5' }
] },
{ payload: '1', text: 'Audio Library'},
{ payload: '2', text: 'Settings'},
{ payload: '3', text: 'Logout', disabled: true}
];
<Menu menuItems={nestedMenuItems} autoWidth={false}/>
2.简单的彩色按钮制作
//Raised Buttons
<RaisedButton label="Default" />
<RaisedButton label="Primary" primary={true} />
<RaisedButton label="Secondary" secondary={true} />
<div style={styles.container}>
<RaisedButton primary={true} label="Choose an Image">
<input type="file" style={styles.exampleImageInput}></input>
</RaisedButton>
</div>
<div style={styles.container}>
<RaisedButton linkButton={true} href="https://github.com/callemall/material-ui" secondary={true} label="Github">
<FontIcon style={styles.exampleButtonIcon} className="muidocs-icon-custom-github"/>
</RaisedButton>
</div>
<RaisedButton label="Disabled" disabled={true} />
问题：不是很擅长把这些东西巧妙的运用到自己的项目中，还要多做尝试
下周计划
继续学习一些框架的运用，争取能巧妙的通过各种教程模板向自己的项目靠拢。
1279
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
