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. python--命名规范及常见的数据类型

    1.python的命名规范 (1)不能以数字开头,不能出现中文. (2)命名以字母开头,包含数字,字母(区分大小写),下划线. (3)不能包含关键字,见名知意. 2.python常见的数据类型 (1) ...

  2. 一个TensorFlow例子

    一个TensorFlow的例子 import tensorflow as tf x = tf.constant(1.0, name='input') w = tf.Variable(0.8, name ...

  3. 【bzoj2134】单选错位 期望

    题目描述 输入 n很大,为了避免读入耗时太多,输入文件只有5个整数参数n, A, B, C, a1,由上交的程序产生数列a.下面给出pascal/C/C++的读入语句和产生序列的语句(默认从标准输入读 ...

  4. (转)关于Jackson2.x中com.fasterxml.jackson包的用法

    Jackson应该是目前最好的json解析工具了,之前一直用的是org.codehaus.jackson包中的工具,使用的 包是jackson-all-1.9.11.jar. 最近发现Jackson升 ...

  5. scrapy的调试方法

    Parse命令,Scrapy shell,logging 一 Parse命令 检查spider输出的最基本方法是使用Parse命令.这能让你在函数层上检查spider哥哥部分的效果,其十分灵活并且已用 ...

  6. select * from 为什么效率低?

    sql优化有很重要的一项叫做列裁剪(column pruning).如果不考虑索引,sql的执行算法大概分为sort-base和hash-base,不论是哪种,多出来的列都会带来很多无用的计算. “* ...

  7. 应用express mockjs模拟前端json数据接口

    一.首先需要在项目安装express 1.cnpm install express --save-dev  2.cnpm install mockjs --save-dev 二.在项目根目录下新建pr ...

  8. linux 时间模块 三

    LINUX的时钟中断中涉及至二个全局变量一个是xtime,另一个则是jiffies.有一个与时间有关的时钟:实时时钟(RTC),这是一个硬件时钟,用来持久存放系统时间,系统关闭后靠主板上的微型电池保持 ...

  9. Python入门--17--pickle

    pickle模块,实际用途也很简单.单一,主要用于保存列表(list),元祖(Tuple),字典(dictionary) 当然,一定是大的列表.字典什么的,成千上万行的字典.列表,才能凸显出它的用武之 ...

  10. github每次push提交都要输入账号密码

    问题产生的原因是在克隆的时候使用的是https的方式或者用一些特殊的指令来克隆的github项目源,如 golang里的go get github.com/...... 没次提交push的时候都会提示 ...