Angular中Material怎么用

這篇文章主要介紹Angular中Material怎么用，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)提供從項目策劃、軟件開發(fā)，軟件安全維護、網(wǎng)站優(yōu)化(SEO)、網(wǎng)站分析、效果評估等整套的建站服務(wù)，主營業(yè)務(wù)為做網(wǎng)站、成都做網(wǎng)站，成都app開發(fā)以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。成都創(chuàng)新互聯(lián)公司深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

Angular Material使用的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。

使用方法

用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>    
      <h4>Angular Material 演示代碼</h4>
    </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>
          <h3>{{rightTitle}}</h3>
          <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:'內(nèi)容1'},
                {title:'標題2',cont:'內(nèi)容2'},
                {title:'標題3',cont:'內(nèi)容3'},
                {title:'標題4',cont:'內(nèi)容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>

Angular中Material怎么用

以上是“Angular中Material怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前名稱：Angular中Material怎么用
新聞來源：http://muchs.cn/article18/jcjddp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、云服務(wù)器、網(wǎng)站改版、外貿(mào)建站、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

手機網(wǎng)站建設(shè)