ng-toastr

作者: 麦壳儿UIandFE2 | 来源:发表于2017-11-04 11:20 被阅读11次

简介:

对话框,适合做简短的弱提示,语义极其强,或是文本提示很长已经使用弹窗,配有关闭按钮,由用户去操作。

配置:

使用前一般要根据自己的具体需求进行定制,下边是项目中使用的配置。

App.config(['toastrConfig', function (toastrConfig) {
    angular.extend(toastrConfig, {
        autoDismiss: true,
        containerId: 'toast-container',
        maxOpened: 0,
        timeOut: 3000,
        newestOnTop: true,
        positionClass: 'toast-top-right',
        preventDuplicates: false,
        preventOpenDuplicates: false,
        target: 'body',
        closeButton: false,
    });
}]);

使用

app.controller('foo', function($scope, toastr) {
  toastr.success('请仔细阅读说明', '提示');
});

他和bootstrap很像,内部定义了很多颜色主题,例如:success:绿色;info:蓝色;error:红色。...

样式:

image.png

具体配置含义:

相关文章

  • ng-toastr

    简介: 对话框,适合做简短的弱提示,语义极其强,或是文本提示很长已经使用弹窗,配有关闭按钮,由用户去操作。 配置:...

网友评论

    本文标题:ng-toastr

    本文链接:https://www.haomeiwen.com/subject/axknpxtx.html