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

后端 未结 9 797
Happy的楠姐
Happy的楠姐 2021-02-03 17:10

While using $mdToast.simple().content(\"some test\") it is showing the toast with black color. how can I change that color to red, yellow and so, depends on the typ

9条回答
  •  臣服心动
    2021-02-03 18:03

    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: '' + msg + '',
            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.

提交回复
热议问题