How to show md toast with background color

Question

I am trying to create md-toast with the background color for a toast using angular material. I am using the answers from this question https://stackoverflow.com/a/166269/2126 , I created this codepen , but it also shows an undesirable background for toasts.

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

Toast Placement

Instead of asking everything (which makes cutting your toast), you can only put md-toast in the right position.

There are four places in the documentation where you can formally place a toast: top left, top right, bottom left, bottom right . So, firstly, let's put the toast on the top left (this is important for changing the animation, and also allows you to show the toasts in the center below ).

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

now in css just put your toast:

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

This will position the toast in the center of the screen. minus half the toast.

you can also show toasts in the lower center only in javascript:

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

and the toast will be located at the bottom and use the desired animation to show it.

Toast coloring

You painted the toast container instead of the actual content of the toast. To color the toast, you can add the following css style:

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

You can change the theme of the toast so as not to override the default toast style. In addition, changing the position for a specific topic can help to simultaneously use both positions (by default and manually) (by changing the theme).

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

This is where FORK works from your code.

Answer 2

Using

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

A warning appears in the console stating that the specified topic is not defined. It is better to use the toastClass attribute.

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

Codepen working example

Answer 3

.toastClass(string) Sets the class on the toast

Define css:

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

And define a toast:

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