AngularMaterial-クイックガイド

Angular Materialは、AngularJS開発者向けのUIコンポーネントライブラリです。Angular Materialの再利用可能なUIコンポーネントは、ブラウザの移植性、デバイスの独立性、優雅な劣化などの最新のWebデザイン原則を遵守しながら、魅力的で一貫性のある機能的なWebページとWebアプリケーションの構築に役立ちます。

以下は、AngularMaterialのいくつかの顕著な特徴です-

  • 組み込みのレスポンシブデザイン。

  • フットプリントが最小限の標準CSS。

  • マテリアルデザインの概念に従うように適合された、ボタン、チェックボックス、テキストフィールドなどの一般的なユーザーインターフェイスコントロールの新しいバージョンが含まれています。

  • カード、ツールバー、スピードダイヤル、サイドナビゲーション、スワイプなどの拡張された特殊な機能が含まれています。

  • クロスブラウザであり、再利用可能なWebコンポーネントを作成するために使用できます。

レスポンシブデザイン

  • Angular Materialにはレスポンシブデザインが組み込まれているため、Angular Materialを使用して作成されたWebサイトは、デバイスのサイズに応じて再設計されます。

  • Angular Materialクラスは、Webサイトが任意の画面サイズに収まるように作成されます。

  • Angular Materialを使用して作成されたWebサイトは、PC、タブレット、およびモバイルデバイスと完全に互換性があります。

拡張可能

  • Angular Materialは、設計上、非常に最小限でフラットです。

  • これは、既存のCSSルールを上書きするよりも新しいCSSルールを追加する方がはるかに簡単であるという事実を考慮して設計されています。

  • 影と大胆な色をサポートします。

  • 色と色合いは、さまざまなプラットフォームやデバイス間で均一のままです。

そして何よりも重要なのは、AngularMaterialは完全に無料で使用できることです。

Angularマテリアルの使用方法は？

AngularMaterialを使用する方法は2つあります-

  • Local Installation −ローカルマシンでnpm、jspm、またはbowerを使用してAngular Materialライブラリをダウンロードし、HTMLコードに含めることができます。

  • CDN Based Version − Content Delivery Network（CDN）から直接、angular-material.min.cssファイルとangular-materialjsファイルをHTMLコードに含めることができます。

ローカルインストール

次のnpmコマンドを使用する前に、システムにNodeJSをインストールする必要があります。ノードJSについての情報を取得するには、クリックこことNodeJSコマンドラインインターフェースを開きます。次のコマンドを使用して、AngularMaterialライブラリをインストールします。

npm install angular-material

上記のコマンドは、次の出力を生成します-

[email protected] node_modules\angular-animate

[email protected] node_modules\angular-aria

[email protected] node_modules\angular-messages

[email protected] node_modules\angular

[email protected] node_modules\angular-material

npm 下のファイルをダウンロードします node_modules > angular-materialフォルダ。次の例で説明されているようにファイルを含めます-

例

これで、次のようにcssファイルとjsファイルをHTMLファイルに含めることができます。

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      
      <script type = "text/javascript">    
         angular.module('firstApplication', ['ngMaterial']);
      </script>
   </head>
   
   <body ng-app = "firstApplication" ng-cloak>
      <md-toolbar class = "md-warn">
         <div class = "md-toolbar-tools">
            <h2 class = "md-flex">HTML 5</h2>
         </div>
      </md-toolbar>
      
      <md-content flex layout-padding>
         <p>HTML5 is the next major revision of the HTML standard superseding HTML
         4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and
         presenting content on the World Wide Web.</p>
         
         <p>HTML5 is a cooperation between the World Wide Web Consortium (W3C) and
         the Web Hypertext Application Technology Working Group (WHATWG).</p>
         
         <p>The new standard incorporates features like video playback and drag-and-drop
         that have been previously dependent on third-party browser plug-ins such as
         Adobe Flash, Microsoft Silverlight, and Google Gears.</p>
      </md-content>
   </body>
</html>

上記のプログラムは次の結果を生成します-

CDNベースのバージョン

含めることができます angular-material.css そして angular-material.jsコンテンツ配信ネットワーク（CDN）から直接HTMLコードにファイルを挿入します。Google CDNは、最新バージョンのコンテンツを提供します。

このチュートリアルでは、ライブラリのGoogleCDNバージョンを使用しています。

例

ここで、上記の例を使用して書き直してみましょう。 angular-material.min.css そして angular-material.min.js GoogleCDNから。

<html lang = "en" >
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>

      <script type = "text/javascript">    
         angular.module('firstApplication', ['ngMaterial']);
      </script>
   </head>
   
   <body ng-app = "firstApplication" ng-cloak>
      <md-toolbar class = "md-warn">
         <div class = "md-toolbar-tools">
            <h2 class = "md-flex">HTML 5</h2>
         </div>
      </md-toolbar>
      
      <md-content flex layout-padding>
         <p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01,
         XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting 
         content on the World Wide Web.</p>

         <p>HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web
         ypertext Application Technology Working Group (WHATWG).</p>
         
         <p>The new standard incorporates features like video playback and drag-and-drop
         that have been previously dependent on third-party browser plug-ins such as Adobe
         Flash, Microsoft Silverlight, and Google Gears.</p>
      </md-content>
   </body>
</html>

上記のプログラムは次の結果を生成します-

ザ・ md-autocompleteAngularディレクティブは、カスタムクエリへのすべての可能な一致を表示するための組み込みのドロップダウンを備えた特別な入力コントロールとして使用されます。このコントロールは、ユーザーが入力領域に入力するとすぐに、リアルタイムの提案ボックスとして機能します。<md-autocomplete>ローカルまたはリモートのデータソースからの検索結果を提供するために使用できます。md-オートコンプリートは、クエリの実行時に結果をキャッシュします。最初の呼び出しの後、キャッシュされた結果を使用して不要なサーバー要求やルックアップロジックを排除し、無効にすることができます。

属性

次の表に、のさまざまな属性のパラメータと説明を示します。 md-autocomplete。

シニア番号 パラメータと説明
1

* md-items

検索の一致を繰り返すためのアイテム内のアイテムの形式の式。
2

md-selected-item-change

新しいアイテムが選択されるたびに実行される式。
3

md-search-text-change

検索テキストが更新されるたびに実行される式。
4

md-search-text

検索クエリテキストをバインドするモデル。
5

md-selected-item

選択したアイテムをバインドするモデル。
6

md-item-text

オブジェクトを単一の文字列に変換する式。
7

placeholder

入力に転送されるプレースホルダーテキスト。
8

md-no-cache

オートコンプリートで発生する内部キャッシュを無効にします。
9

ng-disabled

入力フィールドを無効にするかどうかを決定します。
10

md-min-length

オートコンプリートが提案を行う前のテキストの最小長を指定します。
11

md-delay

結果を探す前に待機する時間（ミリ秒単位）を指定します。
12

md-autofocus

trueの場合、入力要素にすぐにフォーカスします。
13

md-autoselect

trueの場合、デフォルトで最初の項目が選択されます。
14

md-menu-class

これは、スタイリングのドロップダウンメニューに適用されます。
15

md-floating-label

これにより、オートコンプリートにフローティングラベルが追加され、md-input-containerでラップされます。
16

md-input-name

FormControllerで使用されるinput要素に指定されたname属性。
17

md-input-id

入力要素に追加されるID。
18

md-input-minlength

検証用の入力値の最小の長さ。
19

md-input-maxlength

検証用の入力値の最大長。
20

md-select-on-match

trueに設定すると、検索テキストが完全に一致する場合、オートコンプリートは自動的に完全一致のアイテムを選択します。

例

次の例は、 md-autocomplete ディレクティブとオートコンプリートの使用。

am_autocomplete.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('autoCompleteController', autoCompleteController);

         function autoCompleteController ($timeout, $q, $log) {
            var self = this;
            self.simulateQuery = false;
            self.isDisabled    = false;
            
            // list of states to be displayed
            self.states        = loadStates();
            self.querySearch   = querySearch;
            self.selectedItemChange = selectedItemChange;
            self.searchTextChange   = searchTextChange;
            self.newState = newState;
            
            function newState(state) {
               alert("This functionality is yet to be implemented!");
            }
            
            function querySearch (query) {
               var results = query ? self.states.filter( createFilterFor(query) ) :
                  self.states, deferred;
                  
               if (self.simulateQuery) {
                  deferred = $q.defer();
                     
                  $timeout(function () { 
                     deferred.resolve( results ); 
                  }, 
                  Math.random() * 1000, false);
                  return deferred.promise;
               } else {
                  return results;
               }
            }
            
            function searchTextChange(text) {
               $log.info('Text changed to ' + text);
            }
            
            function selectedItemChange(item) {
               $log.info('Item changed to ' + JSON.stringify(item));
            }
            
            //build list of states as map of key-value pairs
            function loadStates() {
               var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
                  Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
                  Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
                  Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
                  North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
                  South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
                  Wisconsin, Wyoming';
                  
               return allStates.split(/, +/g).map( function (state) {
                  return {
                     value: state.toLowerCase(),
                     display: state
                  };
               });
            }
            
            //filter function for search query
            function createFilterFor(query) {
               var lowercaseQuery = angular.lowercase(query);
               return function filterFn(state) {
                  return (state.value.indexOf(lowercaseQuery) === 0);
               };
            }
         }  
      </script>      
   </head>
   
   <body ng-app = "firstApplication" ng-cloak>
      <div ng-controller = "autoCompleteController as ctrl" layout = "column" ng-cloak>
         <md-content class = "md-padding">
            <form ng-submit = "$event.preventDefault()">
               <p><code>md-autocomplete</code> can be used to provide search results from
               local or remote data sources.</p>
               
               <md-autocomplete
                  ng-disabled = "ctrl.isDisabled"
                  md-no-cache = "ctrl.noCache"
                  md-selected-item = "ctrl.selectedItem"
                  md-search-text-change = "ctrl.searchTextChange(ctrl.searchText)"
                  md-search-text = "ctrl.searchText"
                  md-selected-item-change = "ctrl.selectedItemChange(item)"
                  md-items = "item in ctrl.querySearch(ctrl.searchText)"
                  md-item-text = "item.display"
                  md-min-length = "0"
                  placeholder = "US State?">
                  
                  <md-item-template>
                     <span md-highlight-text = "ctrl.searchText"
                        md-highlight-flags = "^i">{{item.display}}</span>
                  </md-item-template>
                  
                  <md-not-found>
                     No states matching "{{ctrl.searchText}}" were found.
                     <a ng-click = "ctrl.newState(ctrl.searchText)">Create a new one!</a>
                  </md-not-found>
               </md-autocomplete>
               <br/>
               
               <md-checkbox ng-model = "ctrl.simulateQuery">Show progress for results?
                  </md-checkbox>
               <md-checkbox ng-model = "ctrl.noCache">Disable caching?</md-checkbox>
               <md-checkbox ng-model = "ctrl.isDisabled">Disable?</md-checkbox>
               <p><code>md-autocomplete</code> caches results when performing a query.
               After first call, it uses the cached results to eliminate unnecessary
               server requests or lookup logic and it can be disabled.</p>
            </form>
         </md-content>
      </div>
   </body>
</html>

結果

結果を確認します。

ザ・ $mdBottomSheetAngular Serviceは、アプリケーションのボトムシートを開くために使用され、単純なPromiseAPIを提供します。

SN 方法と説明
1

$mdBottomSheet.show(options);

指定されたオプションで下のシートを表示します。

SN パラメータと説明
1

* options

次のプロパティを持つオプションオブジェクト-

  • templateUrl - {string=}−下部シートのコンテンツとして使用されるhtmlテンプレートファイルのURL。制限事項：テンプレートには、外側のmd-bottom-sheet要素が必要です。

  • template - {string=} −実際のテンプレート文字列であることを除いて、templateUrlと同じです。

  • scope - {object=}−テンプレート/コントローラーをリンクするスコープ。何も指定されていない場合は、新しい子スコープが作成されます。このスコープは、preserveScopeがtrueに設定されていない限り、下部のシートが削除されると破棄されます。

  • preserveScope - {boolean=}−要素が削除されたときにスコープを保持するかどうかを指定します。デフォルトでは、falseです。

  • controller - {string=} −このボトムシートに関連付けるコントローラー。

  • locals - {string=}−キーと値のペアを含むオブジェクト。キーは、コントローラーに挿入する値の名前として使用されます。例えば、locals: {three: 3} 値3で3をコントローラーに注入します。

  • clickOutsideToClose - {boolean=}−ユーザーが下部シートの外側をクリックして閉じることができるかどうかを指定します。デフォルトでは、これはtrueです。

    • escapeToClose- {boolean =}：ユーザーがEscキーを押して下部のシートを閉じることができるかどうかを指定します。デフォルトでは、これはtrueです。

  • resolve - {object=} −ローカルと同様ですが、promiseを値として受け取り、promiseが解決されるまで下部シートが開きません。

    • controllerAs- {string =}：スコープ上でコントローラーを割り当てるエイリアス。

  • parent - {element=}−下部シートを追加する要素。親は、関数、文字列、オブジェクト、またはnullの場合があります。デフォルトでは、アプリケーションのルート要素（またはルート要素）の本体に追加されます。例：angular.element（document.getElementById（ 'content'））または "#content"。

  • disableParentScroll - {boolean=}−一番下のシートが開いているときにスクロールを無効にするかどうか。デフォルトはtrueです。
シニア番号 返品と説明
1

promise

$ mdBottomSheet.hide（）で解決できる、または$ mdBottomSheet.cancel（）で拒否できるpromise。

例

次の例は、 $mdBottomSheet サービスとボトムシートの使用。

am_bottomsheet.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
	  
     <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('bottomSheetController', bottomSheetController);

         function bottomSheetController ($scope, $mdBottomSheet) {
            $scope.openBottomSheet = function() {
               $mdBottomSheet.show ({
                  template: '<md-bottom-sheet>Learn <b>Angular Material</b> @ TutorialsPoint.com!</md-bottom-sheet>'
               });
            };
         }  
      </script>      
   </head>
   
   <body ng-app = "firstApplication">
      <div ng-controller = "bottomSheetController as ctrl" layout = "column">
         <md-content class = "md-padding">
            <form ng-submit = "$event.preventDefault()">
               <md-button class = "md-raised md-primary" ng-click = "openBottomSheet()">
                  Open Bottom Sheet!
               </md-button>
            </form>
         </md-content>
      </div>
   </body>
</html>

結果

結果を確認します。

ザ・ md-cardAngularディレクティブはコンテナディレクティブであり、angularjsアプリケーションでカードを描画するために使用されます。次の表に、md-cardで使用されるAngularディレクティブとクラスを示します。

シニア番号 指令/クラスと説明
1

<md-card-header>

カードのヘッダー。アバター、テキスト、正方形の画像を保持します。
2

<md-card-avatar>

カードアバター。
3

md-user-avatar

ユーザーイメージのクラス。
4

<md-icon>

アイコンディレクティブ。
5

<md-card-header-text>

カードの説明の要素が含まれています。
6

md-title

カードタイトルのクラス。
7

md-subhead

カードサブヘッダーのクラス。
8

<img>

カードの画像。
9

<md-card-title>

カードコンテンツのタイトル。
10

<md-card-title-text>

カードタイトルテキストコンテナ。
11

md-headline

カードコンテンツタイトルのクラス。
12

md-subhead

カードコンテンツサブヘッダーのクラス。
13

<md-card-title-media>

タイトル内の四角い画像。
14

md-media-sm

小さな画像のクラス。
15

md-media-md

ミディアムイメージのクラス。
16

md-media-lg

大きな画像のクラス。
17

<md-card-content>

カードの内容。
18

md-media-xl

特大画像のクラス。
19

<md-card-actions>

カードアクション。
20

<md-card-icon-actions>

アイコンアクション。

例

次の例は、md-cardディレクティブの使用とカードクラスの使用を示しています。

am_cards.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('cardController', cardController);

         function cardController ($scope) {            
         }  
      </script>      
   </head>
   
   <body ng-app = "firstApplication">  
      <md-card>
         <img ng-src = "/html5/images/html5-mini-logo.jpg" class = "md-card-image" alt = "Learn HTML5">
         <md-card-header>
            <md-card-avatar>
               <img class = "md-user-avatar" src = "/html5/images/html5-mini-logo.jpg">
            </md-card-avatar>
            
            <md-card-header-text>
               <span class = "md-title">HTML5</span>
               <span class = "md-subhead">Learn HTML5 @TutorialsPoint.com</span>
            </md-card-header-text>
         </md-card-header>
         
         <md-card-title>
            <md-card-title-text>
               <span class = "md-headline">HTML5</span>
            </md-card-title-text>
         </md-card-title>
         
         <md-card-actions layout = "row" layout-align = "start center">
            <md-button>Download</md-button>
            <md-button>Start</md-button>
            <md-card-icon-actions>
               <md-button class = "md-icon-button" aria-label = "icon">
                  <md-icon class = "material-icons">add</md-icon>
               </md-button>
            </md-card-icon-actions>
         </md-card-actions>
         
         <md-card-content>
            <p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01,
            XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting 
            content on the World Wide Web.</p>
            
            <p>HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the
            Web Hypertext Application Technology Working Group (WHATWG).</p>
            
            </p>The new standard incorporates features like video playback and 
            drag-and-drop that have been previously dependent on third-party browser
            plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears.</p>
         </md-card-content>
      </md-card>
   </body>
</html>

結果

結果を確認します。

Angular Materialは、UIウィジェットの豊富なライブラリを提供します。これにより、ユーザーはアプリケーションとの高度な対話機能を利用できます。

次の表に、いくつかの重要なウィジェットとその説明を示します。

シニア番号 ウィジェットと説明
1 ボタン

ザ・ md-buttonAngularディレクティブは、オプションのインクリップルを持つボタンディレクティブです（デフォルトで有効になっています）。場合href または ng-href 属性が指定されている場合、このディレクティブはアンカー要素として機能します。
2 チェックボックス

ザ・ md-checkbox、Angularディレクティブは、チェックボックスコントロールとして使用されます。
3 コンテンツ

ザ・ md-contentAngularディレクティブはコンテナ要素であり、スクロール可能なコンテンツに使用されます。ザ・layout-padding 属性を追加して、コンテンツをパディングすることができます。
4 DatePicker

ザ・ md-datepickerAngular Directiveは、日付を選択するための入力コントロールです。また、入力検証用のngMessagesもサポートしています。
5 ダイアログ

ザ・ md-dialogAngularディレクティブはコンテナ要素であり、ダイアログボックスを表示するために使用されます。その要素md-dialog-content ダイアログの内容と md-dialog-actions ダイアログアクションを担当します。

ザ・ mdDialogAngular Serviceは、アプリケーション上でダイアログを開き、ユーザーに情報を提供し、意思決定を支援します。
6 仕切り

ザ・ md-dividerAngularディレクティブはルール要素であり、リストおよびページレイアウト内のコンテンツをグループ化および分割するための薄い軽量ルールを表示するために使用されます。
7 リスト

ザ・ md-listAngularディレクティブは、を含むコンテナコンポーネントです。 md-list-item子供の頃の要素。md-list-itemディレクティブは、md-listコンテナの行アイテムのコンテナコンポーネントです。CSSクラスmd-2-line そして md-3-line md-list-itemに追加して、行の高さをそれぞれ22pxと40pxに増やすことができます。
8 メニュー

ザ・ md-menuAngularディレクティブは、実行されたアクションのコンテキスト内で追加オプションを表示するためのコンポーネントです。ザ・md-menu2つの子要素があります。最初の要素はtrigger elementメニューを開くために使用されます。2番目の要素はmd-menu-contentメニューを開いたときのメニューの内容を表します。md-menu-contentは通常、メニュー項目をmd-menu-itemとして運びます。
9 メニューバー

ザ・ md-menu-barは、複数のメニューを保持するためのコンテナコンポーネントです。メニューバーは、オペレーティングシステムが提供するメニュー効果を作成するのに役立ちます。
10 プログレスバー

ザ・ md-progress-circular そして md-progress-linear Angular Progressディレクティブであり、アプリケーションでコンテンツの読み込みメッセージを表示するために使用されます。
11 ラジオボタン

ザ・ md-radio-group そして md-radio-buttonAngularディレクティブは、アプリケーションでラジオボタンを表示するために使用されます。md-radio-groupは、md-radio-button要素のグループ化コンテナです。
12 選択

ザ・ md-select、Angularディレクティブは、ng-modelで囲まれた選択ボックスを表示するために使用されます。
13 ファブツールバー

ザ・ md-fab-toolbarAngularディレクティブは、一般的なアクションにすばやくアクセスするための要素またはボタンのツールバーを表示するために使用されます。
14 スライダー

ザ・ md-slider、Angularディレクティブは、範囲コンポーネントを表示するために使用されます。2つのモードがあります-

  • normal−ユーザーは幅広い値の間をスライドできます。デフォルト。

  • discrete−ユーザーは選択した値の間をスライドできます。離散モードを有効にするには、md-discrete属性とstep属性を使用します。
15 タブ

ザ・ md-tabs そして md-tabAngularディレクティブは、アプリケーションのタブを表示するために使用されます。md-tabsは、md-tab要素のグループ化コンテナです。
16 ツールバー

ザ・ md-toolbar、Angularディレクティブは、通常はコンテンツの上の領域であるツールバーを表示するために使用され、タイトルと関連するボタンを表示します。
17 ツールチップ

Angular Materialは、目立たないツールチップをユーザーに表示するためのさまざまな特別な方法を提供します。Angular Materialは、方向を割り当てる方法を提供し、md-tooltipディレクティブを使用してツールチップを表示します。ツールチップは、ユーザーが親コンポーネントにフォーカス、ホバー、またはタッチするたびにアクティブになります。
18 チップス

ザ・ md-chipsAngularディレクティブは、チップと呼ばれる特別なコンポーネントとして使用され、連絡先、タグなどの小さな情報セットを表すために使用できます。カスタムテンプレートを使用して、チップのコンテンツをレンダリングできます。これは、カスタムコンテンツを持つmd-chip-template要素をmd-chipsの子として指定することで実現できます。
19 お問い合わせチップ

ザ・ md-contact-chipsAngularディレクティブは、mdチップ上に構築された入力コントロールであり、 md-autocomplete素子。連絡先チップコンポーネントは、可能な連絡先のリストを返すクエリ式を受け入れます。ユーザーはこれらの1つを選択して、利用可能なチップのリストに追加できます。

レイアウト指令

コンテナ要素のレイアウトディレクティブは、その子のレイアウト方向を指定するために使用されます。レイアウト指令に割り当て可能な値は次のとおりです-

  • row −アイテムは、max-height = 100％で水平に配置され、max-widthはコンテナ内のアイテムの幅です。

  • column −アイテムは、max-width = 100％で垂直に配置され、max-heightはコンテナ内のアイテムの高さです。

デバイスの画面サイズに応じてレイアウトなどのレスポンシブデザインを自動変更する場合は、次の表に示すレイアウトAPIを使用して、ビュー幅のあるデバイスのレイアウト方向を設定できます。

シニア番号 ブレークポイントがデフォルトをオーバーライドするときのAPIとデバイスの幅
1

layout

別のブレークポイントによってオーバーライドされない限り、デフォルトのレイアウト方向を設定します。
2

layout-xs

幅<600px
3

layout-gt-xs

幅> = 600px
4

layout-sm

600px <=幅<960px
5

layout-gt-sm

幅> = 960px
6

layout-md

960px <=幅<1280px
7

layout-gt-md

幅> = 1280px
8

layout-lg

1280px <=幅<1920px
9

layout-gt-lg

幅> = 1920px
10

layout-xl

幅> = 1920px

例

次の例は、layoutディレクティブの使用法とlayoutの使用法を示しています。

am_layouts.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <style>
         .box {         
            color:white;
            padding:10px;
            text-align:center;
            border-style: inset;
         }
         
         .green {
            background:green;
         }
         
         .blue {
            background:blue;
         }
      </style>
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('layoutController', layoutController);

         function layoutController ($scope) {            
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "layoutContainer" ng-controller = "layoutController as ctrl"
         style = "height:100px;" ng-cloak>
         <div layout = "row" layout-xs = "column">
            <div flex class = "green box">Row 1: Item 1</div>
            <div flex = "20" class = "blue box">Row 1: Item 2</div>
         </div>
         
         <div layout = "column" layout-xs = "column">
            <div flex = "33" class = "green box">Column 1: item 1</div>
            <div flex = "66" class = "blue box">Column 1: item 2</div>
         </div>
      </div>
   </body>
</html>

結果

結果を確認します。

フレックス指令

コンテナ要素のflexディレクティブは、要素のサイズと位置をカスタマイズするために使用されます。これは、要素がその親コン​​テナおよびコンテナ内の他の要素に対してサイズを調整する方法を定義します。以下は、flexディレクティブに割り当て可能な値です-

  • multiples of 5 − 5、10、15 ... 100

  • 33 − 33％

  • 66 − 66％

例

次の例は、flexディレクティブの使用法とflexの使用法を示しています。

am_flex.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <style>
         .box {         
            color:white;
            padding:10px;
            text-align:center;
            border-style: inset;
         }
         
         .green {
            background:green;
         }
         
         .blue {
            background:blue;
         }
      </style>
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('layoutController', layoutController);

         function layoutController ($scope) {            
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "layoutContainer" ng-controller = "layoutController as ctrl"
         layout = "row" style = "height:100px;" ng-cloak layout-wrap>
         <div flex = "30" class = "green box">
            [flex = "30"]
         </div>
         
         <div flex = "45" class = "blue box">
            [flex = "45"]
         </div>
         
         <div flex = "25" class = "green box">
            [flex = "25"]
         </div>
         
         <div flex = "33" class = "green box">
            [flex = "33"]
         </div>
         
         <div flex = "66" class = "blue box">
            [flex = "66"]
         </div>
         
         <div flex = "50" class = "blue box">
            [flex = "50"]
         </div>
         
         <div flex class = "green box">
            [flex]
         </div>
      </div>
   </body>
</html>

結果

結果を確認します。

ザ・ md-input-container、Angularディレクティブは、を含むコンテナコンポーネントです。 <input> または <textarea>子としての要素。また、標準のng-messagesディレクティブを使用したエラー処理をサポートし、ngEnter / ngLeaveイベントまたはngShow / ngHideイベントを使用してメッセージをアニメーション化します。

属性

次の表に、のさまざまな属性のパラメータと説明を示します。 md-input-container。

シニア番号 パラメータと説明
1

md-maxlength

この入力で許可される最大文字数。これを指定すると、入力の下に文字カウンターが表示されます。md-maxlengthの目的は、最大長のカウンターテキストを表示することです。カウンターテキストが不要で、「プレーン」検証のみが必要な場合は、「単純な」ng-maxlengthまたはmaxlength属性を使用できます。
2

aria-label

ラベルが存在しない場合は、Aria-labelが必要です。ラベルが存在しない場合、警告メッセージがコンソールに記録されます。
3

placeholder

ラベルが存在しない場合にaria-labelを使用するための代替アプローチ。プレースホルダーテキストがaria-label属性にコピーされます。
4

md-no-autogrow

存在する場合、textareasは自動的に拡大しません。
5

md-detect-hidden

存在する場合、テキスト領域は非表示にされた後に表示されたときに適切なサイズになります。これは、ダイジェストサイクルごとにリフローが保証されるため、パフォーマンス上の理由からデフォルトでオフになっています。

例

次の例は、md-input-containerディレクティブの使用法と入力の使用法を示しています。

am_inputs.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <style>
        
      </style>
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('inputController', inputController);

         function inputController ($scope) {
            $scope.project = {
               comments: 'Comments',    
            };
         }                 
      </script>     	  
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "inputContainer" class = "inputDemo"
         ng-controller = "inputController as ctrl" ng-cloak>
         <md-content layout-padding>
            <form name = "projectForm">
               
               <md-input-container class = "md-block">
                  <label>User Name</label>
                  <input required name = "userName" ng-model = "project.userName">
                  <div ng-messages = "projectForm.userName.$error">
                     <div ng-message = "required">This is required.</div>
                  </div>
               </md-input-container>
               
               <md-input-container class = "md-block">
                  <label>Email</label>
                  <input required type = "email" name = "userEmail"
                     ng-model = "project.userEmail"
                     minlength = "10" maxlength = "100" ng-pattern = "/^.+@.+\..+$/" />
                  <div ng-messages = "projectForm.userEmail.$error" role = "alert">
                     <div ng-message-exp = "['required', 'minlength', 'maxlength',
                        'pattern']">
                        Your email must be between 10 and 100 characters long and should
                        be a valid email address.
                     </div>
                  </div>
               </md-input-container>
               
               <md-input-container class = "md-block">
                  <label>Comments</label>
                  <input md-maxlength = "300" required name = "comments"
                     ng-model = "project.comments">
                  <div ng-messages = "projectForm.comments.$error">
                     <div ng-message = "required">This is required.</div>
                     <div ng-message = "md-maxlength">The comments has to be less
                        than 300 characters long.</div>
                  </div>
               </md-input-container>
               
            </form>
         </md-content>
      </div>
   </body>
</html>

結果

結果を確認します。

ザ・ md-iconAngularディレクティブは、アプリケーションでベクターベースのアイコンを表示するためのコンポーネントです。Googleマテリアルアイコンの使用とは別に、アイコンフォントとSVGアイコンもサポートしています。

属性

次の表に、のさまざまな属性のパラメータと説明を示します。 md-icon。

シニア番号 パラメータと説明
1

* md-font-icon

これは、フォントフェースに関連付けられたCSSアイコンの文字列名であり、アイコンのレンダリングに使用されます。フォントと名前付きCSSスタイルをプリロードする必要があります。
2

* md-font-set

これは、フォントライブラリに関連付けられたCSSスタイル名であり、フォントアイコン合字のクラスとして割り当てられます。この値は、クラス名を検索するために使用されるエイリアスである場合もあります。内部的に$ mdIconProvider.fontSet（<alias>）を使用して、スタイル名を決定します。
3

* md-svg-src

これは、外部SVGのロード、キャッシュ、および表示に使用される文字列URL（または式）です。
4

* md-svg-icon

これは、内部キャッシュからアイコンを検索するために使用される文字列名です。補間された文字列または式も使用できます。特定のセット名は、構文<セット名>：<アイコン名>で使用できます。アイコンセットを使用するには、開発者は$ mdIconProviderサービスを使用してセットを事前登録する必要があります。
5

aria-label

これは、アクセシビリティのアイコンにラベルを付けます。空の文字列が指定されている場合、アイコンはaria-hidden = "true"でアクセシビリティレイヤーから非表示になります。アイコンにaria-labelがなく、親要素にラベルがない場合、警告がコンソールに記録されます。
6

alt

これは、アクセシビリティのアイコンにラベルを付けます。空の文字列が指定されている場合、アイコンはaria-hidden = "true"でアクセシビリティレイヤーから非表示になります。アイコンにaltがなく、親要素にラベルがない場合、警告がコンソールに記録されます。

例

次の例は、md-iconsディレクティブの使用法とアイコンの使用法を示しています。

am_icons.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <style>
         .iconDemo .glyph {
            border-bottom: 1px dotted #ccc;
            padding: 10px 0 20px;
            margin-bottom: 20px; 
         }
         
         .iconDemo .preview-glyphs {
            display: flex;
            flex-direction: row; 
         }
         
         .iconDemo .step {
            flex-grow: 1;
            line-height: 0.5; 
         }
         
         .iconDemo .material-icons.md-18 {
            font-size: 18px; 
         }
         
         .iconDemo .material-icons.md-24 {
            font-size: 24px; 
         }
         
         .iconDemo .material-icons.md-36 {
            font-size: 36px; 
         }
         
         .iconDemo .material-icons.md-48 {
            font-size: 48px; 
         }
         
         .iconDemo .material-icons.md-dark {
            color: rgba(0, 0, 0, 0.54); 
         }
         
         .iconDemo .material-icons.md-dark.md-inactive {
            color: rgba(0, 0, 0, 0.26); 
         }
         
         .iconDemo .material-icons.md-light {
            color: white; 
         }
         
         .iconDemo .material-icons.md-light.md-inactive {
            color: rgba(255, 255, 255, 0.3); 
         }
      </style>
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('iconController', iconController);

         function iconController ($scope) {
            var iconData = [
               {name: 'accessibility'  , color: "#777" },
               {name: 'question_answer', color: "rgb(89, 226, 168)" },
               {name: 'backup'         , color: "#A00" },
               {name: 'email'          , color: "#00A" }
            ];
            
            $scope.fonts = [].concat(iconData);            
            $scope.sizes = [
               {size:"md-18",padding:0},
               {size:"md-24",padding:2},
               {size:"md-36",padding:6},
               {size:"md-48",padding:10}
            ];
         }                 
      </script>     	  
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "iconContainer" class = "iconDemo"
         ng-controller = "iconController as ctrl" ng-cloak>
         <div class = "glyph" ng-repeat = "font in fonts" layout = "row">
            <div ng-repeat = "it in sizes" flex layout-align = "center center"
               style = "text-align: center;" layout = "column">
            <div flex></div>
               <div class = "preview-glyphs">
                  <md-icon ng-style = "{color: font.color}"
                     aria-label = "{{ font.name }}"
                     class = "material-icons step"
                     ng-class = "it.size">
                     {{ font.name }}
                  </md-icon>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

結果

結果を確認します。

ザ・ md-grid-listAngularディレクティブは、さまざまな画面サイズのコンテンツをレイアウトするためのコンポーネントです。グリッドには、デスクトップサイズ画面に12列、タブレットサイズ画面に8列、電話サイズ画面に4列あり、各サイズには事前定義されたマージンとガターがあります。セルは、定義された順序で順番に一列に配置されます。

属性

次の表に、のさまざまな属性のパラメータと説明を示します。 md-grid-list。

シニア番号 パラメータと説明
1

* md-cols

これは、グリッド内の列の数です。
2

* md-row-height

の一つ

  • CSS length −固定高さの行（例：8pxまたは1rem）。

  • {width}:{height} −幅と高さの比率（例：md-row-height = "16：9"）。

  • "fit" −高さは、使用可能な高さを行数で除算することによって決定されます。
3

md-gutter

CSS単位のタイル間のスペースの量（デフォルトは1px）。
4

md-on-layout

レイアウト後に評価する式。イベントオブジェクトは$ eventとして利用でき、パフォーマンス情報が含まれています。

例

次の例は、 md-grid-list ディレクティブとグリッドの使用。

am_grid.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('gridController', gridController);

         function gridController ($scope) {
            var COLORS = [
               '#ffebee', '#ffcdd2', '#ef9a9a', '#e57373', '#ef5350', '#f44336',
               '#e53935', '#d32f2f', '#c62828', '#b71c1c', '#ff8a80', '#ff5252',
               '#ff1744', '#d50000', '#f8bbd0', '#f48fb1', '#f06292', '#ec407a',
               '#e91e63', '#d81b60', '#c2185b', '#ad1457', '#880e4f', '#ff80ab',
               '#ff4081', '#f50057', '#c51162', '#e1bee7', '#ce93d8', '#ba68c8',
               '#ab47bc', '#9c27b0', '#8e24aa', '#7b1fa2', '#4a148c', '#ea80fc',
               '#e040fb', '#d500f9', '#aa00ff', '#ede7f6', '#d1c4e9', '#b39ddb',
               '#9575cd', '#7e57c2', '#673ab7', '#5e35b1', '#4527a0', '#311b92',
               '#b388ff', '#7c4dff', '#651fff', '#6200ea', '#c5cae9', '#9fa8da',
               '#7986cb', '#5c6bc0', '#3f51b5', '#3949ab', '#303f9f', '#283593',
               '#1a237e', '#8c9eff', '#536dfe', '#3d5afe', '#304ffe', '#e3f2fd',
               '#bbdefb', '#90caf9', '#64b5f6', '#42a5f5', '#2196f3', '#1e88e5',
               '#1976d2', '#1565c0', '#0d47a1', '#82b1ff', '#448aff', '#2979ff',
               '#2962ff', '#b3e5fc', '#81d4fa', '#4fc3f7', '#29b6f6', '#03a9f4',
               '#039be5', '#0288d1', '#0277bd', '#01579b', '#80d8ff', '#40c4ff',
               '#00b0ff', '#0091ea', '#e0f7fa', '#b2ebf2', '#80deea', '#4dd0e1',
               '#26c6da', '#00bcd4', '#00acc1', '#0097a7', '#00838f', '#006064',
               '#84ffff', '#18ffff', '#00e5ff', '#00b8d4', '#e0f2f1', '#b2dfdb',
               '#80cbc4', '#4db6ac', '#26a69a', '#009688', '#00897b', '#00796b',
               '#00695c', '#a7ffeb', '#64ffda', '#1de9b6', '#00bfa5', '#e8f5e9',
               '#c8e6c9', '#a5d6a7', '#81c784', '#66bb6a', '#4caf50', '#43a047',
               '#388e3c', '#2e7d32', '#1b5e20', '#b9f6ca', '#69f0ae', '#00e676',
               '#00c853', '#f1f8e9', '#dcedc8', '#c5e1a5', '#aed581', '#9ccc65',
               '#8bc34a', '#7cb342', '#689f38', '#558b2f', '#33691e', '#ccff90',
               '#b2ff59', '#76ff03', '#64dd17', '#f9fbe7', '#f0f4c3', '#e6ee9c',
               '#dce775', '#d4e157', '#cddc39', '#c0ca33', '#afb42b', '#9e9d24',
               '#827717', '#f4ff81', '#eeff41', '#c6ff00', '#aeea00', '#fffde7',
               '#fff9c4', '#fff59d', '#fff176', '#ffee58', '#ffeb3b', '#fdd835',
               '#fbc02d', '#f9a825', '#f57f17', '#ffff8d', '#ffff00', '#ffea00',
               '#ffd600', '#fff8e1', '#ffecb3', '#ffe082', '#ffd54f', '#ffca28',
               '#ffc107', '#ffb300', '#ffa000', '#ff8f00', '#ff6f00', '#ffe57f',
               '#ffd740', '#ffc400', '#ffab00', '#fff3e0', '#ffe0b2', '#ffcc80',
               '#ffb74d', '#ffa726', '#ff9800', '#fb8c00', '#f57c00', '#ef6c00',
               '#e65100', '#ffd180', '#ffab40', '#ff9100', '#ff6d00', '#fbe9e7',
               '#ffccbc', '#ffab91', '#ff8a65', '#ff7043', '#ff5722', '#f4511e',
               '#e64a19', '#d84315', '#bf360c', '#ff9e80', '#ff6e40', '#ff3d00',
               '#dd2c00', '#d7ccc8', '#bcaaa4', '#795548', '#d7ccc8', '#bcaaa4',
               '#8d6e63', '#eceff1', '#cfd8dc', '#b0bec5', '#90a4ae', '#78909c',
               '#607d8b', '#546e7a', '#cfd8dc', '#b0bec5', '#78909c'
            ];
            
            this.colorTiles = (function() {
               var tiles = [];
               for (var i = 0; i < 46; i++) {
                  tiles.push ({
                     color: randomColor(),
                     colspan: randomSpan(),
                     rowspan: randomSpan()
                  });
               }
               return tiles;
            })();
            
            function randomColor() {
               return COLORS[Math.floor(Math.random() * COLORS.length)];
            }
            
            function randomSpan() {
               var r = Math.random();
               if (r < 0.8) {
                  return 1;
               } else if (r < 0.9) {
                  return 2;
               } else {
                  return 3;
               }
            }      
         }                 
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "gridContainer" ng-controller = "gridController as ctrl" ng-cloak>
         <md-content layout-padding>
            <md-grid-list
               md-cols-gt-md = "12" md-cols-sm = "3" md-cols-md = "8"
               md-row-height-gt-md = "1:1" md-row-height = "4:3"
               md-gutter-gt-md = "16px" md-gutter-gt-sm = "8px" md-gutter = "4px">
               
               <md-grid-tile
                  ng-repeat = "tile in ctrl.colorTiles"
                  ng-style = "{
                     'background': tile.color
                  }"
                  md-colspan-gt-sm = "{{tile.colspan}}"
                  md-rowspan-gt-sm = "{{tile.rowspan}}">
               </md-grid-tile>
               
            </md-grid-list>
         </md-content>
      </div>
   </body>
</html>

結果

結果を確認します。

画面のサイズを変更して、効果を確認します。

ザ・ md-sidenav、Angularディレクティブは、プログラムで表示または非表示にできるコンテナコンポーネントを表示するために使用されます。デフォルトでは、メインコンテンツ領域の上にスライドします。

属性

次の表に、のさまざまな属性のパラメータと説明を示します。 md-sidenav

シニア番号 パラメータと説明
1

md-is-open

sidenavが開かれるかどうかにバインドされたモデル。
2

md-component-id

$ mdSidenavサービスで使用するcomponentId。
3

md-is-locked-open

この式がtrueに評価されると、sidenavは「ロックオープン」します。つまり、コンテンツの上に表示されるのではなく、コンテンツのフローに分類されます。これは、is-open属性をオーバーライドします。$ mdMedia（）サービスは、is-locked-open属性に公開されます。この属性には、メディアクエリ、またはsm、gt-sm、md、gt-md、lg、またはgt-lgプリセットのいずれかを指定できます。

Examples −

<md-sidenav md-is-locked-open = "shouldLockOpen"></md-sidenav>
<md-sidenav md-is-locked-open = "$mdMedia('min-width: 1000px')"></mdsidenav>
<md-sidenav md-is-locked-open = "$mdMedia('sm')"></md-sidenav> <!--(locks open on small screens)-->

例

次の例は、 md-sidenav また、の使用 sidenav 成分。

am_sidenav.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet" href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('sideNavController', sideNavController);

         function sideNavController ($scope, $mdSidenav) {
            $scope.openLeftMenu = function() {
               $mdSidenav('left').toggle();
            };
             
            $scope.openRightMenu = function() {
               $mdSidenav('right').toggle();
            };
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "sideNavContainer" ng-controller = "sideNavController as ctrl"
         layout = "row" ng-cloak>
         <md-sidenav md-component-id = "left" class = "md-sidenav-left">
            Welcome to TutorialsPoint.Com</md-sidenav>
         
         <md-content>           
            <md-button ng-click = "openLeftMenu()">Open Left Menu</md-button>
            <md-button ng-click = "openRightMenu()">Open Right Menu</md-button>
         </md-content>
         
         <md-sidenav md-component-id = "right" class = "md-sidenav-right">
            <md-button href = "http://google.com">Google</md-button>
         </md-sidenav>
      </div>
   </body>
</html>

結果

結果を確認します。

ザ・ md-fab-speed-dialAngularディレクティブは、一般的なアクションにすばやくアクセスするための一連のポップアップ要素またはボタンを表示するために使用されます。

属性

次の表に、のさまざまな属性のパラメータと説明を示します。 md-fab-speed-dial。

シニア番号 パラメータと説明
1

* md-direction

これにより、トリガー要素に対してスピードダイヤルが表示される方向が決まります。
2

md-open

これは、スピードダイヤルが表示されるかどうかをプログラムで制御するのに役立ちます。

例

次の例は、md-fab-speed-dialディレクティブの使用法とスピードダイヤルの使用法を示しています。

am_speeddial.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <style>
         .fabSpeedDial .text-capitalize {
            text-transform: capitalize; 
         }
         
         .fabSpeedDial .md-fab:hover, .fabSpeedDialdemoBasicUsage .md-fab.md-focused {
            background-color: #000 !important; 
         }
         
         .fabSpeedDial p.note {
            font-size: 1.2rem; 
         }
         
         .fabSpeedDial .lock-size {
            min-width: 300px;
            min-height: 300px;
            width: 300px;
            height: 300px;
            margin-left: auto;
            margin-right: auto; 
         } 
      </style>

      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('speedDialController', speedDialController);

         function speedDialController ($scope) {
            this.topDirections = ['left', 'up'];
            this.bottomDirections = ['down', 'right'];
            this.isOpen = false;
            this.availableModes = ['md-fling', 'md-scale'];
            this.selectedMode = 'md-fling';
            this.availableDirections = ['up', 'down', 'left', 'right'];
            this.selectedDirection = 'up';
         }                 
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div class = "fabSpeedDial" id = "speedDialContainer"
         ng-controller = "speedDialController as ctrl" layout = "row" ng-cloak>
         <md-content>
            <div class = "lock-size" layout = "row" layout-align = "center center">
               <md-fab-speed-dial md-open = "ctrl.isOpen"
                  md-direction = "{{ctrl.selectedDirection}}"
                  ng-class = "ctrl.selectedMode">
                  
                  <md-fab-trigger>
                     <md-button aria-label = "menu" class = "md-fab md-warn">
                        <md-icon class = "material-icons">menu</md-icon>
                     </md-button>
                  </md-fab-trigger>
                  
                  <md-fab-actions>
                     <md-button aria-label = "Add" class = "md-fab md-raised md-mini
                        md-accent">
                        <md-icon class = "material-icons" aria-label = "Add">
                           add</md-icon>
                     </md-button>
                     
                     <md-button aria-label = "Insert Link" class = "md-fab md-raised
                        md-mini md-accent">
                        <md-icon class = "material-icons" aria-label = "Insert Link">
                           insert_link</md-icon>
                     </md-button>
                     
                     <md-button aria-label = "Edit" class = "md-fab md-raised md-mini
                           md-accent">
                        <md-icon class = "material-icons" aria-label = "Edit">
                           mode_edit</md-icon>
                     </md-button>
                  </md-fab-actions>
               </md-fab-speed-dial>
            </div>

            <div layout = "row" layout-align = "space-around">
               <div layout = "column" layout-align = "start center">
                  <b>Direction</b>
                  <md-radio-group ng-model = "ctrl.selectedDirection">
                     <md-radio-button ng-repeat = "direction in ctrl.availableDirections"
                        ng-value = "direction" class = "text-capitalize">
                        {{direction}}
                     </md-radio-button>
                  </md-radio-group>
               </div>
               
               <div layout = "column" layout-align = "start center">
                  <b>Open/Closed</b>
                  <md-checkbox ng-model = "ctrl.isOpen">
                     Open
                  </md-checkbox>
               </div>
               
               <div layout = "column" layout-align = "start center">
                  <b>Animation Modes</b>
                  <md-radio-group ng-model = "ctrl.selectedMode">
                     <md-radio-button ng-repeat = "mode in ctrl.availableModes"
                        ng-value = "mode">
                        {{mode}}
                     </md-radio-button>
                  </md-radio-group>
               </div>
               
            </div>
         </md-content>	 
      </div>
   </body>
</html>

結果

結果を確認します。

ザ・ md-subheaderAngularディレクティブは、セクションのサブヘッダーを表示するために使用されます。

例

次の例は、md-subheaderの使用法とsubheaderコンポーネントの使用法を示しています。

am_subheaders.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('subheaderController', subheaderController);

         function subheaderController ($scope) {
            $scope.fruitNames = ['Apple', 'Banana', 'Orange'];
            $scope.vegNames = ['Carrot', 'Potato', 'Cabbage'];
            $scope.eateries = ['Milk', 'Bread'];
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "subheaderContainer" ng-controller = "subheaderController as ctrl"
         layout = "column" flex layout-fill ng-cloak>
         <md-toolbar md-scroll-shrink>
            <div class = "md-toolbar-tools">Items</div>
         </md-toolbar>
         
         <md-content style = "height: 600px;">
            <section>
               <md-subheader class = "md-primary">Fruits</md-subheader>
               <md-list layout-padding>
                  <md-list-item ng-repeat = "fruits in fruitNames">
                     <div>
                        <p>{{fruits}}</p>
                     </div>
                  </md-list-item>
               </md-list>
            </section>
               
            <section>
               <md-subheader class = "md-warn">Vegetables</md-subheader>
               <md-list layout-padding>
                  <md-list-item ng-repeat = "veg in vegNames">
                     <div>
                        <p>{{veg}}</p>
                     </div>
                  </md-list-item>
               </md-list>
            </section>
               
            <section>
               <md-subheader>Eateries</md-subheader>
               <md-list layout-padding>
                  <md-list-item ng-repeat = "eatery in eateries">
                     <div>
                        <p>{{eatery}}</p>
                     </div>
                  </md-list-item>
               </md-list>
            </section>
         </md-content>
         
      </div>
   </body>
</html>

結果

結果を確認します。

スワイプ機能はモバイルデバイス向けです。次のディレクティブは、スワイプを処理するために使用されます。

  • md-swipe-down、Angularディレクティブは、要素が下にスワイプされたときのカスタム動作を指定するために使用されます。

  • md-swipe-left、Angularディレクティブは、要素が左にスワイプされたときのカスタム動作を指定するために使用されます。

  • md-swipe-right、Angularディレクティブは、要素が右にスワイプされたときのカスタム動作を指定するために使用されます。

  • md-swipe-up、Angularディレクティブは、要素が上にスワイプされたときのカスタム動作を指定するために使用されます。

例

次の例は、md-swipe- *の使用法とスワイプコンポーネントの使用法を示しています。

am_swipes.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <style>
         .swipeContainer .demo-swipe {
            padding: 20px 10px; 			
         }
         
         .swipeContainer .no-select {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none; 
         }
      </style>
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('swipeController', swipeController);

         function swipeController ($scope) {
            $scope.onSwipeLeft = function(ev) {
               alert('Swiped Left!');
            };
             
            $scope.onSwipeRight = function(ev) {
               alert('Swiped Right!');
            };
             
            $scope.onSwipeUp = function(ev) {
               alert('Swiped Up!');
            };
             
            $scope.onSwipeDown = function(ev) {
               alert('Swiped Down!');
            };
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <md-card>
         <div id = "swipeContainer" ng-controller = "swipeController as ctrl"
            layout = "row" ng-cloak>
            <div flex>
               <div class = "demo-swipe" md-swipe-left = "onSwipeLeft()">
                  <span class = "no-select">Swipe me to the left</span>
                  <md-icon md-font-icon = "android" aria-label = "android"></md-icon>
               </div>
               
               <md-divider></md-divider>
               <div class = "demo-swipe" md-swipe-right = "onSwipeRight()">
                  <span class = "no-select">Swipe me to the right</span>
               </div>
            </div>

            <md-divider></md-divider>
            <div flex layout = "row">
               <div flex layout = "row" layout-align = "center center"
                  class = "demo-swipe" md-swipe-up = "onSwipeUp()">
                  <span class = "no-select">Swipe me up</span>
               </div>
               
               <md-divider></md-divider>
               <div flex layout = "row" layout-align = "center center"
                  class = "demo-swipe" md-swipe-down = "onSwipeDown()">
                  <span class = "no-select">Swipe me down</span>
               </div>
            </div>
            
         </div>
      </md-card>
   </body>
</html>

結果

結果を確認します。

ザ・ md-switchAngularディレクティブは、スイッチを表示するために使用されます。

属性

次の表に、のさまざまな属性のパラメータと説明を示します。 md-switch。

シニア番号 パラメータと説明
1

* ng-model

データバインドに割り当てることができる角度式。
2

name

コントロールが公開されるフォームのプロパティ名。
3

ng-true-value

選択時に式を設定する値。
4

ng-false-value

選択されていないときに式を設定する値。
5

ng-change

ユーザーが入力要素を操作したために入力が変更されたときに実行されるAngular式。
6

ng-disabled

式に基づいて有効/無効にします。
7

md-no-ink

属性の使用は、リップルインク効果の使用を示します。
8

aria-label

これにより、スクリーンリーダーがアクセシビリティのために使用するボタンラベルが公開されます。これはデフォルトでスイッチのテキストになります。

例

次の例は、md-swipe- *の使用法とスワイプコンポーネントの使用法を示しています。

am_switches.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('switchController', switchController);

         function switchController ($scope) {
            $scope.data = {
               switch1: true,
               switch2: false,
               switch3: false,
               switch4: true,
               switch5: true,
               switch6: false
            };
               
            $scope.message = 'false';
            $scope.onChange = function(state) {
               $scope.message = state;
            };
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "switchContainer" ng-controller = "switchController as ctrl"
         layout = "column" ng-cloak>
         <md-switch ng-model = "data.switch1" aria-label = "Switch 1">
            Switch 1: {{ data.switch1 }}
         </md-switch>
         
         <md-switch ng-model = "data.switch2" aria-label = "Switch 2"
            ng-true-value = "'true'" ng-false-value = "'false'" class = "md-warn">
            Switch 2 (md-warn): {{ data.switch2 }}
         </md-switch>
         
         <md-switch ng-disabled = "true" aria-label = "Disabled switch"
            ng-model = "disabledModel">
            Switch 3 (Disabled)
         </md-switch>
         
         <md-switch ng-disabled = "true" aria-label = "Disabled active switch"
            ng-model = "data.switch4">
            Switch 4 (Disabled, Active)
         </md-switch>
         
         <md-switch class = "md-primary" md-no-ink aria-label = "Switch No Ink"
            ng-model = "data.switch5">
            Switch 5 (md-primary): No Ink
         </md-switch>
         
         <md-switch ng-model = "data.switch6" aria-label = "Switch 6"
            ng-change = "onChange(data.switch6)">
            Switch 6 : {{ message }}
         </md-switch>    
      </div>
   </body>
</html>

結果

結果を確認します。

Angular Materialコンポーネントは、md-primary、md-accent、md-warnなどの意図グループクラスと、md-hue-1、md-hue-2、またはmd-hue-3などの色の違いのための追加クラスを使用します。次のコンポーネントは、上記のクラスの使用をサポートします。

  • md-button
  • md-checkbox
  • md-progress-circular
  • md-progress-linear
  • md-radio-button
  • md-slider
  • md-switch
  • md-tabs
  • md-text-float
  • md-toolbar

テーマは、アプリケーションの構成中に$ mdThemingProviderを使用して構成できます。次のプロパティを使用して、さまざまなカラーパレットを割り当てることができます。

  • primaryPalette
  • accentPalette
  • warnPalette
  • backgroundPalette

例

次の例は、AngularJSアプリケーションでのテーマの使用を示しています。

am_themes.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('themeController', themeController)
            .config(function($mdThemingProvider) {
               $mdThemingProvider.theme('customTheme') 
               .primaryPalette('grey')
               .accentPalette('orange')
               .warnPalette('red');
            });

         function themeController ($scope) {            
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "themeContainer" ng-controller = "themeController as ctrl" ng-cloak>
         <md-toolbar class = "md-primary">
            <div class = "md-toolbar-tools">
               <h2 class = "md-flex">Default Theme</h2>
            </div>
         </md-toolbar>
         <hr/>
         
         <md-card>         
            <md-card-content layout = "column"> 
               <md-toolbar class = "md-primary">
                  <div class = "md-toolbar-tools">
                     <h2 class = "md-flex">Using md-primary style</h2>
                  </div>
               </md-toolbar>
                  
               <md-toolbar class = "md-primary md-hue-1">
                  <div class = "md-toolbar-tools">
                     <h2 class = "md-flex">Using md-primary md-hue-1 style</h2>
                  </div>
               </md-toolbar>
               
               <md-toolbar class = "md-primary md-hue-2">
                  <div class = "md-toolbar-tools">
                     <h2 class = "md-flex">Using md-primary md-hue-2 style</h2>
                  </div></md-toolbar>
                  
               <md-toolbar class = "md-accent">
                  <div class = "md-toolbar-tools">
                     <h2 class = "md-flex">Using md-accent style</h2>
                  </div>
               </md-toolbar>
               
               <md-toolbar class = "md-accent md-hue-1">
                  <div class = "md-toolbar-tools">
                     <h2 class = "md-flex">Using md-accent md-hue-1 style</h2>
                  </div>
               </md-toolbar>
               
               <md-toolbar class = "md-accent md-hue-2">
                  <div class = "md-toolbar-tools">
                     <h2 class = "md-flex">Using md-accent md-hue-2 style</h2>
                  </div>
               </md-toolbar>
               
               <md-toolbar class = "md-warn">
                  <div class = "md-toolbar-tools">
                     <h2 class = "md-flex">Using md-warn style</h2>
                  </div>
               </md-toolbar>
               
               <md-toolbar class = "md-warn md-hue-1">
                  <div class = "md-toolbar-tools">
                     <h2 class = "md-flex">Using md-warn md-hue-1 style</h2>
                  </div>
               </md-toolbar>
               
               <md-toolbar class = "md-warn md-hue-2">
                  <div class = "md-toolbar-tools">
                     <h2 class = "md-flex">Using md-warn md-hue-2 style</h2>
                  </div>
               </md-toolbar>              
            </md-card-content>
         </md-card>
         
         <div md-theme = "customTheme">
            <md-toolbar class = "md-primary">
               <div class = "md-toolbar-tools">
                  <h2 class = "md-flex">Custom Theme</h2>
               </div>
            </md-toolbar>
            <hr/>
            
            <md-card>         
               <md-card-content layout = "column"> 
                  <md-toolbar class = "md-primary">
                     <div class = "md-toolbar-tools">
                        <h2 class = "md-flex">Using md-primary style</h2>
                     </div>
                  </md-toolbar>
                  
                  <md-toolbar class = "md-primary md-hue-1">
                     <div class = "md-toolbar-tools">
                        <h2 class = "md-flex">Using md-primary md-hue-1 style</h2>
                     </div>
                  </md-toolbar>
                  
                  <md-toolbar class = "md-primary md-hue-2">
                     <div class = "md-toolbar-tools">
                        <h2 class = "md-flex">Using md-primary md-hue-2 style</h2>
                     </div>
                  </md-toolbar>
                  
                  <md-toolbar class = "md-accent">
                     <div class = "md-toolbar-tools">
                        <h2 class = "md-flex">Using md-accent style</h2>
                     </div>
                  </md-toolbar>
                  
                  <md-toolbar class = "md-accent md-hue-1">
                     <div class = "md-toolbar-tools">
                        <h2 class = "md-flex">Using md-accent md-hue-1 style</h2>
                     </div>
                  </md-toolbar>
                  
                  <md-toolbar class = "md-accent md-hue-2">
                     <div class = "md-toolbar-tools">
                        <h2 class = "md-flex">Using md-accent md-hue-2 style</h2>
                     </div>
                  </md-toolbar>
                  
                  <md-toolbar class = "md-warn">
                     <div class = "md-toolbar-tools">
                        <h2 class = "md-flex">Using md-warn style</h2>
                     </div>
                  </md-toolbar>
                  
                  <md-toolbar class = "md-warn md-hue-1">
                     <div class = "md-toolbar-tools">
                        <h2 class = "md-flex">Using md-warn md-hue-1 style</h2>
                     </div>
                  </md-toolbar>
                  
                  <md-toolbar class = "md-warn md-hue-2">
                     <div class = "md-toolbar-tools">
                        <h2 class = "md-flex">Using md-warn md-hue-2 style</h2>
                     </div>
                  </md-toolbar>              
               </md-card-content>
            </md-card>
            
         </div>
      </div>
   </body>
</html>

結果

結果を確認します。

Angular Materialは、ユーザーに目立たないアラートを表示するためのさまざまな特別な方法を提供します。また、彼らにトーストという用語を提供します。$ mdToastサービスは、トーストを表示するために使用されます。

例

次の例は、トーストの使用法を示しています。

am_toasts.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('toastController', toastController);

         function toastController ($scope, $mdToast, $document) { 
            $scope.showToast1 = function() {
               $mdToast.show (
                  $mdToast.simple()
                  .textContent('Hello World!')                       
                  .hideDelay(3000)
               );
            };

            $scope.showToast2 = function() {
               var toast = $mdToast.simple()
                  .textContent('Hello World!')
                  .action('OK')
                  .highlightAction(false);                     
               
               $mdToast.show(toast).then(function(response) {
                  if ( response == 'ok' ) {
                     alert('You clicked \'OK\'.');
                  }
               });			   
            }
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "toastContainer" ng-controller = "toastController as ctrl"
         layout = "row" ng-cloak>
         <md-button ng-click = "showToast1()">Show Simple Alert</md-button>
         <md-button ng-click = "showToast2()">Show Alert with callback</md-button>
      </div>
   </body>
</html>

結果

結果を確認します。

Angular Materialは、AngularJSアプリケーション全体で視覚的な一貫性を作成するために使用できるさまざまなタイポグラフィCSSクラスを提供します。

次の表に、さまざまなクラスとその説明を示します。

シニア番号 クラス名と説明
1

md-display-1

通常の34pxのテキストを表示します。
2

md-display-2

通常の45pxのテキストを表示します。
3

md-display-3

通常の56pxのテキストを表示します。
4

md-display-4

ライト112pxでテキストを表示します。
5

md-headline

通常の24pxでテキストを表示します。
6

md-title

ミディアム20pxのテキストを表示します。
7

md-subhead

通常の16pxでテキストを表示します。
8

md-body-1

通常の14pxのテキストを表示します。
9

md-body-2

ミディアム14pxのテキストを表示します。
10

md-button

ミディアム14pxのボタンを表示します。
11

md-caption

通常の12pxのテキストを表示します。

例

次の例は、タイポグラフィCSSクラスの使用法を示しています。

am_typography.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('typographyController', typographyController);
           
         function typographyController ($scope) {               
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div class = "frameContainer" ng-controller = "typographyController as ctrl"
         layout = "column" layout-padding layout-wrap layout-fill
         style = "padding-bottom: 32px;" ng-cloak>
         <p class = "md-display-4">.md-display-4</p>
         <p class = "md-display-3">.md-display-3</p>
         <p class = "md-display-2">.md-display-2</p>
         <p class = "md-display-1">.md-display-1</p>
         <p class = "md-headline">.md-headline</p>
         <p class = "md-title">.md-title</p>
         <p class = "md-subhead">.md-subhead</p>
         <p class = "md-body-1">.md-body-1</p>
         <p class = "md-body-2">.md-body-2</p>
         <md-button>.md-button</md-button>
         <p class = "md-caption">.md-caption</p>
      </div>
   </body>
</html>

結果

結果を確認します。

ザ・ md-virtual-repeat-container md-virtual-repeatコンポーネントのスクロールコンテナです。

属性

次の表に、のさまざまな属性のパラメータと説明を示します。 md-virtual-repeat-container。

シニア番号 パラメータと説明
1

md-top-index

スクロールコンテナの上部にあるアイテムのインデックスを$ scopeにバインドします。スクロール位置の読み取りと設定の両方が可能です。
2

md-orient-horizontal

コンテナを水平方向にスクロールするかどうかを決定します（デフォルトは方向と垂直方向のスクロールです）。
3

md-auto-shrink

存在する場合、その数が元のサイズよりも小さい場合、コンテナはアイテムの数に合うように縮小します。
4

md-auto-shrink-min

md-auto-shrinkが縮小するアイテムの最小数（デフォルト：0）。

md-virtual-repeat

仮想リピートはng-repeatの代わりになり、コンテナーを埋めるのに十分なhtml要素のみをレンダリングし、ユーザーがスクロールしたときにそれらを再利用します。

属性

次の表に、のさまざまな属性のパラメータと説明を示します。 md-virtual-repeat。

シニア番号 パラメータと説明
1

md-item-size

繰り返される要素の高さまたは幅（各要素で同一である必要があります）。これはオプションです。これは、欠落している場合はdomからサイズを読み取ろうとしますが、繰り返されるすべてのノードの高さまたは幅が同じであると想定します。
2

md-extra-name

現在の反復アイテムを繰り返しスコープで割り当てることができる追加の名前に評価されます（md-autocompleteで使用するために必要）。
3

md-on-demand

存在する場合、 md-virtual-repeat 配列ではなく行をフェッチできるオブジェクトとしての引数。このオブジェクトは、2つのメソッドを使用して次のインターフェイスを実装する必要があります。

  • getItemAtIndex − function（index）[object]-そのインデックスにあるアイテム。まだロードされていない場合はnull（その場合はアイテムのダウンロードを開始する必要があります）。

  • getLength− function（）[number]-リピーターコンテナのサイズを設定するデータの長さ。理想的には、カウントがわかっている場合、このメソッドはそれを返す必要があります。それ以外の場合は、現在ロードされているアイテムよりも大きい数を返し、無限スクロール動作を生成します。

例

次の例は、仮想リピートの使用法を示しています。

am_virtualrepeat.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <style>
         .vrepeatContainer #horizontal-container {
            height: 100px;
            width: 830px; 
         }

         .vrepeatContainer #vertical-container {
            height: 292px;
            width: 400px; 
         }

         .vrepeatContainer .repeated-item-horizontal {
            border-right: 1px solid #ddd;
            box-sizing: border-box;
            display: inline-block;
            height: 84px;
            padding-top: 35px;
            text-align: center;
            width: 50px; 
         }

         .vrepeatContainer .repeated-item-vertical {
            border-bottom: 1px solid #ddd;
            box-sizing: border-box;
            height: 40px;
            padding-top: 10px;
         }

         .vrepeatContainer md-content {
            margin: 16px; 
         }
         
         .vrepeatContainer md-virtual-repeat-container {
            border: solid 1px grey; 
         }	  
      </style>
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('vrepeatController', vrepeatController);
           
         function vrepeatController ($scope) { 
            this.items = [];
            for (var i = 0; i < 1000; i++) {
               this.items.push(i);
            }
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div class = "vrepeatContainer" ng-controller = "vrepeatController as ctrl"
         ng-cloak>
         <md-content layout = "column">
            <h2>Horizontal Repeat</h2>
            <md-virtual-repeat-container id = "horizontal-container" md-orient-horizontal>
               <div md-virtual-repeat = "item in ctrl.items"
                  class = "repeated-item-horizontal" flex>
                  {{item}}
               </div>
            </md-virtual-repeat-container>
            
            <h2>Vertical Repeat</h2>
            <md-virtual-repeat-container id = "vertical-container">
               <div md-virtual-repeat = "item in ctrl.items"
                  class = "repeated-item-vertical" flex>
                  {{item}}
               </div>
            </md-virtual-repeat-container>
            
         </md-content>
      </div>
   </body>
</html>

結果

結果を確認します。

Angular Materialには、コンテナを影付きの紙のようなカードとして表示するための特別なクラスがいくつかあります。

次の表に、さまざまなクラスとその説明を示します。

シニア番号 クラス名と説明
1

md-whiteframe-1dp

これにより、1pxの境界線付きシャドウを持つHTMLコンテンツのコンテナのスタイルが設定されます。1のzdepthを追加します。
2

md-whiteframe-2dp

これにより、2pxの境界線付きシャドウを持つHTMLコンテンツのコンテナのスタイルが設定されます。2のzdepthを追加します。
3

md-whiteframe-3dp

これにより、3pxの境界線付きシャドウを持つHTMLコンテンツのコンテナのスタイルが設定されます。3のzdepthを追加します。
4

md-whiteframe-4dp

これにより、4pxの境界線付きシャドウを持つHTMLコンテンツのコンテナのスタイルが設定されます。4のzdepthを追加します。
5

md-whiteframe-5dp

これにより、5pxの境界線付きシャドウを持つHTMLコンテンツのコンテナのスタイルが設定されます。5のzdepthを追加します。
6

md-whiteframe-6dp

これにより、6pxの境界線付きシャドウを持つHTMLコンテンツのコンテナのスタイルが設定されます。6のzdepthを追加します。
7

md-whiteframe-7dp

これにより、7pxの境界線付きシャドウを持つHTMLコンテンツのコンテナのスタイルが設定されます。7のzdepthを追加します。
8

md-whiteframe-8dp

これにより、8pxの境界線付きシャドウを持つHTMLコンテンツのコンテナのスタイルが設定されます。8のzdepthを追加します。
9

md-whiteframe-9dp

これにより、9pxの境界線付きシャドウを持つHTMLコンテンツのコンテナのスタイルが設定されます。9のzdepthを追加します。
10

md-whiteframe-10dp

これにより、10pxの境界線付きシャドウを持つHTMLコンテンツのコンテナのスタイルが設定されます。10のz-depthを追加します。
11

md-whiteframe-11dp

これにより、11pxの境界線付きシャドウを持つHTMLコンテンツのコンテナのスタイルが設定されます。11のz-depthを追加します。
12

md-whiteframe-12dp

これにより、12pxの境界線付きシャドウを持つHTMLコンテンツのコンテナのスタイルが設定されます。12のz-depthを追加します。
13

md-whiteframe-13dp

これにより、13pxの境界線付きシャドウを持つHTMLコンテンツのコンテナのスタイルが設定されます。13のz-depthを追加します。
14

md-whiteframe-14dp

これにより、14pxの境界線付きシャドウを持つHTMLコンテンツのコンテナのスタイルが設定されます。14のz-depthを追加します。
15

md-whiteframe-15dp

これにより、15pxの境界線付きシャドウを持つHTMLコンテンツのコンテナのスタイルが設定されます。15のz-depthを追加します。
16

md-whiteframe-16dp

これにより、16pxの境界線付きシャドウを持つHTMLコンテンツのコンテナのスタイルが設定されます。16のz-depthを追加します。
17

md-whiteframe-17dp

これにより、17pxの境界線付きシャドウを持つHTMLコンテンツのコンテナのスタイルが設定されます。17のz-depthを追加します。
18

md-whiteframe-18dp

これにより、18pxの境界線付きシャドウを持つHTMLコンテンツのコンテナのスタイルが設定されます。18のz-depthを追加します。
19

md-whiteframe-19dp

これにより、19pxの境界線付きシャドウを持つHTMLコンテンツのコンテナのスタイルが設定されます。19のz-depthを追加します。
20

md-whiteframe-20dp

これにより、20pxの境界線付きシャドウを持つHTMLコンテンツのコンテナのスタイルが設定されます。20のz-depthを追加します。
21

md-whiteframe-21dp

これにより、21pxの境界線付きシャドウを持つHTMLコンテンツのコンテナのスタイルが設定されます。21のz-depthを追加します。
22

md-whiteframe-22dp

これにより、22pxの境界線付きシャドウを持つHTMLコンテンツのコンテナのスタイルが設定されます。22のz-depthを追加します。
23

md-whiteframe-23dp

これにより、23pxの境界線付きシャドウを持つHTMLコンテンツのコンテナのスタイルが設定されます。23のz-depthを追加します。
24

md-whiteframe-24dp

これにより、24pxの境界線付きシャドウを持つHTMLコンテンツのコンテナのスタイルが設定されます。24のz-depthを追加します。

例

次の例は、シャドウクラスの使用法を示しています。

am_whiteframes.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <style>
         .frameContainer md-whiteframe {
            background: #fff;
            margin: 30px;
            height: 100px; 
         }
      </style>
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('frameController', frameController);
           
         function frameController ($scope) {               
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div class = "frameContainer" ng-controller = "frameController as ctrl"
         layout = "row" layout-padding layout-wrap layout-fill
         style = "padding-bottom: 32px;" ng-cloak>
         <md-whiteframe class = "md-whiteframe-1dp" flex-sm = "45" flex-gt-sm = "35"
            flex-gt-md = "25" layout layout-align = "center center">
            <span>.md-whiteframe-1dp</span>
         </md-whiteframe>
         
         <md-whiteframe class = "md-whiteframe-2dp" flex-sm = "45" flex-gt-sm = "35"
            flex-gt-md = "25" layout layout-align = "center center">
            <span>.md-whiteframe-2dp</span>
         </md-whiteframe>
         
         <md-whiteframe class = "md-whiteframe-3dp" flex-sm = "45" flex-gt-sm = "35"
            flex-gt-md = "25" layout layout-align = "center center">
            <span>.md-whiteframe-3dp</span>
         </md-whiteframe>
         
         <md-whiteframe class = "md-whiteframe-10dp" flex-sm = "45" flex-gt-sm = "35"
            flex-gt-md = "25" layout layout-align = "center center">
            <span>.md-whiteframe-10dp</span>
         </md-whiteframe>
         
         <md-whiteframe class = "md-whiteframe-15dp" flex-sm = "45" flex-gt-sm = "35"
            flex-gt-md = "25" layout layout-align = "center center">
            <span>.md-whiteframe-15dp</span>
         </md-whiteframe>
         
         <md-whiteframe class = "md-whiteframe-20dp" flex-sm = "45" flex-gt-sm = "35"
            flex-gt-md = "25" layout layout-align = "center center">
            <span>.md-whiteframe-20dp</span>
         </md-whiteframe>
         
         <md-whiteframe class = "md-whiteframe-22dp" flex-sm = "45" flex-gt-sm = "35"
            flex-gt-md = "25" layout layout-align = "center center">
            <span>.md-whiteframe-22dp</span>
         </md-whiteframe>
         
         <md-whiteframe class = "md-whiteframe-23dp" flex-sm = "45" flex-gt-sm = "35"
            flex-gt-md = "25" layout layout-align = "center center">
            <span>.md-whiteframe-23dp</span>
         </md-whiteframe>
         
         <md-whiteframe class = "md-whiteframe-24dp" flex-sm = "45" flex-gt-sm = "35"
            flex-gt-md = "25" layout layout-align = "center center">
            <span>.md-whiteframe-24dp</span>
         </md-whiteframe>
      </div>
   </body>
</html>

結果

結果を確認します。

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved