Comment puis-je changer la couleur de Toast en fonction du type de message dans Matériel angular $ mdToast?

En utilisant $mdToast.simple().content("some test") il montre le toast avec la couleur noire. Comment puis-je changer cette couleur en rouge, en jaune, tout dépend du type de message d’erreur tel que l’erreur, l’avertissement et le succès.

Question similaire à celle-ci .

MODIFIER:
Pour une implémentation correcte, veuillez utiliser la solution rlay3s ci-dessous :)!

DÉPASSÉ:
J’ai eu des problèmes pour afficher du texte personnalisé avec la solution jhblacklocks, alors j’ai décidé de le faire en utilisant ‘template’:

 var displayToast = function(type, msg) { $mdToast.show({ template: '' + msg + '', hideDelay: 6000, position: 'bottom right' }); }; 

J’ai également ajouté les différents types dans mon fichier .css:

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

Je ne sais pas si c’est la plus belle approche, mais je n’ai pas besoin de fichiers de modèles pour chaque type de dialog et l’affichage de texte personnalisé est très simple.

Il existe un moyen plus simple en spécifiant un thème:

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

Et dans votre CSS:

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

Vous pouvez intégrer votre type de message pour sélectionner dynamicment un thème.

Mise à jour : Comme Charlie Ng l’a fait remarquer, pour éviter les avertissements concernant l’utilisation d’un thème personnalisé non enregistré, enregistrez-le dans votre module à l’aide du fournisseur de thème: $mdThemingProvider.theme("success-toast")

Une autre mise à jour : il y a eu un changement brisé créé le 2 décembre 2015 (v1.0.0 +). Vous devez maintenant spécifier:

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

enregistrer des thèmes:

 $mdThemingProvider.theme("success-toast"); $mdThemingProvider.theme("error-toast"); 

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

utilisation:

 $mdToast.show( $mdToast.simple() .content(message) .hideDelay(2000) .position('bottom right') .theme(type + "-toast") ); 

Vous pouvez voir sur ce lien que vous ne pouvez pas changer la couleur d’arrière-plan de l’élément, il sera toujours corrigé:

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

Ceci est dû au fait que les lignes direcsortingces relatives à la conception des matériaux pour Toasts indiquent que l’arrière-plan restra toujours le même:

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

Notez l’élément d’ backgroundbackground dans la liste des spécifications .

Rien n’est dit à propos de la couleur du texte dans chaque situation, cela implique qu’elle suit la backgroundPalette , sur la rotation de la teinte «50», déclarée sur ce CSS sur le lien GitHub.

La manière de distinguer un toast d’ warn , ou un accent accentué, du défaut, en appelant un action toast , chacun avec son bouton d’action utilisant la classe appropriée ( md-warn ou md-accent ).

 $mdToast.show({ template: '\ {{ toast.content }}\ \ Ok\ \ ', controller: [function () { this.content = 'Toast Content'; }], controllerAs: 'toast' }); 

Le toast lui-même, dont la forme default signifie un rapport d’action, avec succès implicite. S’il a besoin de plus d’attention, forcez-le en mettant en place un bouton d’action Ajouter des actions comme ‘Réessayer’, ‘Signaler un problème’, ‘Détails’, qui peut être utilisé pour enregistrer des informations techniques, etc. .. les exemples varient de ce dont vous avez besoin.

Un pas de plus pour la réponse de rlay3.

Le matériau angular à 0.7.1 a ajouté un avertissement aux thèmes non enregistrés. https://github.com/angular/material/blob/master/CHANGELOG.md#071–2015-01-30

Si le thème n’est pas enregistré, chaque fois que le toast apparaît, vous recevrez un message d’avertissement dans la console, par exemple:

 attempted to use unregistered theme 'custom-toast' angular.js:12416 Attempted to use unregistered theme 'custom-toast'. Register it with $mdThemingProvider.theme(). 

Pour vous débarrasser de cet avertissement, vous devrez configurer le thème «toast personnalisé» dans votre application angular:

 angular.module('myApp', ['ngMaterial']) .config(function($mdThemingProvider) { $mdThemingProvider.theme('custom-toast') }); 

et l’utiliser comme:

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

références: https://material.angularjs.org/latest/#/Theming/04_multiple_themes

Vous avez demandé à utiliser le simple appel de pain grillé. Cela vous dérangerait-il d’essayer un show de toast personnalisé comme la démo et d’append des classes au template?

JS

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

MODÈLE

  Custom toast!  Close   

CSS

 md-toast.flash { background-color: red; color: white; } 

CONTRÔLEUR (CAFÉ)

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

Juste pour donner une autre option, $mdToast permet de définir des préréglages de pain grillé que vous pouvez facilement instancier de cette manière, bien que je lutte pour comprendre comment modifier le contenu du texte, n’importe quelle idée?

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

Les préréglages sont définis comme expliqué sur https://material.angularjs.org/latest/api/service/ $ mdToast:

 $mdToastProvider.addPreset('error', { options: function() { return { template: '' + '
' + '
' + '
', position: 'top left', hideDelay: 2000, toastClass: 'toast-error', controllerAs: 'toast', bindToController: true }; } });

J’ai d’abord privilégié la solution mais je n’aime pas mettre en place un thème dans le fournisseur de thème uniquement pour un toast. Alors qu’en est-il de cette solution:

JS (café)

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

puis HTML (JADE)

 md-toast(ng-class="class") span(flex) {{message}} md-button.md-action(ng-click="closeToast()") {{buttonLabel}} 

J’ai essayé d’utiliser l’option locals pour transmettre des variables au contrôleur, mais pour une raison quelconque, elles ne sont pas injectées. ( https://material.angularjs.org/latest/#/api/material.components.toast/service/ liste de vérification des options sous fonction d’affichage

Puis le dernier CSS (STYLUS)

 md-toast.success background-color green md-toast.error background-color red 

Récapitulatif: dans ce cas, il existe un modèle que vous pouvez atsortingbuer à des espaces réservés personnalisés que vous pré-remplissez dans votre contrôleur. Cette solution fonctionne pour moi

Vous pouvez le faire avec l’usine et certains css.

 (function () { 'use ssortingct'; 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) ); } } }()); 

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