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. 缓存淘汰算法之LFU

    1. LFU类 1.1. LFU 1.1.1. 原理 LFU(Least Frequently Used)算法根据数据的历史访问频率来淘汰数据,其核心思想是“如果数据过去被访问多次,那么将来被访问的频 ...

  2. hashlib.md5加密

    对一个字符串拼接时间,然后对其进行md5加密: import hashlib,time a='123absg' b=time.time() c='%s|%s'%(a,b) print(c) m=has ...

  3. AtCoder Petrozavodsk Contest 001

    第一场apc,5H的持久战,我当然水几个题就睡了 A - Two Integers Time limit : 2sec / Memory limit : 256MB Score : 100 point ...

  4. Welcome-to-Swift-06函数(Functions)

    函数是执行特定任务的代码自包含块.给定一个函数名称标识, 当执行其任务时就可以用这个标识来进行"调用". Swift的统一的功能语法足够灵活来表达任何东西,无论是甚至没有参数名称的 ...

  5. NOIP2017整数 【线段树】

    题目 题目背景 在人类智慧的山巅,有着一台字长为10485761048576 位(此数字与解题无关)的超级计算机,著名理论计算机科 学家P博士正用它进行各种研究.不幸的是,这天台风切断了电力系统,超级 ...

  6. Eclipse + Apache Axis2 发布RESTful WebService(二)配置开发环境

    1. 下载axis2相关软件地址:http://axis.apache.org/axis2/java/core/download.html 2. 安装插件:将axis2-eclipse-codegen ...

  7. Docker 组件如何协作?

    还记得我们运行的第一个容器吗?现在通过它来体会一下 Docker 各个组件是如何协作的. 容器启动过程如下: Docker 客户端执行 docker run 命令. Docker daemon 发现本 ...

  8. SQL2005:已更新或删除的行值要么不能使该行成为唯一行,要么改变了多个行.

    原文发布时间为:2008-08-04 -- 来源于本人的百度文章 [由搬家工具导入] 最近使用sql server2005,已经不止一次的发生了这样的错误.具体是怎么出来的我不清楚,其表现为:数据库中 ...

  9. luogu 1327 数列排序 & 2017 ACM-ICPC 亚洲区(南宁赛区)网络赛 J题 循环节

    luogu 1327 数列排序 题意 给定一个数列\(\{an\}\),这个数列满足\(ai≠aj(i≠j)\),现在要求你把这个数列从小到大排序,每次允许你交换其中任意一对数,请问最少需要几次交换? ...

  10. 标准C程序设计七---64

    Linux应用             编程深入            语言编程 标准C程序设计七---经典C11程序设计    以下内容为阅读:    <标准C程序设计>(第7版) 作者 ...