如何改变Toast的颜色取决于Angular材质$ mdToast的消息types?

当使用$mdToast.simple().content("some test")它显示黑色的敬酒。 我怎样才能改变颜色为红色,黄色等等,取决于错误信息的types,如错误,警告和成功。

类似的问题是这样的 。

编辑:
为了正确的实施,请使用下面的rlay3s 解决scheme :)!

过时的:
我有jhblacklocks解决scheme显示自定义文本的问题,所以我决定这样做,使用'模板':

 var displayToast = function(type, msg) { $mdToast.show({ template: '<md-toast class="md-toast ' + type +'">' + msg + '</md-toast>', hideDelay: 6000, position: 'bottom right' }); }; 

我也在我的.css文件中添加了不同的types:

 .md-toast.error { background-color: red; } .md-toast.success { background-color: green; } 

不知道这是否是最漂亮的方法,但我不需要每个对话框types的模板文件,并显示自定义文本是很容易的。

指定一个主题有一个更简单的方法:

 $mdToast.simple().content("some test").theme("success-toast") 

并在你的CSS:

 md-toast.md-success-toast-theme { background-color: green; ... } 

你可以合并你的消息types来dynamicselect一个主题。

更新 :正如Charlie Ng指出的那样,为了避免使用未注册的自定义主题的警告,在你的模块中使用主题提供者注册它: $mdThemingProvider.theme("success-toast")

另一个更新 :2015年12月2日创build了一个突破性的更改 (v1.0.0 +)。 您现在需要指定:

 md-toast.md-success-toast-theme { .md-toast-content { background-color: green; ... } } 

你可以看到这个链接,你不能改变元素的背景颜色,它将永远是固定的:

https://github.com/angular/material/blob/master/src/components/toast/toast-theme.scss

这是因为“面包材料devise指南”指出背景总是保持不变:

https://www.google.com/design/spec/components/snackbars-toasts.html#snackbars-toasts-specs

请注意规格列表中的background项目。

关于每种情况下的文本颜色都没有提到,这意味着它遵循backgroundPalette ,在GitHub链接上的CSS上声明的'50'色调旋转。

用默认的方式来区分warn敬酒或者accent敬酒,调用一个action toast ,每个动作的动作button使用相应的类( md-warn或者md-accent )。

 $mdToast.show({ template: '<md-toast>\ {{ toast.content }}\ <md-button ng-click="toast.resolve()" class="md-warn">\ Ok\ </md-button>\ </md-toast>', controller: [function () { this.content = 'Toast Content'; }], controllerAs: 'toast' }); 

敬酒本身,其defaultforms意味着一个行动报告,成功隐含着。 如果需要更多关注,可以通过设置一个动作button来加强closures,添加“重试”,“报告问题”,“细节”等操作,可以用来捕获点击并logging一些技术信息等。 ..例子不同,你需要什么。

注册主题:

 $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") ); 

再来一步rlay3的答案。

0.7.1处的angular度材料对未注册的主题添加了警告。 https://github.com/angular/material/blob/master/CHANGELOG.md#071–2015-01-30

如果主题没有注册,每次吐司出现,您将在控制台中收到警告消息,例如:

 attempted to use unregistered theme 'custom-toast' angular.js:12416 Attempted to use unregistered theme 'custom-toast'. Register it with $mdThemingProvider.theme(). 

为了摆脱这个警告,你需要在你的angular app中configuration主题'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

你曾问过如何使用简单的吐司电话。 你介意尝试一个像演示一样的自定义的吐司表演,并添加类到模板?

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() 

只是为了给出另一种select, $mdToast允许定义吐司预设 ,你可以很容易地用这种方式实例化,虽然我很努力去理解如何改变文本内容,任何想法?

 $mdToast.show( $mdToast.error() ); 

预设定义如https://material.angularjs.org/latest/api/service/ $ mdToast所述:

 $mdToastProvider.addPreset('error', { options: function() { return { template: '<md-toast>' + '<div class="md-toast-content">' + '</div>' + '</md-toast>', position: 'top left', hideDelay: 2000, toastClass: 'toast-error', controllerAs: 'toast', bindToController: true }; } }); 

我首先赞成这个解决scheme,但是我不喜欢在主题提供者中为敬酒设置一个主题。 那么这个解决scheme如何呢?

JS(咖啡)

  if error message = '' if error.reason is 'Incorrect password' message = 'Email and password combination is incorrect' if error.reason is 'User not found' message = 'No account found with this email address' $mdToast.show( templateUrl: 'client/modules/toasts/toastError.html' hideDelay: 3000 controller: ( $scope ) -> $scope.message = message $scope.class = 'error' $scope.buttonLabel = 'close' $scope.closeToast = -> $mdToast.hide() ).then( ( result ) -> if result is 'ok' console.log('do action') ) 

然后HTML(JADE)

 md-toast(ng-class="class") span(flex) {{message}} md-button.md-action(ng-click="closeToast()") {{buttonLabel}} 

我试图使用locals选项传递给控制器​​的variables,但由于某种原因,他们没有注入。( https://material.angularjs.org/latest/#/api/material.components.toast/service/ $ mdToast查看show function下的选项列表)

然后是CSS(STYLUS)

 md-toast.success background-color green md-toast.error background-color red 

总结:在这种情况下,你可以给你的控制器预先填写自定义占位符。 这个解决scheme适用于我。

你可以用工厂和一些CSS来做到这一点。

 (function () { 'use strict'; angular .module('app.core') .factory('ToastService', ToastService); /** @ngInject */ function ToastService($mdToast) { var service = { error: error, success: success, info : info }; return service; ////////// function success(text) { $mdToast.show( $mdToast.simple() .toastClass("toast-success") .textContent(text) ); } function info(text) { $mdToast.show( $mdToast.simple() .toastClass("toast-info") .textContent(text) ); } function error(text) { $mdToast.show( $mdToast.simple() .toastClass("toast-error") .textContent(text) ); } } }()); 

和css。

 .toast-error .md-toast-content{ background-color: rgb(102,187,106) !important; } .toast-info .md-toast-content{ background-color: rgb(41,182,246) !important; } .toast-error .md-toast-content{ background-color: rgb(239,83,80) !important; } 
    Interesting Posts