How to show md-toast with background color

https://codepen.io/neilkalman/pen/jWBqve

<div ng-controller="AppCtrl" layout-fill="" layout="column" class="inset toastdemoBasicUsage" ng-cloak="" ng-app="MyApp">
<p>
Toast with changes to answer <a href="http://stackoverflow.com/questions/34614767/how-to-show-md-toast-with-background-color">this question on stack overflow</a>
</p>

<div layout="row" layout-sm="column" layout-align="space-around">
<md-button ng-click="showSimpleToast()">
Toast
</md-button>
</div>

</div>

<style>

  

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

md-toast.md-error-toast-theme .md-toast-content {
background-color: maroon;
}

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

</style>

<script>

  

angular.module('MyApp',['ngMaterial', 'ngMessages'])

.controller('AppCtrl', function($scope, $mdToast, $document) {

$scope.showSimpleToast = function() {
$mdToast.show(
$mdToast.simple()
.textContent('Simple lala Toast!')
.position('top')
.theme('error-toast')
.hideDelay(3000)
);
};

})

</script>

angular md-toast 颜色的更多相关文章

  1. angular 学习理解笔记

    原文:https://github.com/eoinkelly/notes/blob/master/angular/book-building-web-apps-w-angular/angular.m ...

  2. Ionic -- css

    Header 固定在头部,可以包含标题标签,可以有左右按钮 样式:bar bar-header bar-light 第一个小节 第二个表示的是头部 第三个表示颜色 子头部,需要在ion-content ...

  3. leetcode必刷200题

    一.数据结构相关 链表 1. 相交链表 2. 反转链表 3. 合并两个有序链表 4. 删除排序链表中的重复元素 5. 删除链表的倒数第 n 个节点 6. 两两交换链表中的节点 7. 两数相加 II 8 ...

  4. 混合开发 Hybird Ionic Angular Cordova web 跨平台 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  5. 使用Angular CDK实现一个Service弹出Toast组件

    在Angular中,官方团队在开发Material组件库的同时,顺手做了一套Component dev kit,也就是在Angular世界中大名鼎鼎的CDK,这套工具包提供了非常多的前端开发的通用功能 ...

  6. bootstrap 之 xs,sm,md,lg && 主要颜色

    mobile – xs ( <768px ) tablet – sm ( 768~991px ) desktop – md ( 992~1170px ) large desktop – lg ( ...

  7. webStorm 如何修改angular中html的字体颜色

     请问一下:在html中怎么修改这个的颜色呢? (这个是ng中html的语法主要双括号里面的紫色太暗了,有时候都看不清是什么东东了)   修改方案:(说明:第三步需要把最后的选择框去掉,默认是选中的, ...

  8. 拟物设计和Angular的实现 - Material Design(持续更新)

    Material Design是Google最新发布的跨平台统一视觉设计语言.直接翻译是物质设计,但是我更倾向于使用"拟物设计"更为准确. 据谷歌介绍,Material Desig ...

  9. 【Android - MD】之Snackbar的使用

    Snackbar 是 Android 5.0 新特性--Material Design 中的一个控件,用来代替 Toast ,Snackbar与Toast的主要区别是:Snackbar可以滑动退出,也 ...

随机推荐

  1. Django Model one

    models :URL---->http://www.cnblogs.com/wupeiqi/p/6216618.html null                     数据库中字段是否可以 ...

  2. loj2031 「SDOI2016」数字配对

    跑最大费用最大流,注意到每次 spfa 出来的 cost 一定是越来越少的,啥时小于 \(0\) 了就停了吧. #include <iostream> #include <cstri ...

  3. django 的序列化

    关于Django中的序列化主要应用在将数据库中检索的数据返回给客户端用户,特别的Ajax请求一般返回的为Json格式. 我们从数据库取出数据的格式有三种:1.all()返回的是QuerySet对象:2 ...

  4. 用CSV库一行行插入数据

    语料团队之前都是手动标注文字的定位位置,今天写了个小脚本,帮他们批量生成文字对应的定位. 其中数据生成后,要生成csv文件,查看了下使用csv库. import csv row1 = [1,2,3,4 ...

  5. [译]PYTHON FUNCTIONS - MAP, FILTER, AND REDUCE

    map, filter, and reduce Python提供了几个函数,使得能够进行函数式编程.这些函数都拥有方便的特性,他们可以能够很方便的用python编写. 函数式编程都是关于表达式的.我们 ...

  6. hibernate基础工具findBySQL学习

    public List<Map<String,Object>> findBySQL(String sql,Map<String,Object> param,int ...

  7. 【Luogu】P3311数数(AC自动机上DP)

    题目链接 蒟蒻今天终于学会了AC自动机,感觉很稳 (后一句愚人节快乐) 这题开一个f[i][j][k]表示有没有受到限制,正在枚举第j位,来到了AC自动机的第k个节点 的方案数 随后可以刷表更新 注意 ...

  8. BZOJ4819 [Sdoi2017]新生舞会 【01分数规划 + 费用流】

    题目 学校组织了一次新生舞会,Cathy作为经验丰富的老学姐,负责为同学们安排舞伴.有n个男生和n个女生参加舞会 买一个男生和一个女生一起跳舞,互为舞伴.Cathy收集了这些同学之间的关系,比如两个人 ...

  9. docker (centOS 7) 使用笔记3 - 修改docker默认的虚拟网址

    近日在使用VPN时发现和docker的虚拟网址发生了冲突,都是172.17.0.1,故需要修改docker的默认网址. 1. 当前状态 # ifconfig docker0: flags=<UP ...

  10. 视频流传输协议RTP/RTCP/RTSP/HTTP的区别 (转)

    用一句简单的话总结:RTSP发起/终结流媒体.RTP传输流媒体数据 .RTCP对RTP进行控制,同步.之所以以前对这几个有点分不清,是因为CTC标准里没有对RTCP进行要求,因此在标准RTSP的代码中 ...