Angular Material - Toolbars

The md-toolbar, an Angular directive is used to show a toolbar which is normally an area above the content to show the title and the relevant buttons.
The following table lists out the parameters and description of the different attributes of the md-toolbar.
md-scroll-shrink
This determines whether the header should shrink away as the user scrolls down, and reveal itself as the user scrolls up.
for scrollShrink to work, the toolbar must be a sibling of an md-content element, placed before it.
for scrollShrink to work, the toolbar must be a sibling of an md-content element, placed before it.
The md-scroll-shrink attribute is only parsed on component initialization, it does not watch for scope changes.
The md-scroll-shrink attribute is only parsed on component initialization, it does not watch for scope changes.
md-shrink-speed-factor
How much to change the speed of the toolbar's shrinking by. For example, if 0.25 is given then the toolbar will shrink at one fourth the rate at which the user scrolls down. By default, it is 0.5.
The following example shows the use of toolbar.
am_toolbar.htm
<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('toolbarController', toolbarController);
           
         function toolbarController ($scope) { 
            var self = this;            
            self.allContacts = loadContacts();
            self.contacts = [self.allContacts[0]];
                        
            function loadContacts() {
               var contacts = [
                  'Roberto Karlos',
                  'Bob Crestor',
                  'Nigel Rick',
                  'Narayana Garner'                  
               ];
               
               return contacts.map(function (c, index) {
                  var cParts = c.split(' ');
                  
                  var contact = {
                     name: c,
                     email: cParts[0][0].toLowerCase() + '.' + cParts[1].toLowerCase()
                        + '@example.com',
                     image: 'http://lorempixel.com/50/50/people?' + index
                  };
                  
                  contact._lowername = contact.name.toLowerCase();
                  return contact;
               });
            } 
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "toolbarContainer" ng-controller = "toolbarController as ctrl"
         layout = "column" ng-cloak>
         <md-content>
            <md-toolbar md-scroll-shrink>
               <div class = "md-toolbar-tools">
                  <md-button class = "md-icon-button" aria-label = "Settings">
                     <md-icon class = "material-icons">menu</md-icon>
                  </md-button>
                  
                  <h2>
                     <span>Contacts</span>
                  </h2>
                  
                  <span flex></span>
                  <md-button class = "md-icon-button" aria-label = "More">
                     <md-icon class = "material-icons">more_vert</md-icon>
                  </md-button>
               </div>
            </md-toolbar>
            
            <md-list>
               <md-subheader class = "md-no-sticky">Contacts</md-subheader>
               <md-list-item class = "md-2-line contact-item"
                  ng-repeat = "(index, contact) in ctrl.allContacts"
                  ng-if = "ctrl.contacts.indexOf(contact) < 0">
                  <img ng-src = "{{contact.image}}" class = "md-avatar"
                     alt = "{{contact.name}}" />
                  
                  <div class = "md-list-item-text compact">
                     <h3>{{contact.name}}</h3>
                     <p>{{contact.email}}</p>
                  </div>
                  
                  <md-divider ng-if = "!$last"></md-divider>
               </md-list-item>
            </md-list>
            
            <md-list>
               <md-subheader class = "md-no-sticky">Contacts (With Insets)</md-subheader>
               <md-list-item class = "md-2-line contact-item"
                  ng-repeat = "(index, contact) in ctrl.allContacts"
                  ng-if = "ctrl.contacts.indexOf(contact) < 0">
                  <img ng-src = "{{contact.image}}" class = "md-avatar"
                     alt = "{{contact.name}}" />
                  <div class = "md-list-item-text compact">
                     <h3>{{contact.name}}</h3>
                     <p>{{contact.email}}</p>
                  </div>
                  <md-divider md-inset ng-if = "!$last"></md-divider>
               </md-list-item>
            </md-list>
            
         </md-content>	 
      </div>
   </body>
</html>
Verify the result.
{{contact.email}}
{{contact.email}}

    16 Lectures 
     1.5 hours 

 Anadi Sharma

    28 Lectures 
     2.5 hours 

 Anadi Sharma

    11 Lectures 
     7.5 hours 

 SHIVPRASAD KOIRALA

    16 Lectures 
     2.5 hours 

 Frahaan Hussain

    69 Lectures 
     5 hours 

 Senol Atac

    53 Lectures 
     3.5 hours 

 Senol Atac
 Print
 Add Notes
 Bookmark this page