Bottom Sheet—List View

Consider Figure 9-2. It shows the bottom sheet for login options.

Figure 9-2. Bottom sheet depicting login options

The following code is used for creating the sample.

angular.module("sampleApp", ["ngMaterial"])
    .controller('sampleController',function($scope, $mdBottomSheet){
       $scope.showBottomSheet = function(){
          $mdBottomSheet.show({
             templateUrl: "/bottom-sheet-template.html"
          });
       };
    })

Unlike the previous sample, here we are using template URL. This is a preferred option because as templates grow in size, it becomes difficult to fit it all in the template field (of the JSON object). Consider the following template .

<md-bottom-sheet class="md-list ">
     <md-subheader>
        Choose Login Mechanism
    </md-subheader>
    <md-list>
        <md-list-item>
            <div>
                <md-button >
                     <md-icon md-svg-src="icons/ic_verified_user_black_24px.svg"></md-icon>
                     <span>UserId & Password</span>
                 </md-button>    
             </div>
         </md-list-item>
         <md-list-item>
             <div>
                 <md-button >
                     <md-icon md-svg-src="icons/ic_fingerprint_black_24px.svg"></md-icon>
                     <spanFingerprint</span>
                 </md-button>    
              </div>
         </md-list-item>
         <md-list-item>
             <div>
                 <md-button >
                     <md-icon md-svg-src="icons/ic_camera_black_24px.svg"></md-icon>
                        <span>Facial Recognition</span>
              </md-button>
          </div>
      </md-list-item>
     </md-list>
    </md-bottom-sheet>                                                                                          

Notice the CSS class md-list on the root element of the template, md-bottom-sheet. It ensures that the bottom sheet options are aligned vertically, like a list.

We are using md-subheader element for the header on the bottom sheet. We could use an h1, h2, or h3 element. Nevertheless, a subheader directive provides proper spacing and font size for the subheader. It is also a personal choice. We could choose to use a different element altogether.

The second element in md-bottom-sheet is the md-list itself. It has a list of options arranged by the list directive. We are using buttons with icons for descriptive information about each option.

Bottom Sheet—Grid View

The other view option with bottom sheet is to arrange actions on it like a grid. See Figure 9-3.

Figure 9-3. Bottom sheet aligned to a grid

Changes are straightforward. Compared to the list view, change the CSS class on md-bottom-sheet to md-grid (from md-list). Considering the available space on the bottom sheet, you might choose to remove textual titles below or adjust the font accordingly. The following are the snippets that are different from the preceding sample.

<md-bottom-sheet class="md-grid">            

Here is the list item template in the sample.

<md-list-item>
   <div>
       <md-button >
            <md-icon md-svg-src="icons/ic_verified_user.svg" style="width:48px; height:48px; color:red;"></md-icon> <br/>
             <sup>User Id & Password</sup>
        </md-button>    
    </div>
</md-list-item>

Handle Bottom Sheet Actions

The buttons on bottom sheet are only meaningful if an action occurs on clicking them. We need to code handlers for those events. Review show() function on $mdBottomSheet service. The JSON object passed in as parameter also accepts a controller. Here, we can write handlers for each button on the bottom sheet. Consider the following code.

$mdBottomSheet.show({
   templateUrl: "/bottom-sheet-template.html",
   controller: function($scope){            
       $scope.defaultAuthenticationHandler = function(){            
           console.log("Take user to login form");            
       }            
       $scope.fingerprintHandler = function(){            
                         console.log("Let's authenticate user by fingerprints");  
      };            
      $scope.facialRecognitionHandler = function(){            
          console.log("Use camera and identify the user");            
               };            
           }            
        });            

We have three handler functions written on scope, namely, defaultAuthenticationHandler, fingerprintHandler, and facialRecognitionHandler.

Next, we bind them on the HTML template on ng-click. As the user clicks one of the three buttons, the appropriate handler is called. Consider the following HTML template code. For the sample, as the user clicks one of the buttons, the log statement is printed on the browser’s console. In a full-fledged app, we can navigate to the appropriate login screen or invoke hardware functionality (for example, switch on camera for facial recognition).

<md-list >
    <md-list-item>
        <div>
            <md-button ng-click="defaultAuthenticationHandler()">
                 <md-icon md-svg-src="icons/ic_verified_user.svg" style="width:48px; height:48px; color:red;"></md-icon> <br/>
                <sup>User Id & Password</sup>
            </md-button>    
        </div>
    </md-list-item>
    <md-list-item>
        <div>
            <md-button ng-click="fingerprintHandler()">            
                      <md-icon md-svg-src="icons/ic_fingerprint.svg" style="width:48px; height:48px; color:red;"></md-icon><br/>
                 <sup>Fingerprint</sup>
            </md-button>    
        </div>
    </md-list-item>
    <md-list-item>
        <div>                                                                                          
            <md-button ng-click="facialRecognitionHandler()">            
              <md-icon md-svg-src="icons/ic_camera.svg" style="width:48px; height:48px; color:red;"></md-icon><br/>
                 <sup>Facial Recognition</sup>
            </md-button>
        </div>
    </md-list-item>
</md-list>

The show() API returns a promise. The promise is resolved or rejected on calling hide() or cancel() API, respectively. That is, $mdBottomSheet.hide() resolves the promise, whereas $mdBottomSheet.cancel() rejects the promise. Hence, in the handler we can invoke the appropriate API. Consider the following code.

$scope.fingerprintHandler = function(){
   console.log("Let's authenticate user by fingerprints");  
   $mdBottomSheet.hide();                              
};

The fingerprint handler can call hide() API, indicating that the bottom sheet’s job is done. If we have a cancel button, to recognize withdrawing the bottom sheet, use cancel() API . It rejects the promise. Consider the following code.

$mdBottomSheet.show({
   ... // show function definition
}).then(function(){
    console.log("Promise resolved"); // promise returned by show is resolved.            
}, function(){
    console.log("Promise rejected"); // promise returned by show is rejected.            
});                                                                                          

The following are additional options while using $mdBottomSheet.

1. Scope: Use it to pass scope values between parent controller and bottom sheet directive. If no value is provided, it will create an isolated scope for the bottom sheet.

2. preserveScope: true: Scope value is retained between multiple instances of show/hide of the bottom sheet.

3. clickOutsideToClose: false: Default value is true. When set to false, the bottom sheet will not be closed on losing focus or on clicking outside the control.

4. disableBackdrop: true: Default value is false. When set to true, does not fade the backdrop. See Figure 9-4.

   

   Figure 9-4. Backdrop enabled on the left and disabled on the right

5. escapeToClose: false: Default value is true. If set to false, does not close the bottom sheet on Esc key press on the keyboard.

6. disableParentScroll: false: Default value is true. If set to false, allows backdrop to scroll even when bottom sheet is open.