Angular-material-quick-guide
提供：Dev Guides
角度材料-概要
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上記のコマンドは、次の出力を生成します-
[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> 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 |
検索の一致を反復処理するためのアイテム内のアイテムの形式の式。 |
| 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 |
Angular Directiveである md-button は、オプションのインクリップルを持つボタンディレクティブです（デフォルトで有効になっています）。 href または ng-href 属性が指定されている場合、このディレクティブはアンカー要素として機能します。 |
| 2 |
Angular Directiveである md-checkbox は、チェックボックスコントロールとして使用されます。 |
| 3 |
Angular Directiveである md-content はコンテナ要素であり、スクロール可能なコンテンツに使用されます。 layout-padding 属性を追加して、コンテンツをパディングできます。 |
| 4 |
Angular Directiveである md-datepicker は、日付を選択するための入力コントロールです。 また、入力検証用のngMessagesもサポートしています。 |
| 5 |
Angular Directiveの md-dialog はコンテナ要素であり、ダイアログボックスを表示するために使用されます。 その要素 md-dialog-content にはダイアログのコンテンツが含まれ、 md-dialog-actions はダイアログアクションを担当します。 Angular Serviceの mdDialog は、ユーザーに情報を提供し、意思決定を支援するために、アプリケーション上にダイアログを開きます。 |
| 6 |
Angular Directiveの md-divider はルール要素であり、リストおよびページレイアウト内のコンテンツをグループ化および分割するための薄い軽量のルールを表示するために使用されます。 |
| 7 |
Angularディレクティブの md-list は、 md-list-item 要素を子として含むコンテナコンポーネントです。 md-list-itemディレクティブは、md-listコンテナーの行項目のコンテナーコンポーネントです。 CSSクラス md-2-line および md-3-line をmd-list-itemに追加して、行の高さをそれぞれ22pxおよび40pxに増やすことができます。 |
| 8 |
Angularディレクティブである md-menu は、実行されたアクションのコンテキスト内で追加オプションを表示するコンポーネントです。 md-menu には2つの子要素があります。 最初の要素は* trigger要素*であり、メニューを開くために使用されます。 2番目の要素は md-menu-content で、メニューが開かれたときのメニューのコンテンツを表します。 md-menu-contentは通常、メニュー項目をmd-menu-itemとして運びます。 |
| 9 |
|
| 10 |
|
| 11 |
|
| 12 |
Angularディレクティブである md-select は、ng-modelで囲まれた選択ボックスを表示するために使用されます。 |
| 13 |
Angularディレクティブである md-fab-toolbar は、一般的なアクションにすばやくアクセスするための要素またはボタンのツールバーを表示するために使用されます。 |
| 14 |
Angularディレクティブである md-slider は、範囲コンポーネントを表示するために使用されます。 それには2つのモードがあります-
|
| 15 |
|
| 16 |
Angularディレクティブである md-toolbar は、タイトルと関連ボタンを表示するために通常コンテンツの上の領域であるツールバーを表示するために使用されます。 |
| 17 |
Angular Materialは、目立たないツールチップをユーザーに表示するためのさまざまな特別な方法を提供します。 Angular Materialは方向を割り当てる方法を提供し、md-tooltipディレクティブを使用してツールチップを表示します。 ユーザーが親コンポーネントにフォーカス、ホバー、またはタッチすると、ツールチップがアクティブになります。 |
| 18 |
Angular Directiveの md-chips は、Chipと呼ばれる特別なコンポーネントとして使用され、連絡先、タグなどの小さな情報セットを表すために使用できます。 カスタムテンプレートを使用して、チップのコンテンツをレンダリングできます。 これは、カスタムコンテンツを含むmd-chip-template要素をmd-chipsの子として指定することで実現できます。 |
| 19 |
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 |
これは、フォントフェイスに関連付けられたCSSアイコンの文字列名で、アイコンのレンダリングに使用されます。 フォントと名前付きCSSスタイルをプリロードする必要があります。 |
| 2 |
これは、フォントアイコン合字のクラスとして割り当てられるフォントライブラリに関連付けられたCSSスタイル名です。 この値は、クラス名の検索に使用されるエイリアスでもあります。内部的に$ mdIconProvider.fontSet（<alias>）を使用してスタイル名を決定します。 |
| 3 |
これは、外部SVGのロード、キャッシュ、および表示に使用される文字列URL（または式）です。 |
| 4 |
これは、内部キャッシュからのアイコンの検索に使用される文字列名です。補間された文字列または式も使用できます。 特定のセット名は、構文<セット名>：<アイコン名>で使用できます。 アイコンセットを使用するには、開発者は$ 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 |
これは、グリッド内の列数です。 |
| 2 |
の一つ
|
| 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>結果
結果を確認します。
画面のサイズを変更して、効果を確認します。
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 の使用法と 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 |
これにより、トリガー要素に対してスピードダイヤルが表示される方向が決まります。 |
| 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 |
データバインドする割り当て可能な角度式。 |
| 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つのメソッドを持つ次のインターフェースを実装する必要があります-
|
例
次の例は、仮想リピートの使用を示しています。
*_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>結果
結果を確認します。
