时间:2021-07-01 10:21:17 帮助过:31人阅读
使用方法
用npm下载angular-material、angular-aria、angular-animate
代码如下:
- <!DOCTYPE html><html lang="en"><head>
- <meta charset="UTF-8">
- <title>Document</title>
- <link rel="stylesheet" href="node_modules/angular-material/angular-material.css"></head><body ng-app="myApp" ng-controller="myCtrl" layout="column">
- <md-toolbar>
- <h3>Angular Material 演示代码</h3>
- </md-toolbar>
- <div class="container" layout="row" flex>
- <md-sidenav md-is-locked-open="true" class="md-whiteframe-z2">
- <md-list>
- <md-list-item ng-repeat="item in arr">
- <md-button ng-click="toggle($index)">
- {{item.title}} </md-button>
- </md-list-item>
- </md-list>
- </md-sidenav>
- <md-content flex id="content" class="lightgreen" flex>
- <h2>{{rightTitle}}</h2>
- <p>
- {{rightCont}} </p>
- <md-checkbox ng-model="isChecked" aria-label="Finished?">
- Finished ? </md-checkbox>
- <md-checkbox md-no-ink ng-model="hasInk" aria-label="No Ink Effects">
- No Ink Effects </md-checkbox>
- <md-checkbox ng-disabled="true" ng-model="isDisabled" aria-label="Disabled">
- Disabled </md-checkbox>
- <form name="colorForm">
- <md-input-container>
- <label>Favorite Color</label>
- <input name="favoriteColor" ng-model="favoriteColor" required>
- <div ng-messages="colorForm.favoriteColor.$error">
- <div ng-message="required">This is required!</div>
- </div>
- </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">
- <md-tooltip>
- Play Music </md-tooltip></md-button><div md-whiteframe="3">
- <span>Elevation of 3dp</span></div>
- </md-content>
- </div>
- <script src="node_modules/angular/angular.min.js"></script>
- <script src="node_modules/angular-animate/angular-animate.min.js"></script>
- <script src="node_modules/angular-aria/angular-aria.min.js"></script>
- <script src="node_modules/angular-material/angular-material.js"></script>
- <script>
- var myApp = 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>
相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
推荐阅读:
css中id选择器的命名规则有哪些
网页中的图片格式应该如何选择
移动端布局中的流式布局是什么原理
以上就是Angular Material的使用详解的详细内容,更多请关注Gxl网其它相关文章!