Как изменить цвет тоста зависит от типа сообщения в Angular материала $mdToast?

Ответ 1

EDIT:
Для правильной реализации используйте 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;
}

Не знаю, является ли это самым красивым подходом, но мне не нужны файлы шаблонов для каждого типа диалога, и отображение пользовательского текста очень просто.

Ответ 2

Существует более простой способ, указав тему:

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

И в вашем CSS:

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

Вы можете включить свой тип сообщения для динамического выбора темы.

Обновление: Как отметил Чарли Нг, чтобы избежать предупреждений об использовании незарегистрированной пользовательской темы, зарегистрируйте его в своем модуле с помощью поставщика тем: $mdThemingProvider.theme("success-toast")

Другое обновление: Было нарушение

Ответ 3

Вы можете видеть по этой ссылке, что вы не можете изменить цвет фона элемента, он всегда будет исправлен:

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

Это объясняется тем, что в Руководстве по дизайну материалов для тостов указано, что фон всегда останется прежним:

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

Обратите внимание на элемент background в списке Specs.

Ничего не сказано о цвете текста в каждой ситуации, оно подразумевает, что оно следует за backgroundPalette, на ротацию оттенка 50, объявленное на этом CSS в GitHub Link.

Способ выделения a warn тоста или accent -пределенного по умолчанию, вызывающего 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 означает отчет о действии, с успехом подразумевается. Если вам нужно еще больше внимания, заставьте его закрыть, установив кнопку действия, чтобы добавить такие действия, как "Повторить", "Сообщить о проблеме", "Детали", которые можно использовать, чтобы поймать этот клик и записать некоторые технические данные и т.д.... примеры варьируются от того, что вам нужно.

Ответ 4

зарегистрировать темы:

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

Ответ 5

Еще один шаг к ответу rlay3.

Angular Материал в 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().

Чтобы избавиться от предупреждения, вам нужно настроить тему "custom-toast" в вашем приложении angular:

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

Ответ 6

Вы спросили об использовании простого тоста. Не могли бы вы попробовать настроить тост для как демонстрацию и добавить классы к шаблону?

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

КОНТРОЛЛЕР (КОФЕ)

'use strict'

###*
 # @ngdoc function
 # @name angularApp.controller:ToastCtrl
 # @description
 # # ToastCtrl
 # Controller of the angularApp
###
angular.module('angularApp')
  .controller 'ToastCtrl', ($scope) ->
    $scope.closeToast = ()->
      $mdToast.hide()

Ответ 7

Чтобы дать другой вариант, $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
    };
  }
});

Ответ 8

Сначала я предпочел решение, но мне не нравится настраивать тему в провайдере темы только для тоста. Итак, как насчет этого решения:

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

Сводка: в этом случае есть шаблон, который вы можете предоставить настраиваемым заполнителям, которые вы предварительно заполняете в своем контроллере. Это решение работает для меня.

Ответ 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;
}