角材料 - 底板（Bottom Sheet）

发布于 2021-06-12 22:40:07 字数 3969 浏览 1006 评论 0 收藏 0

$mdBottomSheet是一个Angular服务，用于在应用程序上打开一个底部工作表，并提供一个简单的promise API。

方法和描述

$mdBottomSheet.show(options);

显示包含指定选项的底部工作表。

参数和描述

* options

一个options对象，具有以下属性 -

templateUrl - {string=} - 将用作底部工作表内容的html模板文件的URL。限制:模板必须具有外部md-bottom-sheet元素。
template - {string=} - 与templateUrl相同，但这是一个实际的模板字符串。
scope - {object=} - 将模板/控制器链接到的范围。如果未指定，则将创建新的子范围。除非将preserveScope设置为true，否则在删除底部工作表时将销毁此范围。
preserveScope - {boolean=} - 它指示在删除元素时是否保留范围。默认情况下，它为false。
controller - {string=} - 与此底部工作表关联的控制器。
locals - {string=} - 包含键/值对的对象。这些键将用作注入控制器的值的名称。例如， locals: {three: 3}将三个注入控制器，值为3。
clickOutsideToClose - {boolean=} - 它指示用户是否可以在底部工作表外单击以关闭它。默认情况下，这是真的。

resolve - {object=} - 与locals类似，不同之处在于它将promises作为值，并且在promises解析之前底部工作表将不会打开。

parent - {element=} - 要将底部工作表附加到的元素。父级可以是函数，字符串，对象或null。默认为追加到应用程序的根元素（或根元素）的主体。例如angular.element（document.getElementById（'content'））或“#content”。
disableParentScroll - {boolean=} - 是否在底部工作表打开时禁用滚动。默认为true。

Sr.No	返回和描述
1	promise 可以使用$ mdBottomSheet.hide（）解决或使用$ mdBottomSheet.cancel（）拒绝的承诺。

例子 (Example)

以下示例显示了$mdBottomSheet服务的使用以及底部工作表的使用。

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> @ wenjiangs.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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

角材料 - 底板（Bottom Sheet）

例子 (Example)

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。