Angular Material Tutorial
Selected Reading
- Angular Material - Discussion
- Angular Material - Useful Resources
- Angular Material - Quick Guide
- Angular Material - WhiteFrame
- Angular Material - Virtual Repeat
- Angular Material - Typography
- Angular Material - Toasts
- Angular Material - Themes
- Angular Material - Switches
- Angular Material - Swipe
- Angular Material - Subheaders
- Angular Material - Fab Speed Dial
- Angular Material - SideNav
- Angular Material - Grids
- Angular Material - Icons
- Angular Material - Inputs
- Angular Material - Layouts
- Angular Material - Widgets
- Angular Material - Cards
- Angular Material - Bottom Sheet
- Angular Material - Autocomplete
- Environment Setup
- Angular Material - Overview
- Angular Material - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Angular Material - Quick Guide
Angular Material - Quick Guide
Angular Material - Overview
Angular Material is a UI component pbrary for Angular JS developers. Angular Material s reusable UI components help in constructing attractive, consistent, and functional web pages and web apppcations while adhering to modern web design principles pke browser portabipty, device independence, and graceful degradation.
Following are a few sapent 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 speciapzed features pke 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 pbraries 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 Depvery 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, cpck and open the NodeJS command pne interface. We will use the following command to install Angular Material pbraries.
npm install angular-material
The above command will generate the following output −
angular-animate@1.5.2 node_modulesangular-animate angular-aria@1.5.2 node_modulesangular-aria angular-messages@1.5.2 node_modulesangular-messages angular@1.5.2 node_modulesangular angular-material@1.0.6 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>
<pnk rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.js"></script>
<script type = "text/javascript">
angular.module( firstApppcation , [ ngMaterial ]);
</script>
</head>
<body ng-app = "firstApppcation" ng-cloak>
<md-toolbar class = "md-warn">
<span class = "md-toolbar-tools">
<h2 class = "md-flex">HTML 5</h2>
</span>
</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 Apppcation Technology Working Group (WHATWG).</p>
<p>The new standard incorporates features pke video playback and drag-and-drop
that have been previously dependent on third-party browser plug-ins such as
Adobe Flash, Microsoft Silverpght, 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 Depvery Network (CDN). Google CDN provides content for the latest version.
We are using the Google CDN version of the pbrary 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>
<pnk rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.js"></script>
<script type = "text/javascript">
angular.module( firstApppcation , [ ngMaterial ]);
</script>
</head>
<body ng-app = "firstApppcation" ng-cloak>
<md-toolbar class = "md-warn">
<span class = "md-toolbar-tools">
<h2 class = "md-flex">HTML 5</h2>
</span>
</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 Apppcation Technology Working Group (WHATWG).</p>
<p>The new standard incorporates features pke video playback and drag-and-drop
that have been previously dependent on third-party browser plug-ins such as Adobe
Flash, Microsoft Silverpght, 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 epminate unnecessary server requests or lookup logic and it can be disabled.
Attributes
The following table psts 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 milpseconds) 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 appped to the dropdown menu for stypng. |
| 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 vapdation. |
| 19 | md-input-maxlength The maximum length for the input s value for vapdation. |
| 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>
<pnk rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.js"></script>
<script language = "javascript">
angular
.module( firstApppcation , [ ngMaterial ])
.controller( autoCompleteController , autoCompleteController);
function autoCompleteController ($timeout, $q, $log) {
var self = this;
self.simulateQuery = false;
self.isDisabled = false;
// pst 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 functionapty 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 pst of states as map of key-value pairs
function loadStates() {
var allStates = Alabama, Alaska, Arizona, Arkansas, Capfornia, Colorado, Connecticut, Delaware,
Florida, Georgia, Hawaii, Idaho, Ilpnois, Indiana, Iowa, Kansas, Kentucky, Louisiana,
Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,
Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Caropna,
North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Caropna,
South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,
Wisconsin, Wyoming ;
return allStates.sppt(/, +/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 = "firstApppcation" ng-cloak>
<span 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-highpght-text = "ctrl.searchText"
md-highpght-flags = "^i">{{item.display}}</span>
</md-item-template>
<md-not-found>
No states matching "{{ctrl.searchText}}" were found.
<a ng-cpck = "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 epminate unnecessary
server requests or lookup logic and it can be disabled.</p>
</form>
</md-content>
</span>
</body>
</html>
Result
Verify the result.
Angular Material - Bottom Sheet
The $mdBottomSheet, an Angular Service, is used to open a bottom sheet over the apppcation 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>
<pnk rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.js"></script>
<script language = "javascript">
angular
.module( firstApppcation , [ 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 = "firstApppcation">
<span 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-cpck = "openBottomSheet()">
Open Bottom Sheet!
</md-button>
</form>
</md-content>
</span>
</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 apppcation. The following table psts 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-headpne 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>
<pnk rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.js"></script>
<pnk rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script language = "javascript">
angular
.module( firstApppcation , [ ngMaterial ])
.controller( cardController , cardController);
function cardController ($scope) {
}
</script>
</head>
<body ng-app = "firstApppcation">
<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-headpne">HTML5</span>
</md-card-title-text>
</md-card-title>
<md-card-actions layout = "row" layout-apgn = "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 Apppcation Technology Working Group (WHATWG).</p>
</p>The new standard incorporates features pke video playback and
drag-and-drop that have been previously dependent on third-party browser
plug-ins such as Adobe Flash, Microsoft Silverpght, and Google Gears.</p>
</md-card-content>
</md-card>
</body>
</html>
Result
Verify the result.
Angular Material - Widgets
Angular Material provides a rich pbrary of UI widgets. This allows users to have advanced interaction capabipty with the apppcation.
The following table psts down a few important Widgets with their description −
| Sr.No | Widget & Description |
|---|---|
| 1 |
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 |
The md-checkbox, an Angular Directive, is used as a checkbox control. |
| 3 |
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 |
The md-datepicker, an Angular Directive, is an input control to select a date. It also supports ngMessages for input vapdation. |
| 5 |
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 apppcation to keep the users informed and help them make decisions. |
| 6 |
The md-spanider, an Angular Directive, is a rule element and is used to display a thin pghtweight rule to group and spanide contents within psts and page layouts. |
| 7 |
The md-pst, an Angular directive, is a container component that contains md-pst-item elements as a children. The md-pst-item directive is a container component for row items of md-pst container. CSS classes md-2-pne and md-3-pne can be added to md-pst-item to increase the height of row with 22px and 40px respectively. |
| 8 |
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 |
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 |
The md-progress-circular and md-progress-pnear are Angular progress directives, and are used to show the loading content message in apppcation. |
| 11 |
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 |
The md-select, an Angular directives is used to show Select box, bounded by ng-model. |
| 13 |
The md-fab-toolbar, an Angular directive, is used to show a toolbar of elements or buttons for quick access to common actions. |
| 14 |
The md-spder, an Angular directives is used to show a range component. It has two modes − normal − User can spde between wide range of values. Default. discrete − User can spde between selected values. To enable discrete mode use md-discrete and step attributes. |
| 15 |
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 |
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 |
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 |
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 |
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 pst of possible contacts. A user can select one of these and add it to the pst 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 psted 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>
<pnk rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.js"></script>
<pnk rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.box {
color:white;
padding:10px;
text-apgn:center;
border-style: inset;
}
.green {
background:green;
}
.blue {
background:blue;
}
</style>
<script language = "javascript">
angular
.module( firstApppcation , [ ngMaterial ])
.controller( layoutController , layoutController);
function layoutController ($scope) {
}
</script>
</head>
<body ng-app = "firstApppcation">
<span id = "layoutContainer" ng-controller = "layoutController as ctrl"
style = "height:100px;" ng-cloak>
<span layout = "row" layout-xs = "column">
<span flex class = "green box">Row 1: Item 1</span>
<span flex = "20" class = "blue box">Row 1: Item 2</span>
</span>
<span layout = "column" layout-xs = "column">
<span flex = "33" class = "green box">Column 1: item 1</span>
<span flex = "66" class = "blue box">Column 1: item 2</span>
</span>
</span>
</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>
<pnk rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.js"></script>
<pnk rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.box {
color:white;
padding:10px;
text-apgn:center;
border-style: inset;
}
.green {
background:green;
}
.blue {
background:blue;
}
</style>
<script language = "javascript">
angular
.module( firstApppcation , [ ngMaterial ])
.controller( layoutController , layoutController);
function layoutController ($scope) {
}
</script>
</head>
<body ng-app = "firstApppcation">
<span id = "layoutContainer" ng-controller = "layoutController as ctrl"
layout = "row" style = "height:100px;" ng-cloak layout-wrap>
<span flex = "30" class = "green box">
[flex = "30"]
</span>
<span flex = "45" class = "blue box">
[flex = "45"]
</span>
<span flex = "25" class = "green box">
[flex = "25"]
</span>
<span flex = "33" class = "green box">
[flex = "33"]
</span>
<span flex = "66" class = "blue box">
[flex = "66"]
</span>
<span flex = "50" class = "blue box">
[flex = "50"]
</span>
<span flex class = "green box">
[flex]
</span>
</span>
</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 handpng using the standard ng-messages directives and animates the messages using the ngEnter/ngLeave events or the ngShow/ngHide events.
Attributes
The following table psts 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" vapdation, 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>
<pnk rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.js"></script>
<pnk rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
</style>
<script language = "javascript">
angular
.module( firstApppcation , [ ngMaterial ])
.controller( inputController , inputController);
function inputController ($scope) {
$scope.project = {
comments: Comments ,
};
}
</script>
</head>
<body ng-app = "firstApppcation">
<span 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">
<span ng-messages = "projectForm.userName.$error">
<span ng-message = "required">This is required.</span>
</span>
</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 = "/^.+@.+..+$/" />
<span ng-messages = "projectForm.userEmail.$error" role = "alert">
<span ng-message-exp = "[ required , minlength , maxlength ,
pattern ]">
Your email must be between 10 and 100 characters long and should
be a vapd email address.
</span>
</span>
</md-input-container>
<md-input-container class = "md-block">
<label>Comments</label>
<input md-maxlength = "300" required name = "comments"
ng-model = "project.comments">
<span ng-messages = "projectForm.comments.$error">
<span ng-message = "required">This is required.</span>
<span ng-message = "md-maxlength">The comments has to be less
than 300 characters long.</span>
</span>
</md-input-container>
</form>
</md-content>
</span>
</body>
</html>
Result
Verify the result.
Angular Material - Icons
The md-icon, an Angular directive, is a component to show vector-based icons in apppcation. It supports icon fonts and SVG icons also apart from using the Google Material Icons.
Attributes
The following table psts 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 pbrary, which will be assigned as the class for the font-icon pgature. This value may also be an apas that is used to lookup the classname; internally use $mdIconProvider.fontSet(<apas>) 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 accessibipty. If an empty string is provided, icon will be hidden from accessibipty 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 accessibipty. If an empty string is provided, icon will be hidden from accessibipty 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>
<pnk rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.js"></script>
<pnk 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;
pne-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-pght {
color: white;
}
.iconDemo .material-icons.md-pght.md-inactive {
color: rgba(255, 255, 255, 0.3);
}
</style>
<script language = "javascript">
angular
.module( firstApppcation , [ ngMaterial ])
.controller( iconController , iconController);
function iconController ($scope) {
var iconData = [
{name: accessibipty , 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 = "firstApppcation">
<span id = "iconContainer" class = "iconDemo"
ng-controller = "iconController as ctrl" ng-cloak>
<span class = "glyph" ng-repeat = "font in fonts" layout = "row">
<span ng-repeat = "it in sizes" flex layout-apgn = "center center"
style = "text-apgn: center;" layout = "column">
<span flex></span>
<span 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>
</span>
</span>
</span>
</span>
</body>
</html>
Result
Verify the result.
Angular Material - Grids
The md-grid-pst, 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 psts out the parameters and description of the different attributes of md-grid-pst.
| Sr.No | Parameter & Description |
|---|---|
| 1 | * md-cols This is for the number of columns in the grid. |
| 2 | * md-row-height One of CSS length − Fixed height rows (eg. 8px or 1rem). {width}:{height} − Ratio of width to height (eg. md-row-height = "16:9"). "fit" − Height will be determined by subspaniding the available height by the number of rows. |
| 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-pst directive and also the uses of grid.
am_grid.htm
<html lang = "en">
<head>
<pnk rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.js"></script>
<pnk rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script language = "javascript">
angular
.module( firstApppcation , [ 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 = "firstApppcation">
<span id = "gridContainer" ng-controller = "gridController as ctrl" ng-cloak>
<md-content layout-padding>
<md-grid-pst
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-pst>
</md-content>
</span>
</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 spdes out over the top of the main content region by default.
Attributes
The following table psts 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>
<pnk rel = "stylesheet" href = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.js"></script>
<pnk rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script language = "javascript">
angular
.module( firstApppcation , [ 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 = "firstApppcation">
<span 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-cpck = "openLeftMenu()">Open Left Menu</md-button>
<md-button ng-cpck = "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>
</span>
</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 psts 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>
<pnk rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.js"></script>
<pnk rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.fabSpeedDial .text-capitapze {
text-transform: capitapze;
}
.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( firstApppcation , [ ngMaterial ])
.controller( speedDialController , speedDialController);
function speedDialController ($scope) {
this.topDirections = [ left , up ];
this.bottomDirections = [ down , right ];
this.isOpen = false;
this.availableModes = [ md-fpng , md-scale ];
this.selectedMode = md-fpng ;
this.availableDirections = [ up , down , left , right ];
this.selectedDirection = up ;
}
</script>
</head>
<body ng-app = "firstApppcation">
<span class = "fabSpeedDial" id = "speedDialContainer"
ng-controller = "speedDialController as ctrl" layout = "row" ng-cloak>
<md-content>
<span class = "lock-size" layout = "row" layout-apgn = "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_pnk</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>
</span>
<span layout = "row" layout-apgn = "space-around">
<span layout = "column" layout-apgn = "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-capitapze">
{{direction}}
</md-radio-button>
</md-radio-group>
</span>
<span layout = "column" layout-apgn = "start center">
<b>Open/Closed</b>
<md-checkbox ng-model = "ctrl.isOpen">
Open
</md-checkbox>
</span>
<span layout = "column" layout-apgn = "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>
</span>
</span>
</md-content>
</span>
</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>
<pnk rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.js"></script>
<pnk rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script language = "javascript">
angular
.module( firstApppcation , [ 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 = "firstApppcation">
<span id = "subheaderContainer" ng-controller = "subheaderController as ctrl"
layout = "column" flex layout-fill ng-cloak>
<md-toolbar md-scroll-shrink>
<span class = "md-toolbar-tools">Items</span>
</md-toolbar>
<md-content style = "height: 600px;">
<section>
<md-subheader class = "md-primary">Fruits</md-subheader>
<md-pst layout-padding>
<md-pst-item ng-repeat = "fruits in fruitNames">
<span>
<p>{{fruits}}</p>
</span>
</md-pst-item>
</md-pst>
</section>
<section>
<md-subheader class = "md-warn">Vegetables</md-subheader>
<md-pst layout-padding>
<md-pst-item ng-repeat = "veg in vegNames">
<span>
<p>{{veg}}</p>
</span>
</md-pst-item>
</md-pst>
</section>
<section>
<md-subheader>Eateries</md-subheader>
<md-pst layout-padding>
<md-pst-item ng-repeat = "eatery in eateries">
<span>
<p>{{eatery}}</p>
</span>
</md-pst-item>
</md-pst>
</section>
</md-content>
</span>
</body>
</html>
Result
Verify the result.
Angular Material - Swipe
The Swipe functionapty 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>
<pnk rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.js"></script>
<pnk 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( firstApppcation , [ 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 = "firstApppcation">
<md-card>
<span id = "swipeContainer" ng-controller = "swipeController as ctrl"
layout = "row" ng-cloak>
<span flex>
<span 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>
</span>
<md-spanider></md-spanider>
<span class = "demo-swipe" md-swipe-right = "onSwipeRight()">
<span class = "no-select">Swipe me to the right</span>
</span>
</span>
<md-spanider></md-spanider>
<span flex layout = "row">
<span flex layout = "row" layout-apgn = "center center"
class = "demo-swipe" md-swipe-up = "onSwipeUp()">
<span class = "no-select">Swipe me up</span>
</span>
<md-spanider></md-spanider>
<span flex layout = "row" layout-apgn = "center center"
class = "demo-swipe" md-swipe-down = "onSwipeDown()">
<span class = "no-select">Swipe me down</span>
</span>
</span>
</span>
</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 psts 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 pubpshed. |
| 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 pubpshes the button label used by the screen-readers for accessibipty. 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>
<pnk rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.js"></script>
<pnk rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script language = "javascript">
angular
.module( firstApppcation , [ 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 = "firstApppcation">
<span 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>
</span>
</body>
</html>
Result
Verify the result.
Angular Material - Theme
The Angular Material components use the intention group classes pke md-primary, md-accent, md-warn and additional classes for color differences pke 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-pnear
md-radio-button
md-spder
md-switch
md-tabs
md-text-float
md-toolbar
Themes can be configured using $mdThemingProvider during apppcation 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 apppcation.
am_themes.htm
<html lang = "en">
<head>
<pnk rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.js"></script>
<pnk rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script language = "javascript">
angular
.module( firstApppcation , [ ngMaterial ])
.controller( themeController , themeController)
.config(function($mdThemingProvider) {
$mdThemingProvider.theme( customTheme )
.primaryPalette( grey )
.accentPalette( orange )
.warnPalette( red );
});
function themeController ($scope) {
}
</script>
</head>
<body ng-app = "firstApppcation">
<span id = "themeContainer" ng-controller = "themeController as ctrl" ng-cloak>
<md-toolbar class = "md-primary">
<span class = "md-toolbar-tools">
<h2 class = "md-flex">Default Theme</h2>
</span>
</md-toolbar>
<hr/>
<md-card>
<md-card-content layout = "column">
<md-toolbar class = "md-primary">
<span class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-primary style</h2>
</span>
</md-toolbar>
<md-toolbar class = "md-primary md-hue-1">
<span class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-primary md-hue-1 style</h2>
</span>
</md-toolbar>
<md-toolbar class = "md-primary md-hue-2">
<span class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-primary md-hue-2 style</h2>
</span></md-toolbar>
<md-toolbar class = "md-accent">
<span class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-accent style</h2>
</span>
</md-toolbar>
<md-toolbar class = "md-accent md-hue-1">
<span class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-accent md-hue-1 style</h2>
</span>
</md-toolbar>
<md-toolbar class = "md-accent md-hue-2">
<span class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-accent md-hue-2 style</h2>
</span>
</md-toolbar>
<md-toolbar class = "md-warn">
<span class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-warn style</h2>
</span>
</md-toolbar>
<md-toolbar class = "md-warn md-hue-1">
<span class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-warn md-hue-1 style</h2>
</span>
</md-toolbar>
<md-toolbar class = "md-warn md-hue-2">
<span class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-warn md-hue-2 style</h2>
</span>
</md-toolbar>
</md-card-content>
</md-card>
<span md-theme = "customTheme">
<md-toolbar class = "md-primary">
<span class = "md-toolbar-tools">
<h2 class = "md-flex">Custom Theme</h2>
</span>
</md-toolbar>
<hr/>
<md-card>
<md-card-content layout = "column">
<md-toolbar class = "md-primary">
<span class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-primary style</h2>
</span>
</md-toolbar>
<md-toolbar class = "md-primary md-hue-1">
<span class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-primary md-hue-1 style</h2>
</span>
</md-toolbar>
<md-toolbar class = "md-primary md-hue-2">
<span class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-primary md-hue-2 style</h2>
</span>
</md-toolbar>
<md-toolbar class = "md-accent">
<span class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-accent style</h2>
</span>
</md-toolbar>
<md-toolbar class = "md-accent md-hue-1">
<span class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-accent md-hue-1 style</h2>
</span>
</md-toolbar>
<md-toolbar class = "md-accent md-hue-2">
<span class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-accent md-hue-2 style</h2>
</span>
</md-toolbar>
<md-toolbar class = "md-warn">
<span class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-warn style</h2>
</span>
</md-toolbar>
<md-toolbar class = "md-warn md-hue-1">
<span class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-warn md-hue-1 style</h2>
</span>
</md-toolbar>
<md-toolbar class = "md-warn md-hue-2">
<span class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-warn md-hue-2 style</h2>
</span>
</md-toolbar>
</md-card-content>
</md-card>
</span>
</span>
</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>
<pnk rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.js"></script>
<pnk rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script language = "javascript">
angular
.module( firstApppcation , [ 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 )
.highpghtAction(false);
$mdToast.show(toast).then(function(response) {
if ( response == ok ) {
alert( You cpcked OK . );
}
});
}
}
</script>
</head>
<body ng-app = "firstApppcation">
<span id = "toastContainer" ng-controller = "toastController as ctrl"
layout = "row" ng-cloak>
<md-button ng-cpck = "showToast1()">Show Simple Alert</md-button>
<md-button ng-cpck = "showToast2()">Show Alert with callback</md-button>
</span>
</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 apppcation.
The following table psts 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-headpne 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>
<pnk rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.js"></script>
<pnk rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script language = "javascript">
angular
.module( firstApppcation , [ ngMaterial ])
.controller( typographyController , typographyController);
function typographyController ($scope) {
}
</script>
</head>
<body ng-app = "firstApppcation">
<span 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-headpne">.md-headpne</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>
</span>
</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 psts 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 scrolpng 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 psts 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 − getItemAtIndex − function(index) [object] - The item at that index or null if it is not yet loaded (it should start downloading the item in that case). getLength − function() [number] - The data length to which the repeater container should be sized. Ideally, when the count is known, this method should return it. Otherwise, return a higher number than the currently loaded items to produce an infinite-scroll behavior. |
Example
The following example showe the use of virtual repeat.
am_virtualrepeat.htm
<html lang = "en">
<head>
<pnk rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.js"></script>
<pnk 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 sopd #ddd;
box-sizing: border-box;
display: inpne-block;
height: 84px;
padding-top: 35px;
text-apgn: center;
width: 50px;
}
.vrepeatContainer .repeated-item-vertical {
border-bottom: 1px sopd #ddd;
box-sizing: border-box;
height: 40px;
padding-top: 10px;
}
.vrepeatContainer md-content {
margin: 16px;
}
.vrepeatContainer md-virtual-repeat-container {
border: sopd 1px grey;
}
</style>
<script language = "javascript">
angular
.module( firstApppcation , [ 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 = "firstApppcation">
<span 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>
<span md-virtual-repeat = "item in ctrl.items"
class = "repeated-item-horizontal" flex>
{{item}}
</span>
</md-virtual-repeat-container>
<h2>Vertical Repeat</h2>
<md-virtual-repeat-container id = "vertical-container">
<span md-virtual-repeat = "item in ctrl.items"
class = "repeated-item-vertical" flex>
{{item}}
</span>
</md-virtual-repeat-container>
</md-content>
</span>
</body>
</html>
Result
Verify the result.
Angular Material - WhiteFrame
Angular Material has several special classes to display containers as paper-pke cards with shadow.
The following table psts 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>
<pnk rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.js"></script>
<pnk 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( firstApppcation , [ ngMaterial ])
.controller( frameController , frameController);
function frameController ($scope) {
}
</script>
</head>
<body ng-app = "firstApppcation">
<span 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-apgn = "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-apgn = "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-apgn = "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-apgn = "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-apgn = "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-apgn = "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-apgn = "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-apgn = "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-apgn = "center center">
<span>.md-whiteframe-24dp</span>
</md-whiteframe>
</span>
</body>
</html>
Result
Verify the result.
Advertisements