根据
文档,主题似乎仅适用于
$mdToast.simple()
。
< p>
![enter image description here](https://istack.dev59.com/fhxgB.webp)
对于
$mdToast.show(optionsOrPreset)
,它不是可用选项。不确定原因。但是,可以使用
toastClass
选项来更改提示消息的样式。下面是一个示例 -
CodePen
标记:
<div ng-controller="AppCtrl" class="inset toastdemoCustomUsage" ng-cloak="" style="height:300px; padding: 25px;" ng-app="MyApp">
<md-button ng-click="showCustomToast()" class="md-raised" style="padding-left: 10px;padding-right: 10px;">
Show Custom Toast
</md-button>
<script type="text/ng-template" id="toast-template.html">
<md-toast>
<span class="md-toast-text" flex>{{data.message}}</span>
<md-button ng-click="closeToast()">Close</md-button>
</md-toast>
</script>
</div>
JS
(function() {
angular
.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('AppCtrl', function($scope, $mdToast) {
$scope.showCustomToast = function() {
var data = {type: "SUCCESS", message: "Well done!"};
var toastClass;
switch (data.type) {
case "SUCCESS":
toastClass = "success";
break;
case "ERROR":
toastClass = "error";
break;
case "INFO":
toastClass = "info";
break;
case "WARNING":
toastClass = "warning";
break;
};
$mdToast.show({
hideDelay : 3000,
position : 'top right',
controller : 'ToastCtrl',
templateUrl : 'toast-template.html',
locals: {
data: data
},
toastClass: toastClass
});
};
})
.controller('ToastCtrl', function($scope, $mdToast, $mdDialog, data) {
$scope.data = data;
$scope.closeToast = function() {
if (isDlgOpen) return;
$mdToast
.hide()
.then(function() {
isDlgOpen = false;
});
};
});
})();
CSS
.success .md-toast-content {
background: green;
}
.error .md-toast-content {
background: red;
}
.info .md-toast-content {
background: orange;
}
.warning .md-toast-content {
background: purple;
}