Home >Web Front-end >HTML Tutorial >Detailed explanation of the use of Angular Material

Detailed explanation of the use of Angular Material

php中世界最好的语言Original: 2018-03-12 16:54:506340browse

This time I will bring you a detailed explanation of the use of Angular Material. What are the precautions when using Angular Material? The following is a practical case, let’s take a look.

How to use

Use npm to download angular-material, angular-aria, angular-animate

The code is as follows:

<!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(&#39;myApp&#39;,[&#39;ngMaterial&#39;]);
        myApp.controller(&#39;myCtrl&#39;,[&#39;$scope&#39;,function($scope){
            $scope.arr = [
                {title:&#39;标题1&#39;,cont:&#39;内容1&#39;},
                {title:&#39;标题2&#39;,cont:&#39;内容2&#39;},
                {title:&#39;标题3&#39;,cont:&#39;内容3&#39;},
                {title:&#39;标题4&#39;,cont:&#39;内容4&#39;}
            ];
            
            $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>

Detailed explanation of the use of Angular Material

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Detailed explanation of the use of Angular Material

Related articles