Angular Material的使用详解

互联网 18-3-12

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

使用方法

用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>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Angular Material的使用详解

相关资讯

标签推荐