Material Angular - Folha Inferior

o $mdBottomSheet, um serviço angular, é usado para abrir uma folha inferior sobre o aplicativo e fornece uma API de promessa simples.

SN Método e Descrição
1

$mdBottomSheet.show(options);

Mostra uma folha inferior com as opções especificadas.

SN Parâmetro e Descrição
1

* options

Um objeto de opções, com as seguintes propriedades -

  • templateUrl - {string=}- O url de um arquivo de modelo html que será usado como o conteúdo da folha inferior. Restrições: o template deve ter um elemento externo md-bottom-sheet.

  • template - {string=} - O mesmo que templateUrl, exceto que esta é uma string de modelo real.

  • scope - {object=}- O escopo ao qual vincular o modelo / controlador. Se nenhum for especificado, ele criará um novo escopo filho. Este escopo será destruído quando a folha inferior for removida, a menos que preserveScope seja definido como verdadeiro.

  • preserveScope - {boolean=}- Dita se o escopo deve ser preservado quando o elemento for removido. Por padrão, é falso.

  • controller - {string=} - O controlador a ser associado a esta folha inferior.

  • locals - {string=}- Um objeto que contém pares de chave / valor. As chaves serão usadas como nomes de valores a serem injetados no controlador. Por exemplo,locals: {three: 3} injetará três no controlador com o valor 3.

  • clickOutsideToClose - {boolean=}- Dita se o usuário pode clicar fora da folha inferior para fechá-la. Por padrão, é verdade.

    • escapeToClose - {boolean =}: determina se o usuário pode pressionar escape para fechar a folha inferior. Por padrão, é verdade.

  • resolve - {object=} - Semelhante aos locais, exceto que leva promessas como valores e a folha de baixo não será aberta até que as promessas sejam resolvidas.

    • controllerAs - {string =}: um alias para atribuir o controlador no escopo.

  • parent - {element=}- O elemento ao qual anexar a folha inferior. O pai pode ser uma função, string, objeto ou nulo. O padrão é anexar ao corpo do elemento raiz (ou o elemento raiz) do aplicativo. por exemplo, angular.element (document.getElementById ('content')) ou "#content".

  • disableParentScroll - {boolean=}- Se deve desativar a rolagem enquanto a folha inferior está aberta. Padrão verdadeiro.

Sr. Não Devoluções e descrição
1

promise

Uma promessa que pode ser resolvida com $ mdBottomSheet.hide () ou rejeitada com $ mdBottomSheet.cancel ().

Exemplo

O exemplo a seguir mostra o uso do $mdBottomSheet serviço e também o uso de folha de fundo.

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>

Resultado

Verifique o resultado.