”;
Angular Material – Overview
Angular Material is a UI component library for Angular JS developers. Angular Material”s reusable UI components help in constructing attractive, consistent, and functional web pages and web applications while adhering to modern web design principles like browser portability, device independence, and graceful degradation.
Following are a few salient features of Angular Material −
-
In-built responsive designing.
-
Standard CSS with minimal footprint.
-
Includes new versions of common user interface controls such as buttons, check boxes, and text fields which are adapted to follow Material Design concepts.
-
Includes enhanced and specialized features like cards, toolbar, speed dial, side nav, swipe, and so on.
-
Cross-browser, and can be used to create reusable web components.
Responsive Design
-
Angular Material has in-built responsive designing so that the website created using Angular Material will redesign itself as per the device size.
-
Angular Material classes are created in such a way that the website can fit any screen size.
-
The websites created using Angular Material are fully compatible with PC, tablets, and mobile devices.
Extensible
-
Angular Material is by design very minimal and flat.
-
It is designed considering the fact that it is much easier to add new CSS rules than to overwrite existing CSS rules.
-
It supports shadows and bold colors.
-
The colors and shades remain uniform across various platforms and devices.
And most important of all, Angular Material is absolutely free to use.
Angular Material – Environment Setup
How to Use Angular Material?
There are two ways to use Angular Material −
-
Local Installation − You can download the Angular Material libraries using npm, jspm, or bower on your local machine and include it in your HTML code.
-
CDN Based Version − You can include the angular-material.min.css and angular-material js files into your HTML code directly from the Content Delivery Network (CDN).
Local Installation
Befor we use the following npm command, we require the NodeJS installation on our system. To get information about node JS, click here and open the NodeJS command line interface. We will use the following command to install Angular Material libraries.
npm install angular-material
The above command will generate the following output −
[email protected] node_modulesangular-animate [email protected] node_modulesangular-aria [email protected] node_modulesangular-messages [email protected] node_modulesangular [email protected] node_modulesangular-material
npm will download the files under node_modules > angular-material folder. Include the files as explained in the following example −
Example
Now you can include the css and js file in your HTML file as follows −
<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>
The above program will generate the following result −
CDN Based Version
You can include the angular-material.css and angular-material.js files into your HTML code directly from the Content Delivery Network (CDN). Google CDN provides content for the latest version.
We are using the Google CDN version of the library throughout this tutorial.
Example
Now let us rewrite the above example using angular-material.min.css and angular-material.min.js from 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>
The above program will generate the following result −
Angular Material – Autocomplete
The md-autocomplete, an Angular Directive, is used as a special input control with an inbuilt dropdown to show all possible matches to a custom query. This control acts as a real-time suggestion box as soon as the user types in the input area. <md-autocomplete> can be used to provide search results from local or remote data sources. md-autocomplete 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.
Attributes
The following table lists out the parameters and description of the different attributes of md-autocomplete.
| Sr.No | Parameter & Description |
|---|---|
| 1 |
* md-items An expression in the format of item in items to iterate over matches for your search. |
| 2 |
md-selected-item-change An expression to be run each time a new item is selected. |
| 3 |
md-search-text-change An expression to be run each time the search text updates. |
| 4 |
md-search-text A model to bind the search query text to. |
| 5 |
md-selected-item A model to bind the selected item to. |
| 6 |
md-item-text An expression that will convert your object to a single string. |
| 7 |
placeholder Placeholder text that will be forwarded to the input. |
| 8 |
md-no-cache Disables the internal caching that happens in autocomplete. |
| 9 |
ng-disabled Determines whether or not to disable the input field. |
| 10 |
md-min-length Specifies the minimum length of text before autocomplete will make suggestions. |
| 11 |
md-delay Specifies the amount of time (in milliseconds) to wait before looking for results. |
| 12 |
md-autofocus If true, will immediately focus the input element. |
| 13 |
md-autoselect If true, the first item will be selected by default. |
| 14 |
md-menu-class This will be applied to the dropdown menu for styling. |
| 15 |
md-floating-label This will add a floating label to autocomplete and wrap it in the md-input-container. |
| 16 |
md-input-name The name attribute given to the input element to be used with the FormController. |
| 17 |
md-input-id An ID to be added to the input element. |
| 18 |
md-input-minlength The minimum length for the input”s value for validation. |
| 19 |
md-input-maxlength The maximum length for the input”s value for validation. |
| 20 |
md-select-on-match When set as true, autocomplete will automatically select the exact item if the search text is an exact match. |
Example
The following example shows the use of the md-autocomplete directive and also the use of 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>
Result
Verify the result.
Angular Material – Bottom Sheet
The $mdBottomSheet, an Angular Service, is used to open a bottom sheet over the application and provides a simple promise API.
| S.N | Method & Description | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| 1 |
$mdBottomSheet.show(options); Show a bottom sheet with the specified options.
|
Example
The following example shows the use of the $mdBottomSheet service and also the use of bottom sheet.
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>
Result
Verify the result.
Angular Material – Cards
The md-card, an Angular Directive, is a container directive and is used to draw cards in the angularjs application. The following table lists down the angular directives and classes used in md-card.
| Sr.No | Directive/Class & Description |
|---|---|
| 1 |
<md-card-header> Header for the card, holds avatar, text and squared image. |
| 2 |
<md-card-avatar> Card avatar. |
| 3 |
md-user-avatar Class for user image. |
| 4 |
<md-icon> Icon directive. |
| 5 |
<md-card-header-text> Contains elements for the card description. |
| 6 |
md-title Class for the card title. |
| 7 |
md-subhead Class for the card sub header. |
| 8 |
<img> Image for the card. |
| 9 |
<md-card-title> Card content title. |
| 10 |
<md-card-title-text> Card Title text container. |
| 11 |
md-headline Class for the card content title. |
| 12 |
md-subhead Class for the card content sub header. |
| 13 |
<md-card-title-media> Squared image within the title. |
| 14 |
md-media-sm Class for small image. |
| 15 |
md-media-md Class for medium image. |
| 16 |
md-media-lg Class for large image. |
| 17 |
<md-card-content> Card content. |
| 18 |
md-media-xl Class for extra large image. |
| 19 |
<md-card-actions> Card actions. |
| 20 |
<md-card-icon-actions> Icon actions. |
Example
The following example shows the use of md-card directive and also the use of card classes.
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>
Result
Verify the result.
Angular Material – Widgets
Angular Material provides a rich library of UI widgets. This allows users to have advanced interaction capability with the application.
The following table lists down a few important Widgets with their description −
| Sr.No | Widget & Description |
|---|---|
| 1 | Buttons
The md-button, an Angular Directive, is a button directive having optional ink ripples (and are by default enabled). If href or ng-href attribute is provided, then this directive acts as an anchor element. |
| 2 | CheckBoxes
The md-checkbox, an Angular Directive, is used as a checkbox control. |
| 3 | Content
The md-content, an Angular Directive, is a container element and is used for scrollable content. The layout-padding attribute can be added to have padded content. |
| 4 | DatePicker
The md-datepicker, an Angular Directive, is an input control to select a date. It also supports ngMessages for input validation. |
| 5 | Dialogs
The md-dialog, an Angular Directive, is a container element and is used to display a dialog box. Its element md-dialog-content contains the content of the dialog and the md-dialog-actions is responsible for dialog actions. The mdDialog, an Angular Service, opens a dialog over the application to keep the users informed and help them make decisions. |
| 6 | Divider
The md-divider, an Angular Directive, is a rule element and is used to display a thin lightweight rule to group and divide contents within lists and page layouts. |
| 7 | List
The md-list, an Angular directive, is a container component that contains md-list-item elements as a children. The md-list-item directive is a container component for row items of md-list container. CSS classes md-2-line and md-3-line can be added to md-list-item to increase the height of row with 22px and 40px respectively. |
| 8 | Menu
The md-menu, an Angular directive, is a component to display addition options within the context of action performed. The md-menu has two child elements. The first element is the trigger element and is used to open the menu. The second element is the md-menu-content to represent the content of the menu when the menu is opened. The md-menu-content usually carries the menu items as md-menu-item. |
| 9 | Menu Bar
The md-menu-bar, is a container component to hold multiple menus. The menu bar helps to create an operating system provided menu effect. |
| 10 | Progress Bars
The md-progress-circular and md-progress-linear are Angular progress directives, and are used to show the loading content message in application. |
| 11 | Radio Buttons
The md-radio-group and md-radio-button Angular directives are used to show radio buttons in the applcation. The md-radio-group is the grouping container for md-radio-button elements. |
| 12 | Selects
The md-select, an Angular directives is used to show Select box, bounded by ng-model. |
| 13 | Fab Toolbars
The md-fab-toolbar, an Angular directive, is used to show a toolbar of elements or buttons for quick access to common actions. |
| 14 | Sliders
The md-slider, an Angular directives is used to show a range component. It has two modes −
|
| 15 | Tabs
The md-tabs and md-tab Angular directives are used to show tabs in the applcation. md-tabs is the grouping container for md-tab elements. |
| 16 | Toolbars
The md-toolbar, an Angular directives is used to show a toolbar which is normally an area above content to show the title and the relevant buttons. |
| 17 | Tooltips
The Angular Material provides various special methods to show unobtrusive tooltips to the users. Angular Material provides ways to assign directions for them and md-tooltip directive is used to show tooltips. A tooltip activates whenever the user focuses, hovers over, or touches the parent component. |
| 18 | Chips
The md-chips, an Angular Directive, is used as a special component called the Chip and can be used to represent small set of information for example, a contact, tags etc. Custom template can be used to render the content of a chip. This can be achieved by specifying an md-chip-template element having the custom content as a child of md-chips. |
| 19 | Contact Chips
The md-contact-chips, an Angular Directive, is an input control built on md-chips and uses the md-autocomplete element. The contact chip component accepts a query expression which returns a list of possible contacts. A user can select one of these and add it to the list of availble chips. |
Angular Material – Layouts
Layout Directive
Layout directive on a container element is used to specify the layout direction for its children. Following are the assignable values for the Layout Directive −
-
row − Items are arranged horizontally with max-height = 100% and max-width is the width of the items in the container.
-
column − Items are arranged vertically with max-width = 100% and max-height is the height of the items in the container.
For responsive design such as layout to be automatically changed depending upon the device screen size, the layout APIs listed in the following table can be used to set the layout direction for devices with view widths.
| Sr.No | API & Device width when breakpoint overrides default |
|---|---|
| 1 |
layout Sets default layout direction unless overridden by another breakpoint. |
| 2 |
layout-xs width < 600px |
| 3 |
layout-gt-xs width >= 600px |
| 4 |
layout-sm 600px <= width < 960px |
| 5 |
layout-gt-sm width >= 960px |
| 6 |
layout-md 960px <= width < 1280px |
| 7 |
layout-gt-md width >= 1280px |
| 8 |
layout-lg 1280px <= width < 1920px |
| 9 |
layout-gt-lg width >= 1920px |
| 10 |
layout-xl width >= 1920px |
Example
The following example shows the use of layout directive and also the uses of layout.
am_layouts.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.box {
color:white;
padding:10px;
text-align:center;
border-style: inset;
}
.green {
background:green;
}
.blue {
background:blue;
}
</style>
<script language = "javascript">
angular
.module(''firstApplication'', [''ngMaterial''])
.controller(''layoutController'', layoutController);
function layoutController ($scope) {
}
</script>
</head>
<body ng-app = "firstApplication">
<div id = "layoutContainer" ng-controller = "layoutController as ctrl"
style = "height:100px;" ng-cloak>
<div layout = "row" layout-xs = "column">
<div flex class = "green box">Row 1: Item 1</div>
<div flex = "20" class = "blue box">Row 1: Item 2</div>
</div>
<div layout = "column" layout-xs = "column">
<div flex = "33" class = "green box">Column 1: item 1</div>
<div flex = "66" class = "blue box">Column 1: item 2</div>
</div>
</div>
</body>
</html>
Result
Verify the result.
Flex Directive
The flex directive on a container element is used to customize the size and position of the elements. It defines the way how the element is to adjust its size with respect to its parent container and the other elements within the container. Following are the assignable values for the flex directive −
-
multiples of 5 − 5, 10, 15 … 100
-
33 − 33%
-
66 − 66%
Example
The following example shows the use of the flex directive and also the uses of 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>
Result
Verify the result.
Angular Material – Inputs
The md-input-container, an Angular directive, is a container component that contains any <input> or <textarea> element as a child. It also supports error handling using the standard ng-messages directives and animates the messages using the ngEnter/ngLeave events or the ngShow/ngHide events.
Attributes
The following table lists out the parameters and description of the different attributes of the md-input-container.
| Sr.No | Parameter & Description |
|---|---|
| 1 |
md-maxlength The maximum number of characters allowed in this input. If this is specified, a character counter will be shown underneath the input. The purpose of the md-maxlength is to show the max length counter text. If you don”t want the counter text and only need “plain” validation, you can use the “simple” ng-maxlength or maxlength attributes. |
| 2 |
aria-label Aria-label is required when no label is present. A warning message will be logged in the console if a label is not present. |
| 3 |
placeholder An alternative approach to using aria-label when the label is not present. The placeholder text is copied to the aria-label attribute. |
| 4 |
md-no-autogrow When present, the textareas will not grow automatically. |
| 5 |
md-detect-hidden When present, the textareas will be sized properly when they are revealed after being hidden. This is off by default for performance reasons because it guarantees a reflow every digest cycle. |
Example
The following example shows the use of the md-input-container directive and also the uses of inputs.
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>
Result
Verify the result.
Angular Material – Icons
The md-icon, an Angular directive, is a component to show vector-based icons in application. It supports icon fonts and SVG icons also apart from using the Google Material Icons.
Attributes
The following table lists out the parameters and description of the different attributes of md-icon.
| Sr.No | Parameter & Description |
|---|---|
| 1 |
* md-font-icon This is the string name of CSS icon associated with the font-face, which will be used to render the icon. Requires the fonts and the named CSS styles to be preloaded. |
| 2 |
* md-font-set This is the CSS style name associated with the font library, which will be assigned as the class for the font-icon ligature. This value may also be an alias that is used to lookup the classname; internally use $mdIconProvider.fontSet(<alias>) to determine the style name. |
| 3 |
* md-svg-src This is the String URL (or expression) used to load, cache, and display an external SVG. |
| 4 |
* md-svg-icon This is the string name used for lookup of the icon from the internal cache; interpolated strings or expressions may also be used. Specific set names can be used with the syntax <set name>:<icon name>. To use icon sets, developers are required to pre-register the sets using the $mdIconProvider service. |
| 5 |
aria-label This labels icon for accessibility. If an empty string is provided, icon will be hidden from accessibility layer with aria-hidden = “true”. If there”s no aria-label on the icon nor a label on the parent element, a warning will be logged to the console. |
| 6 |
alt This labels icon for accessibility. If an empty string is provided, icon will be hidden from accessibility layer with aria-hidden = “true”. If there”s no alt on the icon nor a label on the parent element, a warning will be logged to the console. |
Example
The following example shows the use of md-icons directive and also the uses of 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>
Result
Verify the result.
Angular Material – Grids
The md-grid-list, an Angular directive, is a component for laying out content for varying screen sizes. A grid has 12 columns in the desktop size screen, 8 in the tablet size screen, and 4 in the phone size screen, where each size have predefined margins and gutters. Cells are laid out in sequential manner in a row, in the order they are defined.
Attributes
The following table lists out the parameters and description of the different attributes of md-grid-list.
| Sr.No | Parameter & Description |
|---|---|
| 1 |
* md-cols This is for the number of columns in the grid. |
| 2 |
* md-row-height One of
|
| 3 |
md-gutter The amount of space between tiles in CSS units (default 1px). |
| 4 |
md-on-layout Expression to evaluate after layout. Event object is available as $event, and contains performance information. |
Example
The following example shows the use of the md-grid-list directive and also the uses of grid.
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>
Result
Verify the result.
Resize the screen to see the effect.
Angular Material – SideNav
The md-sidenav, an Angular directive is used to show a container component which can be shown or hide programmatically. It slides out over the top of the main content region by default.
Attributes
The following table lists out the parameters and description of the different attributes of md-sidenav
| Sr.No | Parameter & Description |
|---|---|
| 1 |
md-is-open A model bound to whether the sidenav is opened. |
| 2 |
md-component-id componentId to use with $mdSidenav service. |
| 3 |
md-is-locked-open When this expression evalutes to true, the sidenav ”locks open”: it falls into the content”s flow instead of appearing over it. This overrides the is-open attribute. The $mdMedia() service is exposed to the is-locked-open attribute, which can be given a media query or one of the sm, gt-sm, md, gt-md, lg or gt-lg presets. Examples −
<md-sidenav md-is-locked-open = "shouldLockOpen"></md-sidenav>
<md-sidenav md-is-locked-open = "$mdMedia(''min-width: 1000px'')"></mdsidenav>
<md-sidenav md-is-locked-open = "$mdMedia(''sm'')"></md-sidenav> <!--(locks open on small screens)-->
|
Example
The following example shows the use of md-sidenav and also the uses of the sidenav component.
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>
Result
Verify the result.
Angular Material – Fab Speed Dial
The md-fab-speed-dial, an Angular directive, is used to show a series of popup elements or buttons for quick access to common actions.
Attributes
The following table lists out the parameters and description of the different attributes of md-fab-speed-dial.
| Sr.No | Parameter & Description |
|---|---|
| 1 |
* md-direction This determines the direction at which the speed dial is to appear relative to the trigger element. |
| 2 |
md-open This helps programmatically control whether or not the speed-dial is visible. |
Example
The following example shows the use of md-fab-speed-dial directive and also the uses of 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>
Result
Verify the result.
Angular Material – Subheaders
The md-subheader, an Angular directive, is used to show a subheader for a section.
Example
The following example shows the use of md-subheader and also the uses of subheader component.
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>
Result
Verify the result.
Angular Material – Swipe
The Swipe functionality is meant for mobile devices. The following directives are used to handle swipes.
-
md-swipe-down, an Angular directive is used to specify custom behavior when an element is swiped down.
-
md-swipe-left, an Angular directive is used to specify custom behavior when an element is swiped left.
-
md-swipe-right, an Angular directive is used to specify custom behavior when an element is swiped right.
-
md-swipe-up, an Angular directive is used to specify custom behavior when an element is swiped up.
Example
The following example shows the use of md-swipe-* and also the uses of swipe components.
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>
Result
Verify the result.
Angular Material – Switches
The md-switch, an Angular directive, is used to show a switch.
Attributes
The following table lists out the parameters and description of the different attributes of md-switch.
| Sr.No | Parameter & Description |
|---|---|
| 1 |
* ng-model The assignable angular expression to data-bind to. |
| 2 |
name The property name of the form under which the control is published. |
| 3 |
ng-true-value The value to which the expression should be set when selected. |
| 4 |
ng-false-value The value to which the expression should be set when not selected. |
| 5 |
ng-change The Angular expression to be executed when input changes due to user interaction with the input element. |
| 6 |
ng-disabled En/Disable based on the expression. |
| 7 |
md-no-ink The use of attribute indicates the use of ripple ink effects. |
| 8 |
aria-label This publishes the button label used by the screen-readers for accessibility. This defaults to the switch”s text. |
Example
The following example shows the use of md-swipe-* and also the uses of swipe components.
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>
Result
Verify the result.
Angular Material – Theme
The Angular Material components use the intention group classes like md-primary, md-accent, md-warn and additional classes for color differences like md-hue-1, md-hue-2, or md-hue-3. The following components supporrt the use of the above mentioned classes.
- md-button
- md-checkbox
- md-progress-circular
- md-progress-linear
- md-radio-button
- md-slider
- md-switch
- md-tabs
- md-text-float
- md-toolbar
Themes can be configured using $mdThemingProvider during application configuration. The following properties can be used to assign different color palletes.
- primaryPalette
- accentPalette
- warnPalette
- backgroundPalette
Example
The following example shows the use of themes in Angular JS application.
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>
Result
Verify the result.
Angular Material – Toasts
The Angular Material provides various special methods to show unobtrusive alerts to the users. It also provides a term toast for them. The $mdToast service is used to show toasts.
Example
The following example shows the use of toasts.
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>
Result
Verify the result.
Angular Material – Typography
Angular Material provides various typography CSS classes which can be used to create visual consistency across Angular JS application.
The following table lists down the different classes with their description.
| Sr.No | Class Name & Description |
|---|---|
| 1 |
md-display-1 Shows the text with Regular 34px. |
| 2 |
md-display-2 Shows the text with Regular 45px. |
| 3 |
md-display-3 Shows the text with Regular 56px. |
| 4 |
md-display-4 Shows the text with Light 112px. |
| 5 |
md-headline Shows the text with Regular 24px. |
| 6 |
md-title Shows the text with Medium 20px. |
| 7 |
md-subhead Shows the text with Regular 16px. |
| 8 |
md-body-1 Shows the text with Regular 14px. |
| 9 |
md-body-2 Shows the text with Medium 14px. |
| 10 |
md-button Shows the button with Medium 14px. |
| 11 |
md-caption Shows the text with Regular 12px. |
Example
The following example shows the use of typography CSS classes.
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>
Result
Verify the result.
Angular Material – Virtual Repeat
The md-virtual-repeat-container is the scroll container for the md-virtual-repeat component.
Attributes
The following table lists out the parameters and description of the different attributes of md-virtual-repeat-container.
| Sr.No | Parameter & Description |
|---|---|
| 1 |
md-top-index Binds the index of the item that is at the top of the scroll container to $scope. It can both read and set the scroll position. |
| 2 |
md-orient-horizontal Determines whether the container should scroll horizontally (defaults to orientation and scrolling vertically). |
| 3 |
md-auto-shrink When present, the container will shrink to fit the number of items when that number is less than its original size. |
| 4 |
md-auto-shrink-min Minimum number of items that md-auto-shrink will shrink to (default: 0). |
md-virtual-repeat
Virtual repeat is a substitute for ng-repeat to renders only enough html elements to fill the container and reuse them when the user scrolls.
Attributes
The following table lists out the parameters and description of the different attributes of md-virtual-repeat.
| Sr.No | Parameter & Description |
|---|---|
| 1 |
md-item-size The height or width of the repeated elements (which must be identical for each element). This is optional. This attempts to read the size from the dom if missing, but still assumes that all repeated nodes have same height or width. |
| 2 |
md-extra-name Evaluates to an additional name to which the current iterated item can be assigned on the repeated scope (needed for use in md-autocomplete). |
| 3 |
md-on-demand When present, treats the md-virtual-repeat argument as an object that can fetch rows rather than an array.This object must implement the following interface with two (2) methods −
|
Example
The following example showe the use of virtual repeat.
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>
Result
Verify the result.
Angular Material – WhiteFrame
Angular Material has several special classes to display containers as paper-like cards with shadow.
The following table lists down the different classes with their description.
| Sr.No | Class Name & Description |
|---|---|
| 1 |
md-whiteframe-1dp This styles a container for any HTML content with 1px bordered shadow. Adds zdepth of 1. |
| 2 |
md-whiteframe-2dp This styles a container for any HTML content with 2px bordered shadow. Adds zdepth of 2. |
| 3 |
md-whiteframe-3dp This styles a container for any HTML content with 3px bordered shadow. Adds zdepth of 3. |
| 4 |
md-whiteframe-4dp This styles a container for any HTML content with 4px bordered shadow. Adds zdepth of 4. |
| 5 |
md-whiteframe-5dp This styles a container for any HTML content with 5px bordered shadow. Adds zdepth of 5. |
| 6 |
md-whiteframe-6dp This styles a container for any HTML content with 6px bordered shadow. Adds zdepth of 6. |
| 7 |
md-whiteframe-7dp This styles a container for any HTML content with 7px bordered shadow. Adds zdepth of 7. |
| 8 |
md-whiteframe-8dp This styles a container for any HTML content with 8px bordered shadow. Adds zdepth of 8. |
| 9 |
md-whiteframe-9dp This styles a container for any HTML content with 9px bordered shadow. Adds zdepth of 9. |
| 10 |
md-whiteframe-10dp This styles a container for any HTML content with 10px bordered shadow. Adds z-depth of 10. |
| 11 |
md-whiteframe-11dp This styles a container for any HTML content with 11px bordered shadow. Adds z-depth of 11. |
| 12 |
md-whiteframe-12dp This styles a container for any HTML content with 12px bordered shadow. Adds z-depth of 12. |
| 13 |
md-whiteframe-13dp This styles a container for any HTML content with 13px bordered shadow. Adds z-depth of 13. |
| 14 |
md-whiteframe-14dp This styles a container for any HTML content with 14px bordered shadow. Adds z-depth of 14. |
| 15 |
md-whiteframe-15dp This styles a container for any HTML content with 15px bordered shadow. Adds z-depth of 15. |
| 16 |
md-whiteframe-16dp This styles a container for any HTML content with 16px bordered shadow. Adds z-depth of 16. |
| 17 |
md-whiteframe-17dp This styles a container for any HTML content with 17px bordered shadow. Adds z-depth of 17. |
| 18 |
md-whiteframe-18dp This styles a container for any HTML content with 18px bordered shadow. Adds z-depth of 18. |
| 19 |
md-whiteframe-19dp This styles a container for any HTML content with 19px bordered shadow. Adds z-depth of 19. |
| 20 |
md-whiteframe-20dp This styles a container for any HTML content with 20px bordered shadow. Adds z-depth of 20. |
| 21 |
md-whiteframe-21dp This styles a container for any HTML content with 21px bordered shadow. Adds z-depth of 21. |
| 22 |
md-whiteframe-22dp This styles a container for any HTML content with 22px bordered shadow. Adds z-depth of 22. |
| 23 |
md-whiteframe-23dp This styles a container for any HTML content with 23px bordered shadow. Adds z-depth of 23. |
| 24 |
md-whiteframe-24dp This styles a container for any HTML content with 24px bordered shadow. Adds z-depth of 24. |
Example
The following example shows the use of shadow classes.
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>
Result
Verify the result.
”;