Comment montrer md-toast avec la couleur de fond

Je suis en train de créer md-toast avec un peu de fond de couleur pour porter un toast à l'aide angulaires-le matériau. Je l'aide des réponses à partir de ce DONC, la questionj'ai créé ce codepenmais c'est en montrant un peu de fond indésirable pour porter un toast.

HTML:

<div ng-controller="AppCtrl" layout-fill="" layout="column" class="inset toastdemoBasicUsage" ng-cloak="" ng-app="MyApp">
  <p>
    Toast is not properly working with theme defined in CSS.
    <br>
  </p>

  <div layout="row" layout-sm="column" layout-align="space-around">
    <md-button ng-click="showSimpleToast()">
      Toast
    </md-button>
  </div>    
</div>

CSS:

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

md-toast.md-error-toast-theme {
    background-color: maroon;
    position: 'top right'
}

md-toast {
    height: 40px;
    width: 50px;
    margin-left: auto;
    margin-right: auto;
    left: 0; right: 0;
    top:10px;
}

JS:

angular.module('MyApp',['ngMaterial', 'ngMessages'])
.controller('AppCtrl', function($scope, $mdToast, $document) {
  $scope.showSimpleToast = function() {
    $mdToast.show(
      $mdToast.simple()
        .textContent('Simple lala Toast!')
      .theme('success-toast')
        .hideDelay(3000)
    );
  };
})

source d'informationauteur Saurabh

  1. 13

    Le positionnement de l'toast

    Au lieu de donner une position à tout (ce qui rend la découpe de vos toast), vous pouvez uniquement la position de la md-toast à la bonne position.

    Par la documentation, il y a quatre emplacement où vous pouvez officiellement mis toast: en haut à gauche, en haut à droite, en bas, à gauche, en bas à droite. Donc, d'abord, permet de positionner le toast à la en haut à gauche (ce qui est important pour le changement dans l'animation. Aussi, cela nous permettra de montrer les toasts sur bas au centre).

    $mdToast.show(
  $mdToast.simple()
    .textContent('Simple lala Toast!')
    .position('top')

    maintenant, dans le css, juste la position de votre toast:

    md-toast {
  left: calc(50vw - 150px);
}

    Ce sera la position de la toast au centre de la fenêtre d'affichagemoins de la moitié du pain grillé.

    vous pouvez également afficher les toasts sur le centre en bas en javascript seul:

    $mdToast.show(
  $mdToast.simple()
    .textContent('Simple lala Toast!')
    .position('bottom')

    et le toast se centre en bas et utiliser la bonne animation pour montrer.

    La coloration de l'toast

    Vous couleur le toast du contenant plutôt que le contenu réel du pain grillé. Pour la couleur de la toast, vous pouvez ajouter le code css suivant style:

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

    Vous pouvez modifier le toast du thème pour ne pas remplacer la valeur par défaut toast style. Aussi, la modification de la position d'un thème spécifique peut aider à utiliser les deux positions (par défaut et manuel) en même temps (par changement de thème).

    md-toast.md-thatkookooguy-toast-theme {
  left: calc(50vw - 150px);
}

    Voici un travail FOURCHE de vous codepen.

  2. 5

    Lors de l'utilisation de 

    $mdToast.simple().theme('sometheme');

    Un avertissement se produit dans la console que le thème n'a pas été défini. Le mieux est d'utiliser le toastClass attribut.

    var message = "An error occured!";
$mdToast.show($mdToast.simple({
  hideDelay: 126000,
  position: 'top right',
  content: message,
  toastClass: 'error'
}));

    SCSS:

    $red: rgb(244, 67, 54);
$green: rgb(76, 175, 80);

md-toast {
  &.error {
    .md-toast-content {
      background: $red;
      color: white;
    }
  }
  &.success {
    .md-toast-content {
      background: $green;
      color: white;
    }
  }
}

    Exemple de travail Codepen

  3. 3

    .toastClass(string) Définit une classe sur le toast élément

    Définir css:

    .md-toast-done .md-toast-content{
    background: #004f75 !important;
}

.md-toast-error .md-toast-content{
    background: rgb(193, 30, 23) !important;
}

    Et de définir toast:

        $mdToast.show(
        $mdToast.simple()
            .toastClass('md-toast-error')
            .textContent(stringValue)
            .position('bottom right')
            .hideDelay(3000)
    );