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. ssh免密码登录远程服务器(不采用securecrt登录)

      http://blog.csdn.net/leexide/article/details/17252369       Linux/UNIX下使用ssh-keygen设置SSH无密码登录 标签:  ...

  2. 【转】深入JVM系列(一)之内存模型与内存分配

    http://lovnet.iteye.com/blog/1825324 一.JVM内存区域划分   大多数 JVM 将内存区域划分为 Method Area(Non-Heap),Heap,Progr ...

  3. 【Luogu】P4357K远点对(寄蒜几盒)

    题目链接 考虑旋转卡壳求出一个最远点对之后删掉其中一个点,把该点到其余所有点的距离存进堆里…… 最后堆输出答案. 我的代码只有在开O2的情况下才不会re.为啥???? #include<cstd ...

  4. 【Luogu】P2599取石子游戏(博弈论)

    题目链接 情况非常复杂,事实上题解我现在也没有完全理解 不过大致的意思就是 设两个数组lef[][],rig[][]表示对应区间左端加一堆数量为lef[][]的石子使得先手必败,rig同理 可以通过一 ...

  5. 正则表达式的\b与\B总结

    \b 单词边界,是指单词与符号之间的边界,是一个位置,不是空格或字符.(这里单词可以是中文字符,英文字符,数字:  符号可以是中文符号,英文符号,空格,制表符,换行).不能与量词?+*{1}{2,5} ...

  6. C语言中的bool类型

    C99中提供了一个头文件 <stdbool.h> 定义了bool代表_Bool,true代表1,false代表0.只要导入 stdbool.h ,就能非常方便的操作布尔类型了. 代码如下: ...

  7. Linux 之 FTP服务器搭建

    FTP服务器搭建 参考教程:[千峰教育] 1.关闭防火墙: service iptables stop 2.关闭Selinux setenforce 0 3.安装所需要依赖及编译工具 yum inst ...

  8. hdu 1728(搜索)

    逃离迷宫 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  9. hdu 1250(大整数)

    Hat's Fibonacci Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  10. 洛谷——P2737 [USACO4.1]麦香牛块Beef McNuggets

    https://www.luogu.org/problemnew/show/P2737 题目描述 农夫布朗的奶牛们正在进行斗争,因为它们听说麦当劳正在考虑引进一种新产品:麦香牛块.奶牛们正在想尽一切办 ...