При использовании $mdToast.simple().content("some test") отображается тост с черным цветом. как я могу изменить этот цвет на красный, желтый и т.д., зависит от типа сообщений об ошибках, таких как ошибка, предупреждение и успех.
Аналогичный вопрос .
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;
}
Не знаю, является ли это самым красивым подходом, но мне не нужны файлы шаблонов для каждого типа диалога, и отображение пользовательского текста очень просто.
Существует более простой способ, указав тему:
$mdToast.simple().content("some test").theme("success-toast")
И в вашем CSS:
md-toast.md-success-toast-theme {
background-color: green;
...
}
Вы можете включить свой тип сообщения для динамического выбора темы.
Обновление:
Как отметил Чарли Нг, чтобы избежать предупреждений об использовании незарегистрированной пользовательской темы, зарегистрируйте его в своем модуле с помощью поставщика тем: $mdThemingProvider.theme("success-toast")
Вы можете видеть по этой ссылке, что вы не можете изменить цвет фона элемента, он всегда будет исправлен:
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 означает отчет о действии, с успехом подразумевается. Если вам нужно еще больше внимания, заставьте его закрыть, установив кнопку действия, чтобы добавить такие действия, как "Повторить", "Сообщить о проблеме", "Детали", которые можно использовать, чтобы поймать этот клик и записать некоторые технические данные и т.д.... примеры варьируются от того, что вам нужно.
зарегистрировать темы:
$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.
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
Вы спросили об использовании простого тоста. Не могли бы вы попробовать настроить тост для как демонстрацию и добавить классы к шаблону?
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()
Чтобы дать другой вариант, $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
};
}
});
Сначала я предпочел решение, но мне не нравится настраивать тему в провайдере темы только для тоста. Итак, как насчет этого решения:
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
Сводка: в этом случае есть шаблон, который вы можете предоставить настраиваемым заполнителям, которые вы предварительно заполняете в своем контроллере. Это решение работает для меня.
Вы можете сделать это с помощью 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;
}