Vật liệu góc cạnh - Bánh mì nướng
Angular Material cung cấp các phương pháp đặc biệt khác nhau để hiển thị các cảnh báo không phô trương cho người dùng. Nó cũng cung cấp một thuật ngữ bánh mì nướng cho họ. Dịch vụ $ mdToast được sử dụng để nâng cốc chúc mừng.
Thí dụ
Ví dụ sau đây cho thấy việc sử dụng chúc rượu.
am_toasts.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>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('toastController', toastController);
function toastController ($scope, $mdToast, $document) {
$scope.showToast1 = function() {
$mdToast.show (
$mdToast.simple()
.textContent('Hello World!')
.hideDelay(3000)
);
};
$scope.showToast2 = function() {
var toast = $mdToast.simple()
.textContent('Hello World!')
.action('OK')
.highlightAction(false);
$mdToast.show(toast).then(function(response) {
if ( response == 'ok' ) {
alert('You clicked \'OK\'.');
}
});
}
}
</script>
</head>
<body ng-app = "firstApplication">
<div id = "toastContainer" ng-controller = "toastController as ctrl"
layout = "row" ng-cloak>
<md-button ng-click = "showToast1()">Show Simple Alert</md-button>
<md-button ng-click = "showToast2()">Show Alert with callback</md-button>
</div>
</body>
</html>Kết quả
Xác minh kết quả.