angular Material Archives - Page 3 of 3 - Donotsad where can learn any thing work project and make money

Aug 10

Angular Material – Cards

Angular Material – Cards ”; Previous Next 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 Live Demo <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. Print Page Previous Next Advertisements ”;

Aug 10

Angular Material – Overview

Angular Material – Overview ”; Previous Next 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. Print Page Previous Next Advertisements ”;

Aug 10

Angular Material – Autocomplete

Angular Material – Autocomplete ”; Previous Next 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 Live Demo <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. Print Page Previous Next Advertisements ”;

Aug 10

Environment Setup

Angular Material – Environment Setup ”; Previous Next 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 − Live Demo <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. Live Demo <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 − Print Page Previous Next Advertisements ”;