如何根据 Angular material $mdToast 中的消息类型更改 Toast 的颜色？

Question

在使用 $mdToast.simple().content("some test") 时，显示的是黑色吐司。我怎样才能将该颜色更改为红色、黄色等，具体取决于错误消息的类型，如错误、警告和成功。

与类似的问题。

Answer 1

您确实询问过使用简单的 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()

Answer 2

编辑：
为了正确实施，请使用下面的 rlay3s :)!

已过时：
我在使用 jhblacklocks 解决方案显示自定义文本时遇到问题，所以我决定使用 'template':

var displayToast = function(type, msg) {

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

我还在我的 .css 文件中添加了不同的类型：

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

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

不知道这是否是最漂亮的方法，但我不需要每种对话框类型的模板文件，显示自定义文本真的很容易。

Answer 3

指定主题有更简单的方法：

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

在你的CSS中：

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

您可以将您的消息类型合并到动态select 主题中。

更新：正如 Charlie Ng 指出的那样，为了避免有关使用未注册自定义主题的警告，请使用主题提供程序在您的模块中注册它：$mdThemingProvider.theme("success-toast")

另一个更新： 2015 年 12 月 2 日创建了一个 breaking change (v1.0.0+)。您现在需要指定：

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

Answer 4

我首先喜欢这个解决方案，但我不喜欢在主题提供者中设置主题只是为了祝酒词。那么这个解决方案怎么样：

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 选项将变量传递给控制器，但由于某些原因它们没有被注入。（https://material.angularjs.org/latest/#/api/material.components.toast/service/$mdToast 检查 show 下的选项列表函数)

然后最后 CSS (STYLUS)

md-toast.success
  background-color    green

md-toast.error
  background-color    red

总结：在这种情况下，您可以在模板上提供自定义占位符，您可以在控制器中预先填充这些占位符。这个解决方案对我有用。

Answer 5

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

Answer 6

你可以看到这个link你不能改变元素的背景颜色，它总是固定的：

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

这是因为 Material Toast 设计指南指出背景将始终保持不变：

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

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

在每种情况下都没有说明文本颜色，这暗示它遵循 backgroundPalette，在 '50' 色调旋转上，在 CSS 上声明在 GitHub Link.

区分 warn toast 或 accent-ted 的方式，默认调用 action toast，每个都使用适当的 class（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'
});

祝酒词本身，其 default 形式表示行动报告，暗示成功。如果它需要更多关注，~~通过设置一个操作按钮强制关闭它~~ 添加像 'Retry'、'Report a problem'、'Details' 这样的操作，可以用于捕获此点击并记录一些技术信息等...示例因您需要而异。

Answer 7

注册主题：

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

Answer 8

只是为了提供另一个选项，$mdToast 允许定义 toast presets，您可以通过这种方式轻松实例化，尽管我正在努力了解如何更改文字内容，有想法吗？

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

presets 的定义如 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
    };
  }
});

Answer 9

你可以用 factory 和一些 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;
}

如何根据 Angular material $mdToast 中的消息类型更改 Toast 的颜色？

how can I change the color of Toast depends on message type in Angular material $mdToast?

toast

angularjs

material-design

angular-material