angularjs - ¿Cómo puedo cambiar el color de Toast depende del tipo de mensaje en material angular $ mdToast?

angular material toast

Question

Mientras usa $mdToast.simple().content("some test") muestra la tostada con color negro. ¿Cómo puedo cambiar ese color a rojo, amarillo y así, depende del tipo de mensajes de error como error, advertencia y éxito.

Pregunta similar a this .

Answer 1

Hay una manera más fácil al especificar un tema:

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

Y en tu CSS:

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

Puede incorporar su tipo de mensaje para seleccionar dinámicamente un tema.

Actualización : como señaló Charlie Ng, para evitar advertencias sobre el uso de un tema personalizado no registrado, regístrelo en su módulo utilizando el proveedor de temas: $mdThemingProvider.theme("success-toast")

Otra actualización : se produjo un cambio importante el 2 de diciembre de 2015 (v1.0.0 +). Ahora necesita especificar:

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

Answer 2

Primero preferí la solución, pero no me gusta configurar un tema en el proveedor de temas solo por un brindis. Entonces, ¿qué tal esta solución?

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

y luego HTML (JADE)

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

Traté de usar la opción locals para pasar variables al controlador, pero por alguna razón no se inyectan. ( https://material.angularjs.org/latest/#/api/material.components.toast/service/ $ mdToast verifique la lista de opciones en la función show )

Luego dura el CSS (STYLUS)

md-toast.success
  background-color    green

md-toast.error
  background-color    red

Resumen: hay una plantilla en este caso que puede proporcionar marcadores de posición personalizados que rellena previamente en su controlador. Esta solución me funciona.

Answer 3

Puede ver en este enlace que no puede cambiar el color de fondo del elemento, siempre se solucionará:

github.com/angular/material/blob/master/src/components/toast/…

Esto se debe a que las Pautas de diseño de materiales para tostadas establecen que el fondo siempre será el mismo:

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

Tenga en cuenta el elemento de background en la lista de especificaciones .

No se dice nada sobre el color del texto en cada situación, está implícito que sigue a la paleta de backgroundPalette , en la rotación de tono ''50'', declarada en ese CSS en el enlace de GitHub.

La forma de distinguir un brindis de warn , o uno con accent , del predeterminado, llamando a un action toast , cada uno con su botón de acción utilizando la clase apropiada ( md-warn o 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''
});

El brindis en sí, cuya forma default significa un informe de acción, con éxito implícito. Si necesita más atención, fuerce su cierre configurando un botón de acción para agregar acciones como ''Reintentar'', ''Informar un problema'', ''Detalles'', que se pueden usar para capturar este clic y registrar información técnica, etc. .. los ejemplos varían de lo que necesita.

Answer 4

Puedes hacerlo con factory y algunos 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)
      );
    }
  }
}());

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

Answer 5

Solo para dar otra opción, $mdToast permite definir ajustes preestablecidos de tostadas que puede instanciar fácilmente de esta manera, aunque me cuesta entender cómo cambiar el contenido del texto, ¿alguna idea?

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

Los ajustes preestablecidos se definen como se explica en 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
    };
  }
});

Answer 6

Un paso más para la respuesta de rlay3.

El material angular en 0.7.1 agregó advertencia a los temas no registrados. https://github.com/angular/material/blob/master/CHANGELOG.md#071--2015-01-30

Si el tema no está registrado, cada vez que aparezca el brindis, recibirá un mensaje de advertencia en la consola como, por ejemplo:

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

Para deshacerse de la advertencia, deberá configurar el tema ''brindis personalizado'' en su aplicación angular:

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

y úsalo como:

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

referencias: https://material.angularjs.org/latest/#/Theming/04_multiple_themes

Answer 7

Usted preguntó sobre el uso de la simple llamada tostada. ¿Te importaría probar un programa personalizado de tostadas como la demostración y agregar clases a la plantilla?

JS

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

MODELO

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

CONTROLADOR (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()

Answer 8

registrar temas:

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

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

utilizar:

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

Answer 9

EDITAR:
Para una implementación correcta, ¡use la solution rlay3 continuación :)!

ANTICUADO:
Tuve problemas para mostrar texto personalizado con la solución jhblacklocks, así que decidí hacerlo así usando ''plantilla'':

var displayToast = function(type, msg) {

    $mdToast.show({
        template: ''<md-toast class="md-toast '' + type +''">'' + msg + ''</md-toast>'',
        hideDelay: 6000,
        position: ''bottom right''
    });
};

También agregué los diferentes tipos en mi archivo .css:

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

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

No sé si este es el enfoque más hermoso, pero no necesito una plantilla de archivos para cada tipo de diálogo y mostrar texto personalizado es realmente fácil.