집 >웹 프론트엔드 >HTML 튜토리얼 >Angular Material 사용에 대한 자세한 설명

Angular Material 사용에 대한 자세한 설명

php中世界最好的语言원래의: 2018-03-12 16:54:506303검색

이번에는 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(&#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>

Angular Material 사용에 대한 자세한 설명

이 기사의 사례를 읽으신 후 방법을 마스터하셨으리라 믿습니다. . 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 기타 관련 기사를 주목하세요!