Angular-material-quick-guide

提供：Dev Guides
2020年7月1日 (水) 04:09時点におけるMaintenance script (トーク | 投稿記録)による版 (Imported from text file)
(差分) ← 古い版 | 最新版 (差分) | 新しい版 → (差分)
移動先:案内、検索

角度材料-概要

Angular Materialは、Angular JS開発者向けのUIコンポーネントライブラリです。 Angular Materialの再利用可能なUIコンポーネントは、魅力的で一貫性のある機能的なWebページとWebアプリケーションの構築に役立ち、同時にブラウザーの移植性、デバイスの独立性、グレースフルデグラデーションなどの最新のWebデザインの原則に従います。

以下は、角度材料のいくつかの顕著な特徴です-

  • 組み込みのレスポンシブデザイン。
  • フットプリントが最小限の標準CSS。
  • マテリアルデザインの概念に従うように適合されたボタン、チェックボックス、テキストフィールドなどの一般的なユーザーインターフェイスコントロールの新しいバージョンが含まれています。
  • カード、ツールバー、スピードダイヤル、サイドナビゲーション、スワイプなどの強化された特殊な機能が含まれています。
  • クロスブラウザ。再利用可能なWebコンポーネントの作成に使用できます。

レスポンシブデザイン

  • Angular Materialにはレスポンシブデザインが組み込まれているため、Angular Materialを使用して作成されたWebサイトは、デバイスのサイズに応じて再設計されます。
  • 角度マテリアルクラスは、Webサイトが任意の画面サイズに適合するように作成されます。
  • Angular Materialを使用して作成されたWebサイトは、PC、タブレット、およびモバイルデバイスと完全に互換性があります。

拡張可能

  • 角度材料は、設計上、非常に最小限で平らです。
  • 既存のCSSルールを上書きするよりも新しいCSSルールを追加する方がはるかに簡単であるという事実を考慮して設計されています。
  • 影と大胆な色をサポートしています。
  • 色と濃淡は、さまざまなプラットフォームとデバイスで均一です。

そして何よりも重要なのは、Angular Materialは絶対に無料で使用できることです。

角度材料-環境設定

角度マテリアルの使用方法

角度材料を使用するには2つの方法があります-

  • ローカルインストール-ローカルマシンでnpm、jspm、bowerを使用してAngular Materialライブラリをダウンロードし、HTMLコードに含めることができます。
  • * CDNベースのバージョン*-angle-material.min.cssおよびangle-material jsファイルを、コンテンツ配信ネットワーク（CDN）から直接HTMLコードに含めることができます。

ローカルインストール

次のnpmコマンドを使用する前に、システムにNodeJSをインストールする必要があります。 ノードJSに関する情報を取得するには、リンク：/nodejs/nodejs_environment_setup [こちら]をクリックして、NodeJSコマンドラインインターフェースを開きます。 次のコマンドを使用して、Angular Materialライブラリをインストールします。 

npm install angular-material

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

angular-animate@1.5.2 node_modules\angular-animate

angular-aria@1.5.2 node_modules\angular-aria

angular-messages@1.5.2 node_modules\angular-messages

angular@1.5.2 node_modules\angular

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

例

これで、次のようにHTMLファイルに_css_および_js_ファイルを含めることができます- 

<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は、最新バージョンのコンテンツを提供します。

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

例

ここで、Google CDNの angular-material.min.css および angular-material.min.js を使用して、上記の例を書き換えましょう。 

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

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

角材-オートコンプリート

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

属性

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

Sr.No Parameter & Description
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_*
<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>

結果

結果を確認します。

角材-ボトムシート

Angular Serviceである $ mdBottomSheet は、アプリケーションのボトムシートを開くために使用され、シンプルなpromise APIを提供します。

S.N Method & Description
1

$mdBottomSheet.show(options);

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

|S.N |Parameter & Description |1 a| * オプション*

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

  • 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です。
  • resolve-\ {object =} -ローカルと似ていますが、プロミスを値として受け取り、プロミスが解決するまでボトムシートが開かないことを除きます。
  • parent-\ {element =} -ボトムシートを追加する要素。 親は、関数、文字列、オブジェクト、またはnullです。 デフォルトでは、アプリケーションのルート要素（またはルート要素）の本体に追加されます。 e.g. angular.element（document.getElementById（ 'content'））または「#content」。
  • disableParentScroll-\ {boolean =} -ボトムシートが開いているときにスクロールを無効にするかどうか。 デフォルトはtrue。
[width="100%",cols="50%,50%",options="header",]

|Sr.No |Returns & Description |1 a| promise

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

例

次の例は、 $ mdBottomSheet サービスの使用と、ボトムシートの使用を示しています。 

*_am_bottomsheet_*
<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> @ finddevguides.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>

結果

結果を確認します。

角材-カード

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

Sr.No Directive/Class & Description
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_*
<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 @finddevguides.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ウィジェットの豊富なライブラリを提供します。 これにより、ユーザーはアプリケーションとの高度な対話機能を使用できます。

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

Sr.No Widget & Description
1

Buttons

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

2

CheckBoxes

Angular Directiveである md-checkbox は、チェックボックスコントロールとして使用されます。

3

Content

Angular Directiveである md-content はコンテナ要素であり、スクロール可能なコンテンツに使用されます。 layout-padding 属性を追加して、コンテンツをパディングできます。

4

DatePicker

Angular Directiveである md-datepicker は、日付を選択するための入力コントロールです。 また、入力検証用のngMessagesもサポートしています。

5

Dialogs

Angular Directiveの md-dialog はコンテナ要素であり、ダイアログボックスを表示するために使用されます。 その要素 md-dialog-content にはダイアログのコンテンツが含まれ、 md-dialog-actions はダイアログアクションを担当します。

Angular Serviceの mdDialog は、ユーザーに情報を提供し、意思決定を支援するために、アプリケーション上にダイアログを開きます。

6

Divider

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

7

List

Angularディレクティブの md-list は、 md-list-item 要素を子として含むコンテナコンポーネントです。 md-list-itemディレクティブは、md-listコンテナーの行項目のコンテナーコンポーネントです。 CSSクラス md-2-line および md-3-line をmd-list-itemに追加して、行の高さをそれぞれ22pxおよび40pxに増やすことができます。

8

Menu

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

9

Menu Bar

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

Progress Bars

  • md-progress-circular* および *md-progress-linear* はAngular progressディレクティブであり、アプリケーションでコンテンツの読み込みメッセージを表示するために使用されます。
11

Radio Buttons

  • md-radio-group* および *md-radio-button* Angularディレクティブは、アプリケーションでラジオボタンを表示するために使用されます。 md-radio-groupは、md-radio-button要素のグループ化コンテナーです。
12

Selects

Angularディレクティブである md-select は、ng-modelで囲まれた選択ボックスを表示するために使用されます。

13

Fab Toolbars

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

14

Sliders

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

  • 通常-ユーザーは幅広い値の間をスライドできます。 デフォルト。
  • discrete -ユーザーは選択した値の間をスライドできます。 離散モードを有効にするには、md-discreteおよびstep属性を使用します。
15

Tabs

  • md-tabs* および *md-tab* Angularディレクティブは、アプリケーションでタブを表示するために使用されます。 md-tabsは、md-tab要素のグループ化コンテナーです。
16

Toolbars

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

17

Tooltips

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

18

Chips

Angular Directiveの md-chips は、Chipと呼ばれる特別なコンポーネントとして使用され、連絡先、タグなどの小さな情報セットを表すために使用できます。 カスタムテンプレートを使用して、チップのコンテンツをレンダリングできます。 これは、カスタムコンテンツを含むmd-chip-template要素をmd-chipsの子として指定することで実現できます。

19

Contact Chips

Angular Directiveである md-contact-chips は、md-chips上に構築された入力コントロールで、 md-autocomplete 要素を使用します。 コンタクトチップコンポーネントは、可能なコンタクトのリストを返すクエリ式を受け入れます。 ユーザーはこれらのいずれかを選択して、使用可能なチップのリストに追加できます。

角材-レイアウト

レイアウトディレクティブ

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

  • 行-アイテムは最大高さ= 100％で水平に配置され、最大幅はコンテナ内のアイテムの幅です。
  • 列-アイテムは垂直方向に最大幅= 100％で配置され、最大高さはコンテナ内のアイテムの高さです。

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

Sr.No API & Device width when breakpoint overrides default
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 ⇐ width <1280px

7

layout-gt-md

幅> = 1280px

8

layout-lg

1280px ⇐幅<1920px

9

layout-gt-lg

幅> = 1920px

10

layout-xl

幅> = 1920px

例

次の例は、レイアウトディレクティブの使用とレイアウトの使用を示しています。 

*_am_layouts_*
<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ディレクティブの割り当て可能な値です-

  • * 5の倍数*-5、10、15 …​ 100
  • 33 -33％
  • 66 -66％

例

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

*_am_flex_*
<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>

結果

結果を確認します。

角度材料-入力

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

属性

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

Sr.No Parameter & Description
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_*
<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>

結果

結果を確認します。

角材-アイコン

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

属性

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

Sr.No Parameter & Description
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_*
<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>

結果

結果を確認します。

角材-グリッド

Angularディレクティブである md-grid-list は、さまざまな画面サイズのコンテンツをレイアウトするためのコンポーネントです。 グリッドには、デスクトップサイズの画面に12列、タブレットサイズの画面に8列、電話サイズの画面に4列があり、各サイズにはあらかじめ定義されたマージンと余白があります。 セルは、定義された順序で連続して行に配置されます。

属性

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

Sr.No Parameter & Description
1
  • md-cols*

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

2
  • md-row-height*

の一つ

  • * CSSの長さ*-固定された高さの行（例： 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_*
<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>

結果

結果を確認します。

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

角材-SideNav

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

属性

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

Sr.No Parameter & Description
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プリセットのいずれかを指定できます。

例- 

<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_*
<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 finddevguides.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>

結果

結果を確認します。

角材-ファブスピードダイヤル

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

属性

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

Sr.No Parameter & Description
1
  • md-direction*

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

2

md-open

これにより、短縮ダイヤルを表示するかどうかをプログラムで制御できます。

例

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

*_am_speeddial_*
<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>

結果

結果を確認します。

角材-サブヘッダー

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

例

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

*_am_subheaders_*
<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_*
<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>

結果

結果を確認します。

角材-スイッチ

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

属性

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

Sr.No Parameter & Description
1
  • ng-model*

データバインドする割り当て可能な角度式。

2

name

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

3

ng-true-value

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

4

ng-false-value

選択されていない場合に式を設定する値。

5

ng-change

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

6

ng-disabled

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

7

md-no-ink

属性の使用は、波紋インク効果の使用を示します。

8

aria-label

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

例

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

*_am_switches_*
<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ボタン
  • md-checkbox
  • md-progress-circular
  • md-progress-linear
  • md-radio-button
  • md-slider
  • md-switch
  • md-tabs
  • md-text-float
  • md-toolbar

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

  • primaryPalette
  • アクセントパレット
  • warnPalette
  • 背景パレット

例

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

*_am_themes_*
<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_*
<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は、Angular JSアプリケーション全体で視覚的な一貫性を作成するために使用できるさまざまなタイポグラフィCSSクラスを提供します。

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

Sr.No Class Name & Description
1

md-display-1

通常の34ピクセルのテキストを表示します。

2

md-display-2

通常の45ピクセルのテキストを表示します。

3

md-display-3

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

4

md-display-4

テキストをLight 112pxで表示します。

5

md-headline

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

6

md-title

中20pxのテキストを表示します。

7

md-subhead

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

8

md-body-1

通常の14ピクセルのテキストを表示します。

9

md-body-2

中14pxのテキストを表示します。

10

md-button

中14pxのボタンを表示します。

11

md-caption

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

例

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

*_am_typography_*
<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 のさまざまな属性のパラメーターと説明を示します。

Sr.No Parameter & Description
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 のさまざまな属性のパラメーターと説明を示します。

Sr.No Parameter & Description
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_*
<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には、コンテナを影付きの紙のようなカードとして表示するためのいくつかの特別なクラスがあります。

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

以下に、さまざまなクラスとその説明のリストを示します。

Sr.No Class Name & Description
1

md-whiteframe-1dp

これは、1pxの境界線付きの影を持つHTMLコンテンツのコンテナをスタイルします。 1の深さを追加します。

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の深さを追加します。

8

md-whiteframe-8dp

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

9

md-whiteframe-9dp

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

10

md-whiteframe-10dp

これにより、10pxの境界線付きシャドウを含むHTMLコンテンツのコンテナがスタイルされます。 10のZ深度を追加します。

11

md-whiteframe-11dp

これにより、11pxの境界線付きシャドウを含むHTMLコンテンツのコンテナがスタイルされます。 11のz深度を追加します。

12

md-whiteframe-12dp

これは、12pxの境界線付きシャドウを含むHTMLコンテンツのコンテナのスタイルを設定します。 12のz深度を追加します。

13

md-whiteframe-13dp

これにより、13pxの境界線付きシャドウを含むHTMLコンテンツのコンテナのスタイルが設定されます。 13のZ深度を追加します。

14

md-whiteframe-14dp

これにより、14pxの境界線付きシャドウを含むHTMLコンテンツのコンテナがスタイル設定されます。 14のZ深度を追加します。

15

md-whiteframe-15dp

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

16

md-whiteframe-16dp

これにより、16pxの境界線付きシャドウを含むHTMLコンテンツのコンテナがスタイルされます。 16のz深度を追加します。

17

md-whiteframe-17dp

これにより、17pxの境界線付きの影付きのHTMLコンテンツのコンテナがスタイルされます。 17のz深度を追加します。

18

md-whiteframe-18dp

これにより、18pxの境界線付きシャドウを含むHTMLコンテンツのコンテナのスタイルが設定されます。 18のZ深度を追加します。

19

md-whiteframe-19dp

これにより、19pxの境界線付きシャドウを含むHTMLコンテンツのコンテナがスタイル設定されます。 19のZ深度を追加します。

20

md-whiteframe-20dp

これは、20pxの境界線付きの影を持つHTMLコンテンツのコンテナをスタイルします。 20のZ深度を追加します。

21

md-whiteframe-21dp

これにより、21pxの境界線付きの影を持つHTMLコンテンツのコンテナがスタイルされます。 21のZ深度を追加します。

22

md-whiteframe-22dp

これにより、22pxの境界線付きシャドウを含むHTMLコンテンツのコンテナのスタイルが設定されます。 22のZ深度を追加します。

23

md-whiteframe-23dp

これにより、23pxの境界線付きシャドウを含むHTMLコンテンツのコンテナがスタイルされます。 23のZ深度を追加します。

24

md-whiteframe-24dp

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

例

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

*_am_whiteframes_*
<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>

結果

結果を確認します。

「https://www.finddevguides.com/index.php?title=Angular-material-quick-guide&oldid=78654」から取得
Powered by MediaWiki