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.

Attributes

The following table lists out the parameters and description of the different attributes of the md-toolbar.

Sr.No Parameter & Description
1

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.

  • The md-scroll-shrink attribute is only parsed on component initialization, it does not watch for scope changes.
2

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.

Example

The following example shows the use of toolbar.

am_toolbar.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('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>

Result

Verify the result.

angular_material_widgets.htm
Advertisements