Jak wyświetlić md-toast z kolorem tła?

Question

Próbuję utworzyć md-toast za pomocą koloru tła na toast przy użyciu materiału kątowego. Używam odpowiedzi z tego SO question, stworzyłem ten codepen, ale pokazuje również niechciane tło tostów.

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

pozycjonowania tosty

zamiast dać pozycję do wszystkiego (co sprawia, że ​​cięcie z twojego do ast), możesz ustawić tylko md-toast w odpowiedniej pozycji.

W dokumentacji znajduje się cztery miejsce, w którym można oficjalnie umieścić toast: u góry po lewej, u góry po prawej, u dołu po lewej, u dołu po prawej. Najpierw ustawmy toast na u góry po lewej stronie (jest to ważne dla zmiany animacji, a także pozwoli nam pokazać toasty na na dole centrum).

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

teraz w css, po prostu umieścić swoje tosty:

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

To umieści tosty w środku rzutni, minus połowę toast.

można również pokazać toasty na środku dolnej przez javascript sam:

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

i tosty skoncentruje się na dole, a prawy animacji, aby pokazać.

Farbowanie tosty

Ty kolorowy pojemnik tosty zamiast rzeczywistej zawartości toast. Pokolorować tosty, można dodać następujące css stylizacji:

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

można zmienić motyw toast, aby nie nadpisać style domyślne toast. Ponadto zmiana pozycji dla określonego motywu może pomóc w użyciu obu pozycji (domyślnych i ręcznych) w tym samym czasie (poprzez zmianę motywu).

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

Oto działający FORK z ciebie codepen.

Answer 2

Podczas korzystania

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

ostrzeżenie pojawia się w konsoli, że określony temat nie został zdefiniowany. Lepiej jest użyć atrybutu toastClass.

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

przykład Praca Codepen

Answer 3

.toastClass(string) Ustawia klasę na elemencie tosty

Define css:

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

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

i zdefiniować tost:

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