Vật liệu dạng góc - Tấm dưới cùng
Các $mdBottomSheet, một Dịch vụ Angular, được sử dụng để mở trang dưới cùng của ứng dụng và cung cấp một API hứa đơn giản.
| SN | Phương pháp & Mô tả | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| 1 | $mdBottomSheet.show(options); Hiển thị trang dưới cùng với các tùy chọn được chỉ định.
|
Thí dụ
Ví dụ sau đây cho thấy việc sử dụng $mdBottomSheet dịch vụ và cả việc sử dụng tờ dưới cùng.
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>Kết quả
Xác minh kết quả.