How to Show Md-Toast with Background Color

How to show md-toast with background color

Positioning the toast

Instead of giving a position to everything (which makes the cutting of your toast), you can position only the md-toast to the right position.

By the documentation, there are four location where you can officially put the toast: top left, top right, bottom left, bottom right. So, first, lets position the toast to top left (this is important for the change in animation. Also, this will allow us to show toasts on bottom center as well).

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

now, in the css, just position your toast:

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

This will position the toast at the center of the viewport, minus half of the toast.

you can also show toasts on the bottom center by javascript alone:

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

and the toast will center at the bottom and use the right animation to show it.

Coloring the toast

You colored the toast's container instead of the actual content of the toast. To color the toast, you can add the following css styling:

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

You can change the toast's theme to not override the default toast styling. Also, changing the position for a specific theme can help use both positions (default and manual) at the same time (by changing theme).

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

Here's a working FORK of you codepen.

how can I change the color of Toast depends on message type in Angular material $mdToast?

EDIT:
For a correct implementation, please use rlay3s solution below :)!

OUTDATED:
I had problems displaying custom text with jhblacklocks solution, so I decided to do it like this using 'template':

var displayToast = function(type, msg) {

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

I also added the different types in my .css file:

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

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

Don't know if this is the most beautiful approach, but I don't need a template files for each dialog type and displaying custom text is really easy.

How to use custom theme and template together in $mdToast of angular material

According to the documentation using a theme seems to be available only for $mdToast.simple()

It is not available as an option for $mdToast.show(optionsOrPreset). Not sure why. However, one can use the toastClass option to change the toast. Here is an example - CodePen

Markup

<div ng-controller="AppCtrl" class="inset toastdemoCustomUsage" ng-cloak="" style="height:300px; padding: 25px;" ng-app="MyApp">
  <md-button ng-click="showCustomToast()" class="md-raised" style="padding-left: 10px;padding-right: 10px;">
    Show Custom Toast
  </md-button>

  <script type="text/ng-template" id="toast-template.html">
    <md-toast>
      <span class="md-toast-text" flex>{{data.message}}</span>
      <md-button ng-click="closeToast()">Close</md-button>
    </md-toast>
  </script>
</div>

JS

(function() {
  angular
    .module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
    .controller('AppCtrl', function($scope, $mdToast) {

    $scope.showCustomToast = function() {
      var data = {type: "SUCCESS", message: "Well done!"};
      var toastClass;
      switch (data.type) {
        case "SUCCESS":
          toastClass = "success";
          break;
        case "ERROR":
          toastClass = "error";
          break;
        case "INFO":
          toastClass = "info";
          break;
        case "WARNING":
          toastClass = "warning";
          break;
      };

      $mdToast.show({
          hideDelay   : 3000,
          position    : 'top right',
          controller  : 'ToastCtrl',
          templateUrl : 'toast-template.html',
          locals: {
            data: data
          },
          toastClass: toastClass
        });
      };
    })
    .controller('ToastCtrl', function($scope, $mdToast, $mdDialog, data) {
      $scope.data = data;
      $scope.closeToast = function() {
        if (isDlgOpen) return;
        $mdToast
          .hide()
          .then(function() {
            isDlgOpen = false;
          });
      };
    });
})();

CSS

.success .md-toast-content  {
  background: green;
}
.error .md-toast-content  {
  background: red;
}
.info .md-toast-content  {
  background: orange;
}
.warning .md-toast-content  {
  background: purple;
}

How can i change the background color of my toast

You could define another background color by overriding a Ionic Sass Variables in your variables.scss

In case of toast background you could define for example white or #ffffff like following:

$toast-ios-background: #ffffff; // Apply for iOS
$toast-md-background: #ffffff; // Apply for Android
$toast-wp-background: white; // Apply for Windows

You could find the all list of sass variables you could override in the documentation:

https://ionicframework.com/docs/theming/overriding-ionic-variables/

In case you would like even more flexibility or to set other styles, you could set a custom css property to your toast with the cssClass option

For example:

 this.mytoast = this.toastCtrl.create({
                        message: 'Data loaded successfully',
                        duration: 3000,
                        position: 'top',
                        cssClass: 'myCustomCss'
                    });

Then you could modify it in your stylesheets, like in app.component.scss

.myCustomCss {
    // The styles you would like to apply
 }

See ToastController API documentation:

https://ionicframework.com/docs/api/components/toast/ToastController/

But when it goes to the background of the toast, first try with the variables ;)

Change the background color of the toast message Ionic 4

You can set the color in the toast parameters:

 const toastController = document.querySelector('ion-toast-controller');
 await toastController.componentOnReady();
 const toast = await toastController.create({
   showCloseButton: false,
   message: 'test toast message',
   position: 'top',
   duration: 2000,
   color: 'danger'
 });
 await toast.present();

Bootstrap toast moves all elements

You need to set style position: absolute; top: 0; right: 0; on outer element. And container of it should be position: relative.

Snippet:

$('#btn').click(function() {  $('.toast').toast('show')})

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div style="background-color:red; position: relative; width: 500px; height: 300px;">  <button id="btn">Open</button>

  <div class="toast" data-autohide="false" style="position: absolute; top: 0; right: 0;">    <div class="toast-header">      <svg class=" rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">                    <rect fill="#007aff" width="100%" height="100%" /></svg>      <strong class="mr-auto">Bootstrap</strong>      <small class="text-muted">11 mins ago</small>      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">                    <span aria-hidden="true">×</span>                  </button>    </div>    <div class="toast-body">      Hello, world! This is a toast message.    </div>  </div>
</div>

---

Related Topics