如何根据Angular material $mdToast中的消息类型更改Toast的颜色？
如何根据Angular material $mdToast中的消息类型更改Toast的颜色？
提问于 2015-02-12 23:12:46
当使用$mdToast.simple().content("some test")时，它用黑色显示吐司。如何将颜色更改为红色、黄色等取决于错误、警告和成功等错误消息类型。
与this类似的问题。
回答 5
Stack Overflow用户
发布于 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")
);Stack Overflow用户
发布于 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
Stack Overflow用户
发布于 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()页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28481029
复制相关文章
相似问题