Angular Material的使用详解

2024-01-17 15:06 小编

　　使用方法　　用npm下载angular-material、angular-aria、angular-animate 　　

代码如下：　　　　　　　　　　<!DOCTYPEhtml><htmllang="en"><head> 　　<metacharset="UTF-8"> 　　<title>Document</title> 　　<linkrel="stylesheet"href="node_modules/angular-material/angular-material.css"></head><bodyng-app="myApp"ng-controller="myCtrl"layout="column"> 　　<md-toolbar> 　　<h3>AngularMaterial演示代码</h3> 　　</md-toolbar> 　　<divclass="container"layout="row"flex> 　　<md-sidenavmd-is-locked-open="true"class="md-whiteframe-z2"> 　　<md-list> 　　<md-list-itemng-repeat="iteminarr"> 　　<md-buttonng-click="toggle($index)"> 　　{{item.title}}</md-button> 　　</md-list-item> 　　</md-list> 　　</md-sidenav> 　　<md-contentflexid="content"class="lightgreen"flex> 　　<h2>{{rightTitle}}</h2> 　　<p> 　　{{rightCont}}</p> 　　<md-checkboxng-model="isChecked"aria-label="Finished?"> 　　Finished?</md-checkbox> 　　<md-checkboxmd-no-inkng-model="hasInk"aria-label="NoInkEffects"> 　　NoInkEffects</md-checkbox> 　　<md-checkboxng-disabled="true"ng-model="isDisabled"aria-label="Disabled"> 　　Disabled</md-checkbox> 　　<formname="colorForm"> 　　<md-input-container> 　　<label>FavoriteColor</label> 　　<inputname="favoriteColor"ng-model="favoriteColor"required> 　　<divng-messages="colorForm.favoriteColor.$error"> 　　<divng-message="required">Thisisrequired!</div> 　　</div> 　　</md-input-container></form><md-progress-circularmd-mode="determinate"value="80"></md-progress-circular><md-progress-circularmd-mode="determinate"ng-value="60"></md-progress-circular><md-progress-circularmd-mode="determinate"value="50"md-diameter="100"></md-progress-circular><md-progress-circularmd-mode="indeterminate"></md-progress-circular><md-buttonclass="md-fabmd-accent"aria-label="Play"> 　　<md-tooltip> 　　PlayMusic</md-tooltip></md-button><divmd-whiteframe="3"> 　　<span>Elevationof3dp</span></div> 　　</md-content> 　　</div> 　　<scriptsrc="node_modules/angular/angular.min.js"></script> 　　<scriptsrc="node_modules/angular-animate/angular-animate.min.js"></script> 　　<scriptsrc="node_modules/angular-aria/angular-aria.min.js"></script> 　　<scriptsrc="node_modules/angular-material/angular-material.js"></script> 　　<script> 　　varmyApp=angular.module('myApp',['ngMaterial']); 　　myApp.controller('myCtrl',['$scope',function($scope){ 　　$scope.arr=[ 　　{title:'标题1',cont:'内容1'}, 　　{title:'标题2',cont:'内容2'}, 　　{title:'标题3',cont:'内容3'}, 　　{title:'标题4',cont:'内容4'} 　　]; 　　$scope.toggle=function(id){ 　　$scope.rightTitle=$scope.arr[id].title; 　　$scope.rightCont=$scope.arr[id].cont; 　　}; 　　$scope.rightTitle=$scope.arr[0].title; 　　$scope.rightCont=$scope.arr[0].cont; 　　}]);</script></body></html>

、