当前位置:Gxlcms > html代码 > AngularMaterial的使用详解

AngularMaterial的使用详解

时间:2021-07-01 10:21:17 帮助过:31人阅读

这次给大家带来Angular Material的使用详解,Angular Material使用的注意事项有哪些,下面就是实战案例,一起来看一下。

使用方法

用npm下载angular-material、angular-aria、angular-animate

代码如下:

  1. <!DOCTYPE html><html lang="en"><head>
  2. <meta charset="UTF-8">
  3. <title>Document</title>
  4. <link rel="stylesheet" href="node_modules/angular-material/angular-material.css"></head><body ng-app="myApp" ng-controller="myCtrl" layout="column">
  5. <md-toolbar>
  6. <h3>Angular Material 演示代码</h3>
  7. </md-toolbar>
  8. <div class="container" layout="row" flex>
  9. <md-sidenav md-is-locked-open="true" class="md-whiteframe-z2">
  10. <md-list>
  11. <md-list-item ng-repeat="item in arr">
  12. <md-button ng-click="toggle($index)">
  13. {{item.title}} </md-button>
  14. </md-list-item>
  15. </md-list>
  16. </md-sidenav>
  17. <md-content flex id="content" class="lightgreen" flex>
  18. <h2>{{rightTitle}}</h2>
  19. <p>
  20. {{rightCont}} </p>
  21. <md-checkbox ng-model="isChecked" aria-label="Finished?">
  22. Finished ? </md-checkbox>
  23. <md-checkbox md-no-ink ng-model="hasInk" aria-label="No Ink Effects">
  24. No Ink Effects </md-checkbox>
  25. <md-checkbox ng-disabled="true" ng-model="isDisabled" aria-label="Disabled">
  26. Disabled </md-checkbox>
  27. <form name="colorForm">
  28. <md-input-container>
  29. <label>Favorite Color</label>
  30. <input name="favoriteColor" ng-model="favoriteColor" required>
  31. <div ng-messages="colorForm.favoriteColor.$error">
  32. <div ng-message="required">This is required!</div>
  33. </div>
  34. </md-input-container></form><md-progress-circular md-mode="determinate" value="80"></md-progress-circular><md-progress-circular md-mode="determinate" ng-value="60"></md-progress-circular><md-progress-circular md-mode="determinate" value="50" md-diameter="100"></md-progress-circular><md-progress-circular md-mode="indeterminate"></md-progress-circular><md-button class="md-fab md-accent" aria-label="Play">
  35. <md-tooltip>
  36. Play Music </md-tooltip></md-button><div md-whiteframe="3">
  37. <span>Elevation of 3dp</span></div>
  38. </md-content>
  39. </div>
  40. <script src="node_modules/angular/angular.min.js"></script>
  41. <script src="node_modules/angular-animate/angular-animate.min.js"></script>
  42. <script src="node_modules/angular-aria/angular-aria.min.js"></script>
  43. <script src="node_modules/angular-material/angular-material.js"></script>
  44. <script>
  45. var myApp = angular.module('myApp',['ngMaterial']);
  46. myApp.controller('myCtrl',['$scope',function($scope){
  47. $scope.arr = [
  48. {title:'标题1',cont:'内容1'},
  49. {title:'标题2',cont:'内容2'},
  50. {title:'标题3',cont:'内容3'},
  51. {title:'标题4',cont:'内容4'}
  52. ];
  53. $scope.toggle = function(id){
  54. $scope.rightTitle = $scope.arr[id].title;
  55. $scope.rightCont = $scope.arr[id].cont;
  56. };
  57. $scope.rightTitle = $scope.arr[0].title;
  58. $scope.rightCont = $scope.arr[0].cont;
  59. }]); </script></body></html>

1.png

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

css中id选择器的命名规则有哪些

网页中的图片格式应该如何选择

移动端布局中的流式布局是什么原理

以上就是Angular Material的使用详解的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行