54

使用$mdToast.simple().content("some test")时，吐司呈黑色。如何将该颜色更改为红色、黄色等，这取决于错误消息的类型，例如错误、警告和成功。

与此类似的问题。

4

9 回答 9

85

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

$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 日（v1.0.0+）创建了一个重大更改。您现在需要指定：

md-toast.md-success-toast-theme {
    .md-toast-content {
        background-color: green;
        ...
    }
}
于 2015-06-23T03:57:04.427 回答
32

编辑：
为了正确实施，请使用下面的rlay3s 解决方案:)！

过时：
我在使用 jhblacklocks 解决方案显示自定义文本时遇到问题，所以我决定使用“模板”来这样做：

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

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

于 2015-04-08T12:21:13.540 回答
13

注册主题：

$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")
);
于 2016-03-04T17:33:40.303 回答
8

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

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

这是因为 Toasts 的 Material Design Guidelines 声明背景将始终保持不变：

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

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

在每种情况下都没有对文本颜色进行任何说明，这暗示它遵循backgroundPalette, 在 '50' 色调旋转上，在 GitHub 链接上的那个 CSS 上声明。

将warntoast 或accent-ted 与默认值区分开来的方法，调用 an action toast，每个都有其操作按钮，使用适当的类 (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形式意味着行动报告，暗示着成功。如果它需要更多的关注，可以通过设置一个操作按钮来强制关闭它，添加诸如“重试”、“报告问题”、“详细信息”之类的操作，这些操作可用于捕获此点击并记录一些技术信息等。 .. 示例因您的需要而异。

于 2015-09-05T05:43:04.283 回答
7

rlay3 的答案又迈出了一步。

Angular Material 0.7.1 向未注册的主题添加了警告。 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 应用程序中配置主题“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-09-02T18:14:37.107 回答
2

您确实询问过使用简单的 toast 调用。您介意尝试像演示这样的自定义吐司节目并向模板添加类吗？

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()
于 2015-02-26T21:19:56.560 回答
1

只是为了提供另一种选择，$mdToast允许定义您可以通过这种方式轻松实例化的 toast预设，尽管我很难理解如何更改文本内容，有什么想法吗？

$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
    };
  }
});
于 2016-09-06T23:03:51.780 回答
0

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

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

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

于 2015-08-27T05:38:26.703 回答
0

你可以用工厂和一些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;
}
于 2017-08-02T12:15:24.023 回答