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

Question

使用$mdToast.simple().content("some test")它时显示黑色烤面包.如何将该颜色更改为红色,黄色等,取决于错误消息的类型,如错误,警告和成功.

与此类似的问题.

Answer 1

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

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

在你的CSS中:

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

您可以合并您的消息类型以动态选择主题.

更新:正如Charlie Ng所指出的,为了避免使用未注册的自定义主题的警告,请使用主题提供程序在模块中注册它:$mdThemingProvider.theme("success-toast")

另一个更新:2015年12月2日创建了一个重大变化(v1.0.0 +).您现在需要指定:

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

Answer 2

编辑:
为了正确实现,请使用下面的rlay3s 解决方案 :)!

OUTDATED:
我在使用jhblacklocks解决方案显示自定义文本时遇到问题,所以我决定使用'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;
}

不知道这是否是最漂亮的方法,但我不需要每个对话框类型的模板文件,并且显示自定义文本非常简单.

Answer 3

注册主题:

$mdThemingProvider.theme("success-toast");
$mdThemingProvider.theme("error-toast");

添加css:

md-toast.md-error-toast-theme div.md-toast-content{
    color: white !important;
    background-color: red !important;
}

md-toast.md-success-toast-theme div.md-toast-content{
    color: white !important;
    background-color: green !important;
}

使用:

$mdToast.show(
    $mdToast.simple()
        .content(message)
        .hideDelay(2000)
        .position('bottom right')
        .theme(type + "-toast")
);

Answer 4

您可以在此链接上看到您无法更改元素的背景颜色,它将始终固定:

https://github.com/angular/material/blob/master/src/components/toast/toast-theme.scss

这是因为Toasts的Material Design Guidelines指出背景将始终保持不变:

https://www.google.com/design/spec/components/snackbars-toasts.html#snackbars-toasts-specs

请注意规格列表中的background项目.

在每种情况下都没有关于文本颜色的说法,它暗示它遵循backgroundPalette'50'色调旋转,在GitHub链接上的CSS上声明.

从默认情况下区分warntoast或accentanted one的方法,action toast使用适当的类(md-warn或md-accent)调用a ,每个都使用其action按钮.

$mdToast.show({
    template: '<md-toast>\
        {{ toast.content }}\
        <md-button ng-click="toast.resolve()" class="md-warn">\
            Ok\
        </md-button>\
    </md-toast>',
    controller: [function () {
        this.content = 'Toast Content';
    }],
    controllerAs: 'toast'
});

吐司本身,其default形式意味着行动报告,成功暗示.如果它需要更多关注,请通过设置操作按钮来强制关闭,例如"重试","报告问题","详细信息"等操作,可用于捕获此点击并记录一些技术信息等. ..这些例子因你的需要而异.

Answer 5

再来一步rlay3的答案.

0.7.1的Angular Material为未注册的主题添加了警告. https://github.com/angular/material/blob/master/CHANGELOG.md#071--2015-01-30

如果未注册主题,则每次吐司显示时,您将在控制台中收到警告消息,例如:

attempted to use unregistered theme 'custom-toast'
angular.js:12416 Attempted to use unregistered theme 'custom-toast'. 
Register it with $mdThemingProvider.theme().

要摆脱警告,您需要在角度应用中配置主题"custom-toast":

angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider) {
  $mdThemingProvider.theme('custom-toast')
});

并使用它像:

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

参考:https://material.angularjs.org/latest/#/Theming/04_multiple_themes