当使用$mdToast.simple().content("some test")
时,它用黑色显示吐司。如何将颜色更改为红色、黄色等取决于错误、警告和成功等错误消息类型。
与this类似的问题。
发布于 2016-03-05 01:33:40
注册主题:
$mdThemingProvider.theme("success-toast");
$mdThemingProvider.theme("error-toast");
添加css:
md-toast.md-error-toast-theme div.md-toast-content{
color: white !important;
background-color: red !important;
}
md-toast.md-success-toast-theme div.md-toast-content{
color: white !important;
background-color: green !important;
}
使用:
$mdToast.show(
$mdToast.simple()
.content(message)
.hideDelay(2000)
.position('bottom right')
.theme(type + "-toast")
);
发布于 2015-09-03 02:14:37
对于rlay3的答案又多了一步。
Angular Material版本0.7.1增加了对未注册主题的警告。https://github.com/angular/material/blob/master/CHANGELOG.md#071--2015-01-30
如果没有注册主题,则每次出现toast时,您都会在控制台中收到一条警告消息,例如:
attempted to use unregistered theme 'custom-toast'
angular.js:12416 Attempted to use unregistered theme 'custom-toast'.
Register it with $mdThemingProvider.theme().
为了摆脱这个警告,你需要在你的angular应用中配置主题'custom-toast‘:
angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider) {
$mdThemingProvider.theme('custom-toast')
});
并像这样使用它:
$mdToast.simple().content("some test").theme("custom-toast");
参考资料:https://material.angularjs.org/latest/#/Theming/04_multiple_themes
发布于 2015-02-27 05:19:57
您确实询问了如何使用简单的toast调用。您是否介意尝试自定义吐司、显示like the demo并将类添加到模板中?
JS
$mdToast.show(
controller: 'ToastCtrl',
templateUrl: 'views/shared/toast.html',
hideDelay: 6000,
position: $scope.getToastPosition()
)
模板
<md-toast class="flash">
<span flex>Custom toast!</span>
<md-button ng-click="closeToast()">
Close
</md-button>
</md-toast>
CSS
md-toast.flash {
background-color: red;
color: white;
}
控制器(咖啡)
'use strict'
###*
# @ngdoc function
# @name angularApp.controller:ToastCtrl
# @description
# # ToastCtrl
# Controller of the angularApp
###
angular.module('angularApp')
.controller 'ToastCtrl', ($scope) ->
$scope.closeToast = ()->
$mdToast.hide()
https://stackoverflow.com/questions/28481029
复制相似问题