Wie md-Toast mit Hintergrundfarbe anzeigen

Question

Ich versuche, MD-Toast mit etwas Hintergrundfarbe zu Toast mit eckigen Material zu erstellen. Ich benutze Antworten von dieser SO question, ich habe diese codepen erstellt, aber es zeigt einige unerwünschte Hintergrund Toast als auch.

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

Answer 1

Positionierung der Toast

Anstatt eine Position, um alles zu geben (was das Schneiden macht von deinem zu ast), können Sie nur die md-toast an die richtige Position positionieren.

Durch die Dokumentation gibt es vier Standorte, wo Sie den Toast offiziell setzen können: oben links, oben rechts, unten links, unten rechts. Also, zuerst, lassen Sie den Toast auf oben links (dies ist wichtig für die Änderung in der Animation. Auch wird dies uns erlauben, Toasts auf unten Mitte als auch zu zeigen).

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

jetzt, in der CSS, positionieren Sie einfach Ihren Toast:

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

Dies wird den Toast in der Mitte des Darstellungs, minus der Hälfte des Toasts positionieren.

Sie können auch zeigen, Toast auf der unteren Mitte von Javascript allein:

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

und der Toast wird unten Mitte und rechte Animation verwenden, es zu zeigen.

Färbung den Toast

Sie den Container Toast farbige anstatt den eigentlichen Inhalt des Toast. Um den Toast Farbe, können Sie das folgende CSS-Styling hinzu:

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

Sie können das Thema des Toasts ändern, um den Standard-Toast Styling außer Kraft setzen. Wenn Sie die Position für ein bestimmtes Thema ändern, können Sie auch beide Positionen (Standard und manuell) gleichzeitig verwenden (indem Sie das Thema wechseln).

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

Hier ist eine funktionierende FORK von Ihnen Codepen.

Answer 2

Wenn

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

mit einer Warnung in der Konsole auftritt, die das angegebene Thema ist nicht definiert worden. Besser ist es, das toastClass-Attribut zu verwenden.

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

Arbeitsbeispiel Codepen

Answer 3

.toastClass(string) Setzt eine Klasse auf dem Toast Element

CSS definieren:

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

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

Und definieren Toast:

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