web-dev-qa-db-fra.com

Comment puis-je changer la couleur de Toast dépend du type de message dans Angular matériau $ mdToast?

Lorsque vous utilisez $mdToast.simple().content("some test"), le pain grillé est noir. Comment puis-je changer cette couleur en rouge, jaune et ainsi de suite, dépend du type de message d'erreur comme erreur, avertissement et succès.

Question similaire à this .

angularjsmaterial-designtoastangular-material
53
Rafiu

EDIT:
Pour une mise en œuvre correcte, veuillez utiliser rlay3ssolution ci-dessous :)!

OUTDATED:
J'ai eu des problèmes pour afficher du texte personnalisé avec la solution jhblacklocks. J'ai donc décidé de le faire comme ceci en utilisant 'template':

var displayToast = function(type, msg) {

    $mdToast.show({
        template: '<md-toast class="md-toast ' + type +'">' + msg + '</md-toast>',
        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 s'il s'agit de la plus belle approche, mais je n'ai pas besoin de fichiers de modèle pour chaque type de dialogue et afficher du texte personnalisé est vraiment facile.

32
error1337

Il existe un moyen plus simple de spécifier 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 incorporer votre type de message pour sélectionner dynamiquement un thème.

Mise à jour : Comme Charlie Ng l'a souligné, 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 important 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;
        ...
    }
}
82
rlay3

enregistrer des thèmes:

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

ajouter 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")
);
11
mattatwork

Vous pouvez voir sur ce lien que vous ne pouvez pas changer la couleur de fond de l'élément, ce sera toujours corrigé:

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

En effet, les directives de conception des matériaux pour Toasts stipulent que l’arrière-plan reste toujours le même:

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

Notez l’élément background dans la liste Specs .

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

Le moyen de distinguer un pain grillé warn ou un accent de la valeur par défaut, appelant un action toast, chacun avec son bouton d’action utilisant la classe appropriée (md-warn ou 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'
});

Le toast lui-même, dans lequel sa forme default signifie un rapport d’action, avec succès implicite. Si cela nécessite plus d'attention, forcer sa fermeture en mettant en place un bouton d'action ajoutez des actions telles que "Réessayer", "Signaler un problème", "Détails", qui peuvent être utilisées pour saisir ce clic et enregistrer des informations techniques, etc. Les exemples varient de ce dont vous avez besoin.

8
Mateus Leon

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

Angular Material à 0.7.1 ajoutait un avertissement aux thèmes non enregistrés. https://github.com/angular/material/blob/master/CHANGELOG.md#071--2015-01-

Si le thème n'est pas enregistré, un message d'avertissement apparaîtra dans la console à chaque fois que le pain grillé apparaîtra, 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 devez configurer le thème 'Custom-Toast' dans votre angular app:

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

7
Charlie Ng

Vous avez demandé à utiliser l'appel simple toast. Souhaitez-vous essayer une émission de toasts personnalisée comme la démo et ajouter des classes au modèle?

JS

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

MODÈLE

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

CONTRÔLEUR (CAFÉ)

'use strict'

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

Juste pour donner une autre option, $mdToast permet de définir des préréglages de toast que vous pouvez facilement instancier de cette façon, même si je peine à comprendre comment changer le contenu du texte, aucune 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:
        '<md-toast>' +
          '<div class="md-toast-content">' +
          '</div>' +
        '</md-toast>',
      position: 'top left',
      hideDelay: 2000,
      toastClass: 'toast-error',
      controllerAs: 'toast',
      bindToController: true
    };
  }
});
1
Luca Faggianelli

J'ai d'abord privilégié la solution, mais je n'aime pas configurer un thème dans le fournisseur de thèmes uniquement pour porter un toast. Alors, que diriez-vous 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 / $ mdToast liste d'options à vérifier sous show fonction)

Puis le CSS (STYLUS)

md-toast.success
  background-color    green

md-toast.error
  background-color    red

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

0
Mattijs

Vous pouvez le faire avec factory et certains 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)
      );
    }
  }
}());

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