Question

使用$mdToast.simple().content("some test")时，它会显示黑色烤面包。如何将该颜色更改为红色，黄色等，具体取决于错误消息的类型，如错误，警告和成功。

与this类似的问题。

Answer 1

通过指定主题有一种更简单的方法：

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

在你的CSS中：

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

您可以合并邮件类型以动态选择主题。

<强>更新：正如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 2

修改
要正确实施，请使用下面的rlay3s solution：）！

<强>过时：
我在使用jhblacklocks解决方案显示自定义文本时遇到问题，因此我决定使用＆＃39;模板＆＃39;
这样做。
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

注册主题：

$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 4

您可以在此链接上看到您无法更改元素的背景颜色，它将始终固定：

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

这是因为Toasts的材料设计指南声明背景将始终保持不变：

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

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

在每种情况下，没有任何关于文字颜色的说法，它暗示它遵循backgroundPalette，在＆＃39; 50＆＃39;色调旋转，在GitHub Link上的CSS上声明。

从默认设置warn toast或accent -ted中区分action toast吐司的方式，调用md-warn，每个都使用相应的类（{{{ 1}}或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形式意味着行动报告，暗示成功。如果它需要更多关注，~~通过设置操作按钮强制关闭~~添加“重试＆＃39;”，“报告问题＆＃39;”等行为。 ;详细信息＆＃39;，可用于捕获此点击并记录一些技术信息等......示例因您的需要而异。

Answer 5

rlay3的答案还有一步。

0.7.1的Angular Material为未注册的主题添加了警告。 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().

要摆脱警告，您需要配置主题＆＃39; custom-toast＆＃39;在你的角度应用中：

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

您确实询问过使用简单的吐司电话。您是否介意尝试自定义Toast show like the demo并向模板中添加类？

JS

$mdToast.show(
  controller: 'ToastCtrl',
  templateUrl: 'views/shared/toast.html',
  hideDelay: 6000,
  position: $scope.getToastPosition()
)

TEMPLATE

<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;
}

CONTROLLER（COFFEE）

'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 7

只是给出另一个选项，$mdToast.show( $mdToast.error() );允许定义toast presets ，你可以用这种方式轻松实例化，虽然我很难理解如何更改文本内容，任何想法？

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

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

所述

post(url : string, json : any) : Observable <\Response> {

    var headers = new Headers();
    var token = null;
    this.local.get("token").then( (tk) => {
        headers.append('Authorization', 'Bearer ' + tk);
        var options = new RequestOptions({headers: headers});
        token = tk;
    });

    -> wait the 'token' != null <-
    return this.http.post(url, JSON.stringify( json ), options);
}

Answer 8

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

如何更改Toast的颜色取决于Angular材质$ mdToast中的消息类型？

8 个答案: