পৃষ্ঠাসমূহ

.

Search Your Article

Total Pageviews

Thursday, February 9, 2017

Angular Material - Bottom Sheet

$mdBottomSheet, an Angular Service, is used to open a bottom sheet over the application and provides a simple promise API.

Methods

S.N.Method & Description
1$mdBottomSheet.show(options);
Show a bottom sheet with the specified options.
S.N.Parameter & Description
1* options
An options object, with the following properties:
  • templateUrl - {string=}: The url of an html template file that will be used as the content of the bottom sheet. Restrictions: the template must have an outer md-bottom-sheet element.
  • template - {string=}: Same as templateUrl, except this is an actual template string.
  • scope - {object=}: the scope to link the template / controller to. If none is specified, it will create a new child scope. This scope will be destroyed when the bottom sheet is removed unless preserveScope is set to true.
  • preserveScope - {boolean=}: whether to preserve the scope when the element is removed. Default is false.
  • controller - {string=}: The controller to associate with this bottom sheet.
  • locals - {string=}: An object containing key/value pairs. The keys will be used as names of values to inject into the controller. For example, locals: {three: 3} would inject three into the controller with the value of 3.
  • clickOutsideToClose - {boolean=}: Whether the user can click outside the bottom sheet to close it. Default true.
  • escapeToClose - {boolean=}: Whether the user can press escape to close the bottom sheet. Default true.
  • resolve - {object=}: Similar to locals, except it takes promises as values and the bottom sheet will not open until the promises resolve.
  • controllerAs - {string=}: An alias to assign the controller to on the scope.
  • parent - {element=}: The element to append the bottom sheet to. The parent may be a function, string, object, or null. Defaults to appending to the body of the root element (or the root element) of the application. e.g. angular.element(document.getElementById('content')) or "#content".
  • disableParentScroll - {boolean=}: Whether to disable scrolling while the bottom sheet is open. Default true.
S.N.Returns & Description
1promise
A promise that can be resolved with $mdBottomSheet.hide() or rejected with $mdBottomSheet.cancel().

Example

The following example showcases the use of $mdBottomSheet service to showcase use of bottom sheet.
am_bottomsheet.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>
   <script language="javascript">
        angular
           .module('firstApplication', ['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="firstApplication">
      <div 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-click="openBottomSheet()">
                  Open Bottom Sheet!
               </md-button>
            </form>
         </md-content>
      </div>
   </body>
</html>

Result

Verify the result.

No comments:

Post a Comment