如何更改Toast的颜色取决于Angular$ mdToast中的消息类型?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (56)

使用时$mdToast.simple().content("some test")它怎样才能把那个颜色变成红色、黄色等等?

提问于
用户回答回答于

使用“Template”:

var displayToast = function(type, msg) {

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

还在.css文件中添加了不同的类型:

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

.md-toast.success {
    background-color: green;
}
用户回答回答于

通过指定主题,有一种更简单的方法:

$mdToast.simple().content("some test").theme("success-toast")

在你的CSS中:

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

扫码关注云+社区