Angular Material-퀵 가이드
Angular Material은 Angular JS 개발자를위한 UI 컴포넌트 라이브러리입니다. Angular Material의 재사용 가능한 UI 구성 요소는 브라우저 이식성, 장치 독립성 및 우아한 저하와 같은 최신 웹 디자인 원칙을 준수하면서 매력적이고 일관되며 기능적인 웹 페이지 및 웹 응용 프로그램을 구성하는 데 도움이됩니다.
다음은 Angular Material의 몇 가지 두드러진 특징입니다-
내장 반응 형 디자인.
최소한의 공간을 차지하는 표준 CSS.
머티리얼 디자인 개념을 따르도록 조정 된 버튼, 확인란 및 텍스트 필드와 같은 공통 사용자 인터페이스 컨트롤의 새 버전을 포함합니다.
카드, 도구 모음, 단축 다이얼, 측면 탐색, 스 와이프 등과 같은 향상된 특수 기능이 포함됩니다.
브라우저 간이며 재사용 가능한 웹 구성 요소를 만드는 데 사용할 수 있습니다.
반응 형 디자인
Angular Material은 반응 형 디자인이 내장되어 있으므로 Angular Material을 사용하여 만든 웹 사이트는 장치 크기에 따라 자체적으로 다시 디자인됩니다.
Angular Material 클래스는 웹 사이트가 모든 화면 크기에 맞도록 만들어집니다.
Angular Material을 사용하여 만든 웹 사이트는 PC, 태블릿 및 모바일 장치와 완벽하게 호환됩니다.
확장 가능
Angular Material은 설계 상 매우 최소화되고 평평합니다.
기존 CSS 규칙을 덮어 쓰는 것보다 새 CSS 규칙을 추가하는 것이 훨씬 쉽다는 사실을 고려하여 설계되었습니다.
그림자와 대담한 색상을 지원합니다.
색상과 음영은 다양한 플랫폼과 장치에서 균일하게 유지됩니다.
그리고 무엇보다도 Angular Material은 절대적으로 무료로 사용할 수 있습니다.
Angular Material을 사용하는 방법?
Angular Material을 사용하는 방법은 두 가지가 있습니다.
Local Installation − 로컬 컴퓨터에서 npm, jspm 또는 bower를 사용하여 Angular Material 라이브러리를 다운로드하여 HTML 코드에 포함 할 수 있습니다.
CDN Based Version − CDN (Content Delivery Network)에서 직접 angular-material.min.css 및 angular-material js 파일을 HTML 코드에 포함 할 수 있습니다.
로컬 설치
다음 npm 명령을 사용하기 전에 시스템에 NodeJS를 설치해야합니다. 노드 JS에 대한 정보를 얻으려면 여기를 클릭 하고 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-materialnpm 아래 파일을 다운로드합니다. node_modules > angular-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.jsCDN (Content Delivery Network)에서 직접 HTML 코드로 파일을 가져옵니다. Google CDN은 최신 버전의 콘텐츠를 제공합니다.
이 튜토리얼 전체에서 라이브러리의 Google CDN 버전을 사용하고 있습니다.
예
이제 위의 예를 다음을 사용하여 다시 작성하겠습니다. angular-material.min.css 과 angular-material.min.js Google CDN에서.
<html lang = "en" >
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script type = "text/javascript">
angular.module('firstApplication', ['ngMaterial']);
</script>
</head>
<body ng-app = "firstApplication" ng-cloak>
<md-toolbar class = "md-warn">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">HTML 5</h2>
</div>
</md-toolbar>
<md-content flex layout-padding>
<p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01,
XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting
content on the World Wide Web.</p>
<p>HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web
ypertext Application Technology Working Group (WHATWG).</p>
<p>The new standard incorporates features like video playback and drag-and-drop
that have been previously dependent on third-party browser plug-ins such as Adobe
Flash, Microsoft Silverlight, and Google Gears.</p>
</md-content>
</body>
</html>위의 프로그램은 다음 결과를 생성합니다-
그만큼 md-autocomplete, Angular Directive는 사용자 지정 쿼리에 대한 가능한 모든 일치 항목을 표시하기 위해 내장 된 드롭 다운이있는 특수 입력 컨트롤로 사용됩니다. 이 컨트롤은 사용자가 입력 영역에 입력하는 즉시 실시간 제안 상자 역할을합니다.<md-autocomplete>로컬 또는 원격 데이터 소스에서 검색 결과를 제공하는 데 사용할 수 있습니다. md-autocomplete는 쿼리를 수행 할 때 결과를 캐시합니다. 첫 번째 호출 후 캐시 된 결과를 사용하여 불필요한 서버 요청이나 조회 논리를 제거하고 비활성화 할 수 있습니다.
속성
다음 표는 다양한 속성에 대한 매개 변수 및 설명을 나열합니다. md-autocomplete.
| Sr. 아니요 | 매개 변수 및 설명 |
|---|---|
| 1 | * md-items 검색에 대해 일치하는 항목을 반복 할 항목의 항목 형식의 표현식입니다. |
| 2 | md-selected-item-change 새 항목을 선택할 때마다 실행할 표현식입니다. |
| 삼 | 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 참이면 입력 요소에 즉시 초점을 맞 춥니 다. |
| 13 | md-autoselect 참이면 첫 번째 항목이 기본적으로 선택됩니다. |
| 14 | md-menu-class 스타일링을위한 드롭 다운 메뉴에 적용됩니다. |
| 15 | md-floating-label 이렇게하면 자동 완성에 플로팅 레이블이 추가되고 md-input-container에 래핑됩니다. |
| 16 | md-input-name FormController와 함께 사용할 입력 요소에 제공된 이름 속성입니다. |
| 17 | md-input-id 입력 요소에 추가 할 ID입니다. |
| 18 | md-input-minlength 유효성 검사를위한 입력 값의 최소 길이입니다. |
| 19 | md-input-maxlength 유효성 검사를위한 입력 값의 최대 길이입니다. |
| 20 | md-select-on-match true로 설정하면 검색 텍스트가 정확히 일치하는 경우 자동 완성 기능이 정확한 항목을 자동으로 선택합니다. |
예
다음 예제는 md-autocomplete 지시문 및 자동 완성의 사용.
am_autocomplete.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('autoCompleteController', autoCompleteController);
function autoCompleteController ($timeout, $q, $log) { var self = this; self.simulateQuery = false; self.isDisabled = false; // list of states to be displayed self.states = loadStates(); self.querySearch = querySearch; self.selectedItemChange = selectedItemChange; self.searchTextChange = searchTextChange; self.newState = newState; function newState(state) { alert("This functionality is yet to be implemented!"); } function querySearch (query) { var results = query ? self.states.filter( createFilterFor(query) ) : self.states, deferred; if (self.simulateQuery) { deferred = $q.defer();
$timeout(function () { deferred.resolve( results ); }, Math.random() * 1000, false); return deferred.promise; } else { return results; } } function searchTextChange(text) { $log.info('Text changed to ' + text);
}
function selectedItemChange(item) {
$log.info('Item changed to ' + JSON.stringify(item)); } //build list of states as map of key-value pairs function loadStates() { var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\ Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\ Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\ Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\ North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\ South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\ Wisconsin, Wyoming'; return allStates.split(/, +/g).map( function (state) { return { value: state.toLowerCase(), display: state }; }); } //filter function for search query function createFilterFor(query) { var lowercaseQuery = angular.lowercase(query); return function filterFn(state) { return (state.value.indexOf(lowercaseQuery) === 0); }; } } </script> </head> <body ng-app = "firstApplication" ng-cloak> <div ng-controller = "autoCompleteController as ctrl" layout = "column" ng-cloak> <md-content class = "md-padding"> <form ng-submit = "$event.preventDefault()">
<p><code>md-autocomplete</code> can be used to provide search results from
local or remote data sources.</p>
<md-autocomplete
ng-disabled = "ctrl.isDisabled"
md-no-cache = "ctrl.noCache"
md-selected-item = "ctrl.selectedItem"
md-search-text-change = "ctrl.searchTextChange(ctrl.searchText)"
md-search-text = "ctrl.searchText"
md-selected-item-change = "ctrl.selectedItemChange(item)"
md-items = "item in ctrl.querySearch(ctrl.searchText)"
md-item-text = "item.display"
md-min-length = "0"
placeholder = "US State?">
<md-item-template>
<span md-highlight-text = "ctrl.searchText"
md-highlight-flags = "^i">{{item.display}}</span>
</md-item-template>
<md-not-found>
No states matching "{{ctrl.searchText}}" were found.
<a ng-click = "ctrl.newState(ctrl.searchText)">Create a new one!</a>
</md-not-found>
</md-autocomplete>
<br/>
<md-checkbox ng-model = "ctrl.simulateQuery">Show progress for results?
</md-checkbox>
<md-checkbox ng-model = "ctrl.noCache">Disable caching?</md-checkbox>
<md-checkbox ng-model = "ctrl.isDisabled">Disable?</md-checkbox>
<p><code>md-autocomplete</code> caches results when performing a query.
After first call, it uses the cached results to eliminate unnecessary
server requests or lookup logic and it can be disabled.</p>
</form>
</md-content>
</div>
</body>
</html>결과
결과를 확인하십시오.
그만큼 $mdBottomSheet, Angular Service는 애플리케이션의 하단 시트를 여는 데 사용되며 간단한 promise API를 제공합니다.
| SN | 방법 및 설명 | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| 1 | $mdBottomSheet.show(options); 지정된 옵션이있는 하단 시트를 표시합니다.
|
예
다음 예제는 $mdBottomSheet 서비스 및 하단 시트 사용.
am_bottomsheet.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('bottomSheetController', bottomSheetController);
function bottomSheetController ($scope, $mdBottomSheet) { $scope.openBottomSheet = function() {
$mdBottomSheet.show ({ template: '<md-bottom-sheet>Learn <b>Angular Material</b> @ TutorialsPoint.com!</md-bottom-sheet>' }); }; } </script> </head> <body ng-app = "firstApplication"> <div ng-controller = "bottomSheetController as ctrl" layout = "column"> <md-content class = "md-padding"> <form ng-submit = "$event.preventDefault()">
<md-button class = "md-raised md-primary" ng-click = "openBottomSheet()">
Open Bottom Sheet!
</md-button>
</form>
</md-content>
</div>
</body>
</html>결과
결과를 확인하십시오.
그만큼 md-cardAngular 지시문은 컨테이너 지시문이며 angularjs 애플리케이션에서 카드를 그리는 데 사용됩니다. 다음 표는 md-card에서 사용되는 각도 지시문과 클래스를 나열합니다.
| Sr. 아니요 | 지침 / 등급 및 설명 |
|---|---|
| 1 | <md-card-header> 카드 헤더, 아바타, 텍스트 및 정사각형 이미지를 포함합니다. |
| 2 | <md-card-avatar> 카드 아바타. |
| 삼 | md-user-avatar 사용자 이미지에 대한 클래스입니다. |
| 4 | <md-icon> 아이콘 지시. |
| 5 | <md-card-header-text> 카드 설명에 대한 요소를 포함합니다. |
| 6 | md-title 카드 제목의 클래스입니다. |
| 7 | md-subhead 카드 하위 헤더의 클래스입니다. |
| 8 | <img> 카드 이미지입니다. |
| 9 | <md-card-title> 카드 콘텐츠 제목. |
| 10 | <md-card-title-text> 카드 제목 텍스트 컨테이너. |
| 11 | md-headline 카드 콘텐츠 제목의 클래스입니다. |
| 12 | md-subhead 카드 콘텐츠 하위 헤더의 클래스입니다. |
| 13 | <md-card-title-media> 제목 내 정사각형 이미지. |
| 14 | md-media-sm 작은 이미지를위한 클래스. |
| 15 | md-media-md 중간 이미지 클래스. |
| 16 | md-media-lg 큰 이미지를위한 클래스. |
| 17 | <md-card-content> 카드 내용. |
| 18 | md-media-xl 초대형 이미지 클래스. |
| 19 | <md-card-actions> 카드 액션. |
| 20 | <md-card-icon-actions> 아이콘 동작. |
예
다음 예제는 md-card 지시문의 사용과 카드 클래스의 사용을 보여줍니다.
am_cards.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('cardController', cardController);
function cardController ($scope) {
}
</script>
</head>
<body ng-app = "firstApplication">
<md-card>
<img ng-src = "/html5/images/html5-mini-logo.jpg" class = "md-card-image" alt = "Learn HTML5">
<md-card-header>
<md-card-avatar>
<img class = "md-user-avatar" src = "/html5/images/html5-mini-logo.jpg">
</md-card-avatar>
<md-card-header-text>
<span class = "md-title">HTML5</span>
<span class = "md-subhead">Learn HTML5 @TutorialsPoint.com</span>
</md-card-header-text>
</md-card-header>
<md-card-title>
<md-card-title-text>
<span class = "md-headline">HTML5</span>
</md-card-title-text>
</md-card-title>
<md-card-actions layout = "row" layout-align = "start center">
<md-button>Download</md-button>
<md-button>Start</md-button>
<md-card-icon-actions>
<md-button class = "md-icon-button" aria-label = "icon">
<md-icon class = "material-icons">add</md-icon>
</md-button>
</md-card-icon-actions>
</md-card-actions>
<md-card-content>
<p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01,
XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting
content on the World Wide Web.</p>
<p>HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the
Web Hypertext Application Technology Working Group (WHATWG).</p>
</p>The new standard incorporates features like video playback and
drag-and-drop that have been previously dependent on third-party browser
plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears.</p>
</md-card-content>
</md-card>
</body>
</html>결과
결과를 확인하십시오.
Angular Material은 풍부한 UI 위젯 라이브러리를 제공합니다. 이를 통해 사용자는 응용 프로그램과의 고급 상호 작용 기능을 사용할 수 있습니다.
다음 표는 설명과 함께 몇 가지 중요한 위젯 을 나열합니다.
| Sr. 아니요 | 위젯 및 설명 |
|---|---|
| 1 | 버튼 그만큼 md-buttonAngular 지시문은 선택적 잉크 잔물결이있는 버튼 지시문이며 기본적으로 활성화되어 있습니다. 만약href 또는 ng-href 속성이 제공되면이 지시문이 앵커 요소로 작동합니다. |
| 2 | 체크 박스 그만큼 md-checkboxAngular Directive 인은 확인란 컨트롤로 사용됩니다. |
| 삼 | 함유량 그만큼 md-contentAngular Directive는 컨테이너 요소이며 스크롤 가능한 콘텐츠에 사용됩니다. 그만큼layout-padding 패딩 된 내용을 갖도록 속성을 추가 할 수 있습니다. |
| 4 | 날짜 선택기 그만큼 md-datepickerAngular Directive는 날짜를 선택하기위한 입력 컨트롤입니다. 또한 입력 유효성 검사를 위해 ngMessage를 지원합니다. |
| 5 | 대화 그만큼 md-dialogAngular Directive는 컨테이너 요소이며 대화 상자를 표시하는 데 사용됩니다. 그 요소md-dialog-content 대화 상자의 내용과 md-dialog-actions 대화 작업을 담당합니다. 그만큼 mdDialogAngular Service 인는 사용자에게 정보를 제공하고 결정을 내리는 데 도움이되도록 응용 프로그램에 대한 대화 상자를 엽니 다. |
| 6 | 분할기 그만큼 md-dividerAngular Directive는 규칙 요소이며 목록 및 페이지 레이아웃 내에서 콘텐츠를 그룹화하고 나누기 위해 얇은 경량 규칙을 표시하는 데 사용됩니다. |
| 7 | 명부 그만큼 md-listAngular 지시문은 다음을 포함하는 컨테이너 구성 요소입니다. md-list-item요소. md-list-item 지시문은 md-list 컨테이너의 행 항목에 대한 컨테이너 구성 요소입니다. CSS 클래스md-2-line 과 md-3-line md-list-item에 추가하여 행 높이를 각각 22px 및 40px로 늘릴 수 있습니다. |
| 8 | 메뉴 그만큼 md-menuAngular 지시문은 수행 된 작업의 컨텍스트 내에서 추가 옵션을 표시하는 구성 요소입니다. 그만큼md-menu두 개의 하위 요소가 있습니다. 첫 번째 요소는trigger element메뉴를 여는 데 사용됩니다. 두 번째 요소는md-menu-content메뉴가 열릴 때 메뉴의 내용을 나타냅니다. md-menu-content는 일반적으로 메뉴 항목을 md-menu-item으로 전달합니다. |
| 9 | 메뉴 바 그만큼 md-menu-bar, 여러 메뉴를 포함하는 컨테이너 구성 요소입니다. 메뉴 모음은 운영 체제에서 제공하는 메뉴 효과를 만드는 데 도움이됩니다. |
| 10 | 진행률 표시 줄 그만큼 md-progress-circular 과 md-progress-linear Angular 진행 지시문이며 응용 프로그램에서 콘텐츠로드 메시지를 표시하는 데 사용됩니다. |
| 11 | 라디오 버튼 그만큼 md-radio-group 과 md-radio-buttonAngular 지시문은 애플리케이션에서 라디오 버튼을 표시하는 데 사용됩니다. md-radio-group은 md-radio-button 요소에 대한 그룹화 컨테이너입니다. |
| 12 | 선택 그만큼 md-select, Angular 지시문은 ng-model로 경계가 지정된 선택 상자를 표시하는 데 사용됩니다. |
| 13 | Fab 도구 모음 그만큼 md-fab-toolbarAngular 지시문은 일반적인 작업에 빠르게 액세스 할 수 있도록 요소 또는 버튼의 도구 모음을 표시하는 데 사용됩니다. |
| 14 | 슬라이더 그만큼 md-slider, Angular 지시문은 범위 구성 요소를 표시하는 데 사용됩니다. 두 가지 모드가 있습니다.
|
| 15 | 탭 그만큼 md-tabs 과 md-tabAngular 지시문은 애플리케이션에서 탭을 표시하는 데 사용됩니다. md-tabs는 md-tab 요소에 대한 그룹화 컨테이너입니다. |
| 16 | 도구 모음 그만큼 md-toolbar, Angular 지시문은 일반적으로 제목과 관련 버튼을 표시하는 콘텐츠 위의 영역 인 도구 모음을 표시하는 데 사용됩니다. |
| 17 | 툴팁 Angular Material은 사용자에게 눈에 잘 띄지 않는 툴팁을 표시하는 다양한 특수 방법을 제공합니다. Angular Material은 방향을 지정하는 방법을 제공하며 md-tooltip 지시문은 툴팁을 표시하는 데 사용됩니다. 툴팁은 사용자가 상위 구성 요소에 초점을 맞추거나 마우스를 가져 가거나 터치 할 때마다 활성화됩니다. |
| 18 | 작은 조각 그만큼 md-chips, Angular Directive는 Chip이라는 특수 구성 요소로 사용되며 연락처, 태그 등과 같은 작은 정보 집합을 나타내는 데 사용할 수 있습니다. 사용자 지정 템플릿을 사용하여 칩의 콘텐츠를 렌더링 할 수 있습니다. 이는 커스텀 콘텐츠가있는 md-chip-template 요소를 md-chips의 자식으로 지정함으로써 가능합니다. |
| 19 | 연락 칩 그만큼 md-contact-chips, Angular Directive는 md-chips에 구축 된 입력 컨트롤이며 md-autocomplete요소. 연락처 칩 구성 요소는 가능한 연락처 목록을 반환하는 쿼리 식을 받아들입니다. 사용자는이 중 하나를 선택하여 사용 가능한 칩 목록에 추가 할 수 있습니다. |
레이아웃 지시어
컨테이너 요소의 레이아웃 지시문은 자식의 레이아웃 방향을 지정하는 데 사용됩니다. 다음은 레이아웃 지시문에 할당 할 수있는 값입니다.
row − 항목은 최대 높이 = 100 %로 가로로 배열되고 최대 너비는 컨테이너에있는 항목의 너비입니다.
column − 항목은 max-width = 100 %로 수직으로 배열되고 max-height는 컨테이너에있는 항목의 높이입니다.
레이아웃과 같은 반응 형 디자인이 디바이스 화면 크기에 따라 자동으로 변경되도록하려면 다음 표에 나열된 레이아웃 API를 사용하여보기 너비가있는 디바이스의 레이아웃 방향을 설정할 수 있습니다.
| Sr. 아니요 | 중단 점이 기본값을 재정의 할 때 API 및 장치 너비 |
|---|---|
| 1 | layout 다른 중단 점에 의해 재정의되지 않는 한 기본 레이아웃 방향을 설정합니다. |
| 2 | layout-xs 너비 <600px |
| 삼 | layout-gt-xs 너비> = 600px |
| 4 | layout-sm 600px <= 너비 <960px |
| 5 | layout-gt-sm 너비> = 960px |
| 6 | layout-md 960px <= 너비 <1280px |
| 7 | layout-gt-md 너비> = 1280px |
| 8 | layout-lg 1280px <= 너비 <1920px |
| 9 | layout-gt-lg 너비> = 1920px |
| 10 | layout-xl 너비> = 1920px |
예
다음 예제는 레이아웃 지시문의 사용과 레이아웃의 사용을 보여줍니다.
am_layouts.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.box {
color:white;
padding:10px;
text-align:center;
border-style: inset;
}
.green {
background:green;
}
.blue {
background:blue;
}
</style>
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('layoutController', layoutController);
function layoutController ($scope) {
}
</script>
</head>
<body ng-app = "firstApplication">
<div id = "layoutContainer" ng-controller = "layoutController as ctrl"
style = "height:100px;" ng-cloak>
<div layout = "row" layout-xs = "column">
<div flex class = "green box">Row 1: Item 1</div>
<div flex = "20" class = "blue box">Row 1: Item 2</div>
</div>
<div layout = "column" layout-xs = "column">
<div flex = "33" class = "green box">Column 1: item 1</div>
<div flex = "66" class = "blue box">Column 1: item 2</div>
</div>
</div>
</body>
</html>결과
결과를 확인하십시오.
Flex 지시어
컨테이너 요소의 flex 지시문은 요소의 크기와 위치를 사용자 지정하는 데 사용됩니다. 요소가 부모 컨테이너 및 컨테이너 내의 다른 요소와 관련하여 크기를 조정하는 방법을 정의합니다. 다음은 flex 지시문에 할당 가능한 값입니다.
multiples of 5 − 5, 10, 15 ... 100
33 − 33 %
66 − 66 %
예
다음 예제는 flex 지시문의 사용과 flex의 사용을 보여줍니다.
am_flex.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.box {
color:white;
padding:10px;
text-align:center;
border-style: inset;
}
.green {
background:green;
}
.blue {
background:blue;
}
</style>
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('layoutController', layoutController);
function layoutController ($scope) {
}
</script>
</head>
<body ng-app = "firstApplication">
<div id = "layoutContainer" ng-controller = "layoutController as ctrl"
layout = "row" style = "height:100px;" ng-cloak layout-wrap>
<div flex = "30" class = "green box">
[flex = "30"]
</div>
<div flex = "45" class = "blue box">
[flex = "45"]
</div>
<div flex = "25" class = "green box">
[flex = "25"]
</div>
<div flex = "33" class = "green box">
[flex = "33"]
</div>
<div flex = "66" class = "blue box">
[flex = "66"]
</div>
<div flex = "50" class = "blue box">
[flex = "50"]
</div>
<div flex class = "green box">
[flex]
</div>
</div>
</body>
</html>결과
결과를 확인하십시오.
그만큼 md-input-containerAngular 지시문은 다음을 포함하는 컨테이너 구성 요소입니다. <input> 또는 <textarea>자식으로 요소. 또한 표준 ng-messages 지시문을 사용하여 오류 처리를 지원하고 ngEnter / ngLeave 이벤트 또는 ngShow / ngHide 이벤트를 사용하여 메시지에 애니메이션을 적용합니다.
속성
다음 표는 다양한 속성에 대한 매개 변수와 설명을 나열합니다. md-input-container.
| Sr. 아니요 | 매개 변수 및 설명 |
|---|---|
| 1 | md-maxlength 이 입력에 허용되는 최대 문자 수입니다. 이것이 지정되면 문자 카운터가 입력 아래에 표시됩니다. md-maxlength의 목적은 최대 길이 카운터 텍스트를 표시하는 것입니다. 카운터 텍스트를 원하지 않고 "일반"유효성 검사 만 필요한 경우 "단순"ng-maxlength 또는 maxlength 속성을 사용할 수 있습니다. |
| 2 | aria-label 레이블이없는 경우 Aria-label이 필요합니다. 레이블이없는 경우 경고 메시지가 콘솔에 기록됩니다. |
| 삼 | placeholder 레이블이 없을 때 aria-label을 사용하는 다른 방법입니다. 자리 표시 자 텍스트가 aria-label 속성에 복사됩니다. |
| 4 | md-no-autogrow 존재하면 텍스트 영역이 자동으로 커지지 않습니다. |
| 5 | md-detect-hidden 존재하는 경우 텍스트 영역은 숨겨진 후 표시 될 때 적절한 크기가 조정됩니다. 이는 모든 다이제스트주기에 대한 리플 로우를 보장하기 때문에 성능상의 이유로 기본적으로 꺼져 있습니다. |
예
다음 예제는 md-input-container 지시문의 사용과 입력의 사용을 보여줍니다.
am_inputs.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
</style>
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('inputController', inputController);
function inputController ($scope) {
$scope.project = { comments: 'Comments', }; } </script> </head> <body ng-app = "firstApplication"> <div id = "inputContainer" class = "inputDemo" ng-controller = "inputController as ctrl" ng-cloak> <md-content layout-padding> <form name = "projectForm"> <md-input-container class = "md-block"> <label>User Name</label> <input required name = "userName" ng-model = "project.userName"> <div ng-messages = "projectForm.userName.$error">
<div ng-message = "required">This is required.</div>
</div>
</md-input-container>
<md-input-container class = "md-block">
<label>Email</label>
<input required type = "email" name = "userEmail"
ng-model = "project.userEmail"
minlength = "10" maxlength = "100" ng-pattern = "/^.+@.+\..+$/" /> <div ng-messages = "projectForm.userEmail.$error" role = "alert">
<div ng-message-exp = "['required', 'minlength', 'maxlength',
'pattern']">
Your email must be between 10 and 100 characters long and should
be a valid email address.
</div>
</div>
</md-input-container>
<md-input-container class = "md-block">
<label>Comments</label>
<input md-maxlength = "300" required name = "comments"
ng-model = "project.comments">
<div ng-messages = "projectForm.comments.$error">
<div ng-message = "required">This is required.</div>
<div ng-message = "md-maxlength">The comments has to be less
than 300 characters long.</div>
</div>
</md-input-container>
</form>
</md-content>
</div>
</body>
</html>결과
결과를 확인하십시오.
그만큼 md-iconAngular 지시문은 응용 프로그램에서 벡터 기반 아이콘을 표시하는 구성 요소입니다. Google Material 아이콘을 사용하는 것 외에도 아이콘 글꼴 및 SVG 아이콘을 지원합니다.
속성
다음 표는 다양한 속성에 대한 매개 변수 및 설명을 나열합니다. md-icon.
| Sr. 아니요 | 매개 변수 및 설명 |
|---|---|
| 1 | * md-font-icon 아이콘을 렌더링하는 데 사용되는 글꼴과 관련된 CSS 아이콘의 문자열 이름입니다. 글꼴과 명명 된 CSS 스타일을 미리로드해야합니다. |
| 2 | * md-font-set 글꼴 아이콘 합자의 클래스로 할당되는 글꼴 라이브러리와 관련된 CSS 스타일 이름입니다. 이 값은 클래스 이름을 조회하는 데 사용되는 별칭 일 수도 있습니다. 내부적으로 $ mdIconProvider.fontSet (<alias>)를 사용하여 스타일 이름을 결정합니다. |
| 삼 | * md-svg-src 외부 SVG를로드, 캐시 및 표시하는 데 사용되는 문자열 URL (또는 표현식)입니다. |
| 4 | * md-svg-icon 내부 캐시에서 아이콘을 조회하는 데 사용되는 문자열 이름입니다. 보간 된 문자열 또는 표현식도 사용할 수 있습니다. 특정 세트 이름은 <세트 이름> : <아이콘 이름> 구문과 함께 사용할 수 있습니다. 아이콘 세트를 사용하려면 개발자는 $ mdIconProvider 서비스를 사용하여 세트를 사전 등록해야합니다. |
| 5 | aria-label 이 레이블은 접근성을 나타냅니다. 빈 문자열이 제공되면 aria-hidden = "true"인 접근성 레이어에서 아이콘이 숨겨집니다. 아이콘에 aria-label이없고 부모 요소에 레이블이 없으면 콘솔에 경고가 기록됩니다. |
| 6 | alt 이 레이블은 접근성을 나타냅니다. 빈 문자열이 제공되면 aria-hidden = "true"인 접근성 레이어에서 아이콘이 숨겨집니다. 아이콘에 alt가없고 부모 요소에 레이블이 없으면 콘솔에 경고가 기록됩니다. |
예
다음 예제는 md-icons 지시문의 사용과 아이콘의 사용을 보여줍니다.
am_icons.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.iconDemo .glyph {
border-bottom: 1px dotted #ccc;
padding: 10px 0 20px;
margin-bottom: 20px;
}
.iconDemo .preview-glyphs {
display: flex;
flex-direction: row;
}
.iconDemo .step {
flex-grow: 1;
line-height: 0.5;
}
.iconDemo .material-icons.md-18 {
font-size: 18px;
}
.iconDemo .material-icons.md-24 {
font-size: 24px;
}
.iconDemo .material-icons.md-36 {
font-size: 36px;
}
.iconDemo .material-icons.md-48 {
font-size: 48px;
}
.iconDemo .material-icons.md-dark {
color: rgba(0, 0, 0, 0.54);
}
.iconDemo .material-icons.md-dark.md-inactive {
color: rgba(0, 0, 0, 0.26);
}
.iconDemo .material-icons.md-light {
color: white;
}
.iconDemo .material-icons.md-light.md-inactive {
color: rgba(255, 255, 255, 0.3);
}
</style>
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('iconController', iconController);
function iconController ($scope) {
var iconData = [
{name: 'accessibility' , color: "#777" },
{name: 'question_answer', color: "rgb(89, 226, 168)" },
{name: 'backup' , color: "#A00" },
{name: 'email' , color: "#00A" }
];
$scope.fonts = [].concat(iconData); $scope.sizes = [
{size:"md-18",padding:0},
{size:"md-24",padding:2},
{size:"md-36",padding:6},
{size:"md-48",padding:10}
];
}
</script>
</head>
<body ng-app = "firstApplication">
<div id = "iconContainer" class = "iconDemo"
ng-controller = "iconController as ctrl" ng-cloak>
<div class = "glyph" ng-repeat = "font in fonts" layout = "row">
<div ng-repeat = "it in sizes" flex layout-align = "center center"
style = "text-align: center;" layout = "column">
<div flex></div>
<div class = "preview-glyphs">
<md-icon ng-style = "{color: font.color}"
aria-label = "{{ font.name }}"
class = "material-icons step"
ng-class = "it.size">
{{ font.name }}
</md-icon>
</div>
</div>
</div>
</div>
</body>
</html>결과
결과를 확인하십시오.
그만큼 md-grid-listAngular 지시문은 다양한 화면 크기에 맞게 콘텐츠를 레이아웃하기위한 구성 요소입니다. 그리드에는 바탕 화면 크기 화면에 12 개 열, 태블릿 크기 화면에 8 개 열, 전화기 크기 화면에 4 개 열이 있으며 각 크기에는 미리 정의 된 여백과 거터가 있습니다. 셀은 정의 된 순서대로 연속적으로 배열됩니다.
속성
다음 표는 다양한 속성에 대한 매개 변수 및 설명을 나열합니다. md-grid-list.
| Sr. 아니요 | 매개 변수 및 설명 |
|---|---|
| 1 | * md-cols 그리드의 열 수입니다. |
| 2 | * md-row-height 다음 중 하나
|
| 삼 | md-gutter CSS 단위에서 타일 사이의 공간 크기 (기본값 1px). |
| 4 | md-on-layout 레이아웃 후 평가할 표현식입니다. 이벤트 개체는 $ event로 사용할 수 있으며 성능 정보를 포함합니다. |
예
다음 예제는 md-grid-list 지시문 및 그리드 사용.
am_grid.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('gridController', gridController);
function gridController ($scope) {
var COLORS = [
'#ffebee', '#ffcdd2', '#ef9a9a', '#e57373', '#ef5350', '#f44336',
'#e53935', '#d32f2f', '#c62828', '#b71c1c', '#ff8a80', '#ff5252',
'#ff1744', '#d50000', '#f8bbd0', '#f48fb1', '#f06292', '#ec407a',
'#e91e63', '#d81b60', '#c2185b', '#ad1457', '#880e4f', '#ff80ab',
'#ff4081', '#f50057', '#c51162', '#e1bee7', '#ce93d8', '#ba68c8',
'#ab47bc', '#9c27b0', '#8e24aa', '#7b1fa2', '#4a148c', '#ea80fc',
'#e040fb', '#d500f9', '#aa00ff', '#ede7f6', '#d1c4e9', '#b39ddb',
'#9575cd', '#7e57c2', '#673ab7', '#5e35b1', '#4527a0', '#311b92',
'#b388ff', '#7c4dff', '#651fff', '#6200ea', '#c5cae9', '#9fa8da',
'#7986cb', '#5c6bc0', '#3f51b5', '#3949ab', '#303f9f', '#283593',
'#1a237e', '#8c9eff', '#536dfe', '#3d5afe', '#304ffe', '#e3f2fd',
'#bbdefb', '#90caf9', '#64b5f6', '#42a5f5', '#2196f3', '#1e88e5',
'#1976d2', '#1565c0', '#0d47a1', '#82b1ff', '#448aff', '#2979ff',
'#2962ff', '#b3e5fc', '#81d4fa', '#4fc3f7', '#29b6f6', '#03a9f4',
'#039be5', '#0288d1', '#0277bd', '#01579b', '#80d8ff', '#40c4ff',
'#00b0ff', '#0091ea', '#e0f7fa', '#b2ebf2', '#80deea', '#4dd0e1',
'#26c6da', '#00bcd4', '#00acc1', '#0097a7', '#00838f', '#006064',
'#84ffff', '#18ffff', '#00e5ff', '#00b8d4', '#e0f2f1', '#b2dfdb',
'#80cbc4', '#4db6ac', '#26a69a', '#009688', '#00897b', '#00796b',
'#00695c', '#a7ffeb', '#64ffda', '#1de9b6', '#00bfa5', '#e8f5e9',
'#c8e6c9', '#a5d6a7', '#81c784', '#66bb6a', '#4caf50', '#43a047',
'#388e3c', '#2e7d32', '#1b5e20', '#b9f6ca', '#69f0ae', '#00e676',
'#00c853', '#f1f8e9', '#dcedc8', '#c5e1a5', '#aed581', '#9ccc65',
'#8bc34a', '#7cb342', '#689f38', '#558b2f', '#33691e', '#ccff90',
'#b2ff59', '#76ff03', '#64dd17', '#f9fbe7', '#f0f4c3', '#e6ee9c',
'#dce775', '#d4e157', '#cddc39', '#c0ca33', '#afb42b', '#9e9d24',
'#827717', '#f4ff81', '#eeff41', '#c6ff00', '#aeea00', '#fffde7',
'#fff9c4', '#fff59d', '#fff176', '#ffee58', '#ffeb3b', '#fdd835',
'#fbc02d', '#f9a825', '#f57f17', '#ffff8d', '#ffff00', '#ffea00',
'#ffd600', '#fff8e1', '#ffecb3', '#ffe082', '#ffd54f', '#ffca28',
'#ffc107', '#ffb300', '#ffa000', '#ff8f00', '#ff6f00', '#ffe57f',
'#ffd740', '#ffc400', '#ffab00', '#fff3e0', '#ffe0b2', '#ffcc80',
'#ffb74d', '#ffa726', '#ff9800', '#fb8c00', '#f57c00', '#ef6c00',
'#e65100', '#ffd180', '#ffab40', '#ff9100', '#ff6d00', '#fbe9e7',
'#ffccbc', '#ffab91', '#ff8a65', '#ff7043', '#ff5722', '#f4511e',
'#e64a19', '#d84315', '#bf360c', '#ff9e80', '#ff6e40', '#ff3d00',
'#dd2c00', '#d7ccc8', '#bcaaa4', '#795548', '#d7ccc8', '#bcaaa4',
'#8d6e63', '#eceff1', '#cfd8dc', '#b0bec5', '#90a4ae', '#78909c',
'#607d8b', '#546e7a', '#cfd8dc', '#b0bec5', '#78909c'
];
this.colorTiles = (function() {
var tiles = [];
for (var i = 0; i < 46; i++) {
tiles.push ({
color: randomColor(),
colspan: randomSpan(),
rowspan: randomSpan()
});
}
return tiles;
})();
function randomColor() {
return COLORS[Math.floor(Math.random() * COLORS.length)];
}
function randomSpan() {
var r = Math.random();
if (r < 0.8) {
return 1;
} else if (r < 0.9) {
return 2;
} else {
return 3;
}
}
}
</script>
</head>
<body ng-app = "firstApplication">
<div id = "gridContainer" ng-controller = "gridController as ctrl" ng-cloak>
<md-content layout-padding>
<md-grid-list
md-cols-gt-md = "12" md-cols-sm = "3" md-cols-md = "8"
md-row-height-gt-md = "1:1" md-row-height = "4:3"
md-gutter-gt-md = "16px" md-gutter-gt-sm = "8px" md-gutter = "4px">
<md-grid-tile
ng-repeat = "tile in ctrl.colorTiles"
ng-style = "{
'background': tile.color
}"
md-colspan-gt-sm = "{{tile.colspan}}"
md-rowspan-gt-sm = "{{tile.rowspan}}">
</md-grid-tile>
</md-grid-list>
</md-content>
</div>
</body>
</html>결과
결과를 확인하십시오.
효과를 보려면 화면 크기를 조정하십시오.
그만큼 md-sidenav, Angular 지시문은 프로그래밍 방식으로 표시하거나 숨길 수있는 컨테이너 구성 요소를 표시하는 데 사용됩니다. 기본적으로 기본 콘텐츠 영역의 맨 위로 슬라이드됩니다.
속성
다음 표는 다양한 속성에 대한 매개 변수 및 설명을 나열합니다. md-sidenav
| Sr. 아니요 | 매개 변수 및 설명 |
|---|---|
| 1 | md-is-open 사이드 내비게이션이 열려 있는지 여부에 바인딩 된 모델입니다. |
| 2 | md-component-id $ mdSidenav 서비스와 함께 사용할 componentId입니다. |
| 삼 | md-is-locked-open 이 표현식이 true로 평가되면 사이드 내비게이션이 '잠금'열려 있습니다. 콘텐츠 위에 표시되는 대신 콘텐츠의 흐름에 빠집니다. 이것은 is-open 속성을 대체합니다. $ mdMedia () 서비스는 미디어 쿼리 또는 sm, gt-sm, md, gt-md, lg 또는 gt-lg 사전 설정 중 하나가 제공 될 수있는 is-locked-open 속성에 노출됩니다. Examples − |
예
다음 예는 md-sidenav 또한 사용 sidenav 구성 요소.
am_sidenav.htm
<html lang = "en">
<head>
<link rel = "stylesheet" href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('sideNavController', sideNavController);
function sideNavController ($scope, $mdSidenav) {
$scope.openLeftMenu = function() { $mdSidenav('left').toggle();
};
$scope.openRightMenu = function() { $mdSidenav('right').toggle();
};
}
</script>
</head>
<body ng-app = "firstApplication">
<div id = "sideNavContainer" ng-controller = "sideNavController as ctrl"
layout = "row" ng-cloak>
<md-sidenav md-component-id = "left" class = "md-sidenav-left">
Welcome to TutorialsPoint.Com</md-sidenav>
<md-content>
<md-button ng-click = "openLeftMenu()">Open Left Menu</md-button>
<md-button ng-click = "openRightMenu()">Open Right Menu</md-button>
</md-content>
<md-sidenav md-component-id = "right" class = "md-sidenav-right">
<md-button href = "http://google.com">Google</md-button>
</md-sidenav>
</div>
</body>
</html>결과
결과를 확인하십시오.
그만큼 md-fab-speed-dialAngular 지시문은 일반적인 작업에 빠르게 액세스 할 수 있도록 일련의 팝업 요소 또는 버튼을 표시하는 데 사용됩니다.
속성
다음 표는 다양한 속성에 대한 매개 변수 및 설명을 나열합니다. md-fab-speed-dial.
| Sr. 아니요 | 매개 변수 및 설명 |
|---|---|
| 1 | * md-direction 트리거 요소와 관련하여 단축 다이얼이 나타나는 방향을 결정합니다. |
| 2 | md-open 이렇게하면 단축 다이얼 표시 여부를 프로그래밍 방식으로 제어 할 수 있습니다. |
예
다음 예제는 md-fab-speed-dial 지시문의 사용과 단축 다이얼의 사용을 보여줍니다.
am_speeddial.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.fabSpeedDial .text-capitalize {
text-transform: capitalize;
}
.fabSpeedDial .md-fab:hover, .fabSpeedDialdemoBasicUsage .md-fab.md-focused {
background-color: #000 !important;
}
.fabSpeedDial p.note {
font-size: 1.2rem;
}
.fabSpeedDial .lock-size {
min-width: 300px;
min-height: 300px;
width: 300px;
height: 300px;
margin-left: auto;
margin-right: auto;
}
</style>
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('speedDialController', speedDialController);
function speedDialController ($scope) {
this.topDirections = ['left', 'up'];
this.bottomDirections = ['down', 'right'];
this.isOpen = false;
this.availableModes = ['md-fling', 'md-scale'];
this.selectedMode = 'md-fling';
this.availableDirections = ['up', 'down', 'left', 'right'];
this.selectedDirection = 'up';
}
</script>
</head>
<body ng-app = "firstApplication">
<div class = "fabSpeedDial" id = "speedDialContainer"
ng-controller = "speedDialController as ctrl" layout = "row" ng-cloak>
<md-content>
<div class = "lock-size" layout = "row" layout-align = "center center">
<md-fab-speed-dial md-open = "ctrl.isOpen"
md-direction = "{{ctrl.selectedDirection}}"
ng-class = "ctrl.selectedMode">
<md-fab-trigger>
<md-button aria-label = "menu" class = "md-fab md-warn">
<md-icon class = "material-icons">menu</md-icon>
</md-button>
</md-fab-trigger>
<md-fab-actions>
<md-button aria-label = "Add" class = "md-fab md-raised md-mini
md-accent">
<md-icon class = "material-icons" aria-label = "Add">
add</md-icon>
</md-button>
<md-button aria-label = "Insert Link" class = "md-fab md-raised
md-mini md-accent">
<md-icon class = "material-icons" aria-label = "Insert Link">
insert_link</md-icon>
</md-button>
<md-button aria-label = "Edit" class = "md-fab md-raised md-mini
md-accent">
<md-icon class = "material-icons" aria-label = "Edit">
mode_edit</md-icon>
</md-button>
</md-fab-actions>
</md-fab-speed-dial>
</div>
<div layout = "row" layout-align = "space-around">
<div layout = "column" layout-align = "start center">
<b>Direction</b>
<md-radio-group ng-model = "ctrl.selectedDirection">
<md-radio-button ng-repeat = "direction in ctrl.availableDirections"
ng-value = "direction" class = "text-capitalize">
{{direction}}
</md-radio-button>
</md-radio-group>
</div>
<div layout = "column" layout-align = "start center">
<b>Open/Closed</b>
<md-checkbox ng-model = "ctrl.isOpen">
Open
</md-checkbox>
</div>
<div layout = "column" layout-align = "start center">
<b>Animation Modes</b>
<md-radio-group ng-model = "ctrl.selectedMode">
<md-radio-button ng-repeat = "mode in ctrl.availableModes"
ng-value = "mode">
{{mode}}
</md-radio-button>
</md-radio-group>
</div>
</div>
</md-content>
</div>
</body>
</html>결과
결과를 확인하십시오.
그만큼 md-subheaderAngular 지시문은 섹션의 하위 헤더를 표시하는 데 사용됩니다.
예
다음 예제는 md-subheader의 사용과 하위 헤더 구성 요소의 사용을 보여줍니다.
am_subheaders.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('subheaderController', subheaderController);
function subheaderController ($scope) {
$scope.fruitNames = ['Apple', 'Banana', 'Orange']; $scope.vegNames = ['Carrot', 'Potato', 'Cabbage'];
$scope.eateries = ['Milk', 'Bread'];
}
</script>
</head>
<body ng-app = "firstApplication">
<div id = "subheaderContainer" ng-controller = "subheaderController as ctrl"
layout = "column" flex layout-fill ng-cloak>
<md-toolbar md-scroll-shrink>
<div class = "md-toolbar-tools">Items</div>
</md-toolbar>
<md-content style = "height: 600px;">
<section>
<md-subheader class = "md-primary">Fruits</md-subheader>
<md-list layout-padding>
<md-list-item ng-repeat = "fruits in fruitNames">
<div>
<p>{{fruits}}</p>
</div>
</md-list-item>
</md-list>
</section>
<section>
<md-subheader class = "md-warn">Vegetables</md-subheader>
<md-list layout-padding>
<md-list-item ng-repeat = "veg in vegNames">
<div>
<p>{{veg}}</p>
</div>
</md-list-item>
</md-list>
</section>
<section>
<md-subheader>Eateries</md-subheader>
<md-list layout-padding>
<md-list-item ng-repeat = "eatery in eateries">
<div>
<p>{{eatery}}</p>
</div>
</md-list-item>
</md-list>
</section>
</md-content>
</div>
</body>
</html>결과
결과를 확인하십시오.
Swipe 기능은 모바일 장치를위한 것입니다. 다음 지시문은 스 와이프를 처리하는 데 사용됩니다.
md-swipe-down, Angular 지시문은 요소가 아래로 스 와이프 될 때 사용자 정의 동작을 지정하는 데 사용됩니다.
md-swipe-left, Angular 지시문은 요소를 왼쪽으로 스 와이프 할 때 사용자 지정 동작을 지정하는 데 사용됩니다.
md-swipe-right, Angular 지시문은 요소를 오른쪽으로 스 와이프 할 때 사용자 지정 동작을 지정하는 데 사용됩니다.
md-swipe-up, Angular 지시문은 요소가 위로 스 와이프 될 때 사용자 정의 동작을 지정하는 데 사용됩니다.
예
다음 예제는 md-swipe- *의 사용과 스 와이프 구성 요소의 사용을 보여줍니다.
am_swipes.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.swipeContainer .demo-swipe {
padding: 20px 10px;
}
.swipeContainer .no-select {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('swipeController', swipeController);
function swipeController ($scope) {
$scope.onSwipeLeft = function(ev) { alert('Swiped Left!'); }; $scope.onSwipeRight = function(ev) {
alert('Swiped Right!');
};
$scope.onSwipeUp = function(ev) { alert('Swiped Up!'); }; $scope.onSwipeDown = function(ev) {
alert('Swiped Down!');
};
}
</script>
</head>
<body ng-app = "firstApplication">
<md-card>
<div id = "swipeContainer" ng-controller = "swipeController as ctrl"
layout = "row" ng-cloak>
<div flex>
<div class = "demo-swipe" md-swipe-left = "onSwipeLeft()">
<span class = "no-select">Swipe me to the left</span>
<md-icon md-font-icon = "android" aria-label = "android"></md-icon>
</div>
<md-divider></md-divider>
<div class = "demo-swipe" md-swipe-right = "onSwipeRight()">
<span class = "no-select">Swipe me to the right</span>
</div>
</div>
<md-divider></md-divider>
<div flex layout = "row">
<div flex layout = "row" layout-align = "center center"
class = "demo-swipe" md-swipe-up = "onSwipeUp()">
<span class = "no-select">Swipe me up</span>
</div>
<md-divider></md-divider>
<div flex layout = "row" layout-align = "center center"
class = "demo-swipe" md-swipe-down = "onSwipeDown()">
<span class = "no-select">Swipe me down</span>
</div>
</div>
</div>
</md-card>
</body>
</html>결과
결과를 확인하십시오.
그만큼 md-switch, Angular 지시문은 스위치를 표시하는 데 사용됩니다.
속성
다음 표는 다양한 속성에 대한 매개 변수 및 설명을 나열합니다. md-switch.
| Sr. 아니요 | 매개 변수 및 설명 |
|---|---|
| 1 | * ng-model 데이터 바인딩 할 할당 가능한 각도 식입니다. |
| 2 | name 컨트롤이 게시되는 양식의 속성 이름입니다. |
| 삼 | ng-true-value 선택시 표현식이 설정되어야하는 값입니다. |
| 4 | ng-false-value 선택하지 않을 때 표현식이 설정되어야하는 값입니다. |
| 5 | ng-change 입력 요소와의 사용자 상호 작용으로 인해 입력이 변경 될 때 실행할 Angular 표현식입니다. |
| 6 | ng-disabled 식에 따라 En / Disable. |
| 7 | md-no-ink 속성 사용은 잔물결 잉크 효과 사용을 나타냅니다. |
| 8 | aria-label 이렇게하면 접근성을 위해 화면 판독기에서 사용하는 단추 레이블이 게시됩니다. 기본값은 스위치의 텍스트입니다. |
예
다음 예제는 md-swipe- *의 사용과 스 와이프 구성 요소의 사용을 보여줍니다.
am_switches.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('switchController', switchController);
function switchController ($scope) { $scope.data = {
switch1: true,
switch2: false,
switch3: false,
switch4: true,
switch5: true,
switch6: false
};
$scope.message = 'false'; $scope.onChange = function(state) {
$scope.message = state;
};
}
</script>
</head>
<body ng-app = "firstApplication">
<div id = "switchContainer" ng-controller = "switchController as ctrl"
layout = "column" ng-cloak>
<md-switch ng-model = "data.switch1" aria-label = "Switch 1">
Switch 1: {{ data.switch1 }}
</md-switch>
<md-switch ng-model = "data.switch2" aria-label = "Switch 2"
ng-true-value = "'true'" ng-false-value = "'false'" class = "md-warn">
Switch 2 (md-warn): {{ data.switch2 }}
</md-switch>
<md-switch ng-disabled = "true" aria-label = "Disabled switch"
ng-model = "disabledModel">
Switch 3 (Disabled)
</md-switch>
<md-switch ng-disabled = "true" aria-label = "Disabled active switch"
ng-model = "data.switch4">
Switch 4 (Disabled, Active)
</md-switch>
<md-switch class = "md-primary" md-no-ink aria-label = "Switch No Ink"
ng-model = "data.switch5">
Switch 5 (md-primary): No Ink
</md-switch>
<md-switch ng-model = "data.switch6" aria-label = "Switch 6"
ng-change = "onChange(data.switch6)">
Switch 6 : {{ message }}
</md-switch>
</div>
</body>
</html>결과
결과를 확인하십시오.
Angular Material 구성 요소는 md-primary, md-accent, md-warn과 같은 인텐션 그룹 클래스와 md-hue-1, md-hue-2 또는 md-hue-3과 같은 색상 차이에 대한 추가 클래스를 사용합니다. 다음 구성 요소는 위에서 언급 한 클래스의 사용을 지원합니다.
- md-button
- md-checkbox
- md-progress-circular
- md-progress-linear
- md-radio-button
- md-slider
- md-switch
- md-tabs
- md-text-float
- md-toolbar
응용 프로그램 구성 중에 $ mdThemingProvider를 사용하여 테마를 구성 할 수 있습니다. 다음 속성을 사용하여 다른 색상 팔레트를 할당 할 수 있습니다.
- primaryPalette
- accentPalette
- warnPalette
- backgroundPalette
예
다음 예제는 Angular JS 애플리케이션에서 테마 사용을 보여줍니다.
am_themes.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('themeController', themeController)
.config(function($mdThemingProvider) { $mdThemingProvider.theme('customTheme')
.primaryPalette('grey')
.accentPalette('orange')
.warnPalette('red');
});
function themeController ($scope) {
}
</script>
</head>
<body ng-app = "firstApplication">
<div id = "themeContainer" ng-controller = "themeController as ctrl" ng-cloak>
<md-toolbar class = "md-primary">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Default Theme</h2>
</div>
</md-toolbar>
<hr/>
<md-card>
<md-card-content layout = "column">
<md-toolbar class = "md-primary">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-primary style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-primary md-hue-1">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-primary md-hue-1 style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-primary md-hue-2">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-primary md-hue-2 style</h2>
</div></md-toolbar>
<md-toolbar class = "md-accent">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-accent style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-accent md-hue-1">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-accent md-hue-1 style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-accent md-hue-2">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-accent md-hue-2 style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-warn">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-warn style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-warn md-hue-1">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-warn md-hue-1 style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-warn md-hue-2">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-warn md-hue-2 style</h2>
</div>
</md-toolbar>
</md-card-content>
</md-card>
<div md-theme = "customTheme">
<md-toolbar class = "md-primary">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Custom Theme</h2>
</div>
</md-toolbar>
<hr/>
<md-card>
<md-card-content layout = "column">
<md-toolbar class = "md-primary">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-primary style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-primary md-hue-1">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-primary md-hue-1 style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-primary md-hue-2">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-primary md-hue-2 style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-accent">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-accent style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-accent md-hue-1">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-accent md-hue-1 style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-accent md-hue-2">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-accent md-hue-2 style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-warn">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-warn style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-warn md-hue-1">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-warn md-hue-1 style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-warn md-hue-2">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-warn md-hue-2 style</h2>
</div>
</md-toolbar>
</md-card-content>
</md-card>
</div>
</div>
</body>
</html>결과
결과를 확인하십시오.
Angular Material은 사용자에게 눈에 띄지 않는 경고를 표시하는 다양한 특수 방법을 제공합니다. 또한 그들에게 용어 토스트를 제공합니다. $ mdToast 서비스는 토스트를 표시하는 데 사용됩니다.
예
다음 예제는 토스트 사용을 보여줍니다.
am_toasts.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('toastController', toastController);
function toastController ($scope, $mdToast, $document) { $scope.showToast1 = function() {
$mdToast.show ( $mdToast.simple()
.textContent('Hello World!')
.hideDelay(3000)
);
};
$scope.showToast2 = function() { var toast = $mdToast.simple()
.textContent('Hello World!')
.action('OK')
.highlightAction(false);
$mdToast.show(toast).then(function(response) {
if ( response == 'ok' ) {
alert('You clicked \'OK\'.');
}
});
}
}
</script>
</head>
<body ng-app = "firstApplication">
<div id = "toastContainer" ng-controller = "toastController as ctrl"
layout = "row" ng-cloak>
<md-button ng-click = "showToast1()">Show Simple Alert</md-button>
<md-button ng-click = "showToast2()">Show Alert with callback</md-button>
</div>
</body>
</html>결과
결과를 확인하십시오.
Angular Material은 Angular JS 응용 프로그램에서 시각적 일관성을 만드는 데 사용할 수있는 다양한 타이포그래피 CSS 클래스를 제공합니다.
다음 표는 설명과 함께 다양한 클래스를 나열합니다.
| Sr. 아니요 | 클래스 이름 및 설명 |
|---|---|
| 1 | md-display-1 일반 34px로 텍스트를 표시합니다. |
| 2 | md-display-2 일반 45px로 텍스트를 표시합니다. |
| 삼 | 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 일반 14px로 텍스트를 표시합니다. |
| 9 | md-body-2 중간 14px로 텍스트를 표시합니다. |
| 10 | md-button Medium 14px로 버튼을 표시합니다. |
| 11 | md-caption 일반 12px로 텍스트를 표시합니다. |
예
다음 예제는 타이포그래피 CSS 클래스의 사용을 보여줍니다.
am_typography.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('typographyController', typographyController);
function typographyController ($scope) {
}
</script>
</head>
<body ng-app = "firstApplication">
<div class = "frameContainer" ng-controller = "typographyController as ctrl"
layout = "column" layout-padding layout-wrap layout-fill
style = "padding-bottom: 32px;" ng-cloak>
<p class = "md-display-4">.md-display-4</p>
<p class = "md-display-3">.md-display-3</p>
<p class = "md-display-2">.md-display-2</p>
<p class = "md-display-1">.md-display-1</p>
<p class = "md-headline">.md-headline</p>
<p class = "md-title">.md-title</p>
<p class = "md-subhead">.md-subhead</p>
<p class = "md-body-1">.md-body-1</p>
<p class = "md-body-2">.md-body-2</p>
<md-button>.md-button</md-button>
<p class = "md-caption">.md-caption</p>
</div>
</body>
</html>결과
결과를 확인하십시오.
그만큼 md-virtual-repeat-container md-virtual-repeat 구성 요소의 스크롤 컨테이너입니다.
속성
다음 표는 다양한 속성에 대한 매개 변수 및 설명을 나열합니다. md-virtual-repeat-container.
| Sr. 아니요 | 매개 변수 및 설명 |
|---|---|
| 1 | md-top-index 스크롤 컨테이너의 맨 위에있는 항목의 인덱스를 $ scope에 바인딩합니다. 스크롤 위치를 읽고 설정할 수 있습니다. |
| 2 | md-orient-horizontal 컨테이너를 가로로 스크롤해야하는지 여부를 결정합니다 (기본값은 방향 및 세로 스크롤). |
| 삼 | md-auto-shrink 있는 경우 컨테이너는 항목 수가 원래 크기보다 적을 때 항목 수에 맞게 축소됩니다. |
| 4 | md-auto-shrink-min md-auto-shrink가 축소되는 최소 항목 수 (기본값 : 0). |
md- 가상 반복
가상 반복은 ng-repeat를 대체하여 컨테이너를 채우고 사용자가 스크롤 할 때 재사용 할 수있는 충분한 html 요소 만 렌더링합니다.
속성
다음 표는 다양한 속성에 대한 매개 변수 및 설명을 나열합니다. md-virtual-repeat.
| Sr. 아니요 | 매개 변수 및 설명 |
|---|---|
| 1 | md-item-size 반복되는 요소의 높이 또는 너비 (각 요소에 대해 동일해야 함). 이것은 선택 사항입니다. 이것은 누락 된 경우 dom에서 크기를 읽으려고 시도하지만 반복되는 모든 노드의 높이 또는 너비가 동일하다고 가정합니다. |
| 2 | md-extra-name 현재 반복 된 항목이 반복 된 범위에 할당 될 수있는 추가 이름으로 평가됩니다 (md-autocomplete에서 사용하는 데 필요함). |
| 삼 | md-on-demand 존재하는 경우 md-virtual-repeat 인수는 배열이 아닌 행을 가져올 수있는 객체로,이 객체는 두 (2) 개의 메소드로 다음 인터페이스를 구현해야합니다.
|
예
다음 예제는 가상 반복의 사용을 보여줍니다.
am_virtualrepeat.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.vrepeatContainer #horizontal-container {
height: 100px;
width: 830px;
}
.vrepeatContainer #vertical-container {
height: 292px;
width: 400px;
}
.vrepeatContainer .repeated-item-horizontal {
border-right: 1px solid #ddd;
box-sizing: border-box;
display: inline-block;
height: 84px;
padding-top: 35px;
text-align: center;
width: 50px;
}
.vrepeatContainer .repeated-item-vertical {
border-bottom: 1px solid #ddd;
box-sizing: border-box;
height: 40px;
padding-top: 10px;
}
.vrepeatContainer md-content {
margin: 16px;
}
.vrepeatContainer md-virtual-repeat-container {
border: solid 1px grey;
}
</style>
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('vrepeatController', vrepeatController);
function vrepeatController ($scope) {
this.items = [];
for (var i = 0; i < 1000; i++) {
this.items.push(i);
}
}
</script>
</head>
<body ng-app = "firstApplication">
<div class = "vrepeatContainer" ng-controller = "vrepeatController as ctrl"
ng-cloak>
<md-content layout = "column">
<h2>Horizontal Repeat</h2>
<md-virtual-repeat-container id = "horizontal-container" md-orient-horizontal>
<div md-virtual-repeat = "item in ctrl.items"
class = "repeated-item-horizontal" flex>
{{item}}
</div>
</md-virtual-repeat-container>
<h2>Vertical Repeat</h2>
<md-virtual-repeat-container id = "vertical-container">
<div md-virtual-repeat = "item in ctrl.items"
class = "repeated-item-vertical" flex>
{{item}}
</div>
</md-virtual-repeat-container>
</md-content>
</div>
</body>
</html>결과
결과를 확인하십시오.
Angular Material에는 그림자가있는 종이와 같은 카드로 컨테이너를 표시하는 몇 가지 특수 클래스가 있습니다.
다음 표는 설명과 함께 다양한 클래스를 나열합니다.
| Sr. 아니요 | 클래스 이름 및 설명 |
|---|---|
| 1 | md-whiteframe-1dp 이렇게하면 테두리가 1px 인 그림자가있는 HTML 콘텐츠의 컨테이너 스타일이 지정됩니다. zdepth 1을 추가합니다. |
| 2 | md-whiteframe-2dp 2px 테두리가있는 그림자가있는 모든 HTML 콘텐츠의 컨테이너 스타일을 지정합니다. 2의 zdepth를 추가합니다. |
| 삼 | md-whiteframe-3dp 3px 테두리가있는 그림자가있는 HTML 콘텐츠의 컨테이너 스타일을 지정합니다. 3의 zdepth를 추가합니다. |
| 4 | md-whiteframe-4dp 4px 테두리가있는 그림자가있는 모든 HTML 콘텐츠의 컨테이너 스타일을 지정합니다. 4의 zdepth를 추가합니다. |
| 5 | md-whiteframe-5dp 5px 테두리가있는 그림자가있는 HTML 콘텐츠의 컨테이너 스타일을 지정합니다. zdepth를 5로 추가합니다. |
| 6 | md-whiteframe-6dp 6px 테두리가있는 그림자가있는 모든 HTML 콘텐츠의 컨테이너 스타일을 지정합니다. zdepth 6을 추가합니다. |
| 7 | md-whiteframe-7dp 7px 테두리가있는 그림자가있는 HTML 콘텐츠의 컨테이너 스타일을 지정합니다. zdepth 7을 추가합니다. |
| 8 | md-whiteframe-8dp 8px 테두리가있는 그림자가있는 HTML 콘텐츠의 컨테이너 스타일을 지정합니다. 8의 zdepth를 추가합니다. |
| 9 | md-whiteframe-9dp 9px 테두리가있는 그림자가있는 HTML 콘텐츠의 컨테이너 스타일을 지정합니다. zdepth를 9로 추가합니다. |
| 10 | md-whiteframe-10dp 10px 테두리가있는 그림자가있는 HTML 콘텐츠의 컨테이너 스타일을 지정합니다. z 깊이 10을 추가합니다. |
| 11 | md-whiteframe-11dp 11px 테두리가있는 그림자가있는 모든 HTML 콘텐츠의 컨테이너 스타일을 지정합니다. z 깊이 11을 추가합니다. |
| 12 | md-whiteframe-12dp 12px 테두리가있는 그림자가있는 HTML 콘텐츠의 컨테이너 스타일을 지정합니다. z 깊이 12를 추가합니다. |
| 13 | md-whiteframe-13dp 13px 테두리가있는 그림자가있는 모든 HTML 콘텐츠의 컨테이너 스타일을 지정합니다. z 깊이 13을 추가합니다. |
| 14 | md-whiteframe-14dp 14px 테두리가있는 그림자가있는 HTML 콘텐츠의 컨테이너 스타일을 지정합니다. z 깊이 14를 추가합니다. |
| 15 | md-whiteframe-15dp 이렇게하면 테두리가 15px 인 그림자가있는 HTML 콘텐츠의 컨테이너 스타일이 지정됩니다. z 깊이 15를 추가합니다. |
| 16 | md-whiteframe-16dp 16px 테두리가있는 그림자가있는 모든 HTML 콘텐츠의 컨테이너 스타일을 지정합니다. z 깊이 16을 추가합니다. |
| 17 | md-whiteframe-17dp 이렇게하면 테두리가 17px 인 그림자가있는 HTML 콘텐츠의 컨테이너 스타일이 지정됩니다. z 깊이 17을 추가합니다. |
| 18 | md-whiteframe-18dp 18px 테두리가있는 그림자가있는 모든 HTML 콘텐츠의 컨테이너 스타일을 지정합니다. z 깊이 18을 추가합니다. |
| 19 | md-whiteframe-19dp 이렇게하면 테두리가 19px 인 그림자가있는 HTML 콘텐츠의 컨테이너 스타일이 지정됩니다. z 깊이 19를 추가합니다. |
| 20 | md-whiteframe-20dp 20px 테두리가있는 그림자가있는 HTML 콘텐츠의 컨테이너 스타일을 지정합니다. z 깊이 20을 추가합니다. |
| 21 | md-whiteframe-21dp 21px 테두리가있는 그림자가있는 HTML 콘텐츠의 컨테이너 스타일을 지정합니다. z 깊이 21을 추가합니다. |
| 22 | md-whiteframe-22dp 이것은 22px 테두리가있는 그림자가있는 HTML 콘텐츠의 컨테이너 스타일을 지정합니다. z 깊이 22를 추가합니다. |
| 23 | md-whiteframe-23dp 23px 테두리가있는 그림자가있는 모든 HTML 콘텐츠의 컨테이너 스타일을 지정합니다. z 깊이 23을 추가합니다. |
| 24 | md-whiteframe-24dp 이것은 24px 테두리가있는 그림자가있는 모든 HTML 콘텐츠의 컨테이너 스타일을 지정합니다. z 깊이 24를 추가합니다. |
예
다음 예제는 섀도우 클래스의 사용을 보여줍니다.
am_whiteframes.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.frameContainer md-whiteframe {
background: #fff;
margin: 30px;
height: 100px;
}
</style>
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('frameController', frameController);
function frameController ($scope) {
}
</script>
</head>
<body ng-app = "firstApplication">
<div class = "frameContainer" ng-controller = "frameController as ctrl"
layout = "row" layout-padding layout-wrap layout-fill
style = "padding-bottom: 32px;" ng-cloak>
<md-whiteframe class = "md-whiteframe-1dp" flex-sm = "45" flex-gt-sm = "35"
flex-gt-md = "25" layout layout-align = "center center">
<span>.md-whiteframe-1dp</span>
</md-whiteframe>
<md-whiteframe class = "md-whiteframe-2dp" flex-sm = "45" flex-gt-sm = "35"
flex-gt-md = "25" layout layout-align = "center center">
<span>.md-whiteframe-2dp</span>
</md-whiteframe>
<md-whiteframe class = "md-whiteframe-3dp" flex-sm = "45" flex-gt-sm = "35"
flex-gt-md = "25" layout layout-align = "center center">
<span>.md-whiteframe-3dp</span>
</md-whiteframe>
<md-whiteframe class = "md-whiteframe-10dp" flex-sm = "45" flex-gt-sm = "35"
flex-gt-md = "25" layout layout-align = "center center">
<span>.md-whiteframe-10dp</span>
</md-whiteframe>
<md-whiteframe class = "md-whiteframe-15dp" flex-sm = "45" flex-gt-sm = "35"
flex-gt-md = "25" layout layout-align = "center center">
<span>.md-whiteframe-15dp</span>
</md-whiteframe>
<md-whiteframe class = "md-whiteframe-20dp" flex-sm = "45" flex-gt-sm = "35"
flex-gt-md = "25" layout layout-align = "center center">
<span>.md-whiteframe-20dp</span>
</md-whiteframe>
<md-whiteframe class = "md-whiteframe-22dp" flex-sm = "45" flex-gt-sm = "35"
flex-gt-md = "25" layout layout-align = "center center">
<span>.md-whiteframe-22dp</span>
</md-whiteframe>
<md-whiteframe class = "md-whiteframe-23dp" flex-sm = "45" flex-gt-sm = "35"
flex-gt-md = "25" layout layout-align = "center center">
<span>.md-whiteframe-23dp</span>
</md-whiteframe>
<md-whiteframe class = "md-whiteframe-24dp" flex-sm = "45" flex-gt-sm = "35"
flex-gt-md = "25" layout layout-align = "center center">
<span>.md-whiteframe-24dp</span>
</md-whiteframe>
</div>
</body>
</html>결과
결과를 확인하십시오.