angular md-toast 颜色
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 颜色的更多相关文章
- angular 学习理解笔记
原文:https://github.com/eoinkelly/notes/blob/master/angular/book-building-web-apps-w-angular/angular.m ...
- Ionic -- css
Header 固定在头部,可以包含标题标签,可以有左右按钮 样式:bar bar-header bar-light 第一个小节 第二个表示的是头部 第三个表示颜色 子头部,需要在ion-content ...
- leetcode必刷200题
一.数据结构相关 链表 1. 相交链表 2. 反转链表 3. 合并两个有序链表 4. 删除排序链表中的重复元素 5. 删除链表的倒数第 n 个节点 6. 两两交换链表中的节点 7. 两数相加 II 8 ...
- 混合开发 Hybird Ionic Angular Cordova web 跨平台 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- 使用Angular CDK实现一个Service弹出Toast组件
在Angular中,官方团队在开发Material组件库的同时,顺手做了一套Component dev kit,也就是在Angular世界中大名鼎鼎的CDK,这套工具包提供了非常多的前端开发的通用功能 ...
- bootstrap 之 xs,sm,md,lg && 主要颜色
mobile – xs ( <768px ) tablet – sm ( 768~991px ) desktop – md ( 992~1170px ) large desktop – lg ( ...
- webStorm 如何修改angular中html的字体颜色
请问一下:在html中怎么修改这个的颜色呢? (这个是ng中html的语法主要双括号里面的紫色太暗了,有时候都看不清是什么东东了) 修改方案:(说明:第三步需要把最后的选择框去掉,默认是选中的, ...
- 拟物设计和Angular的实现 - Material Design(持续更新)
Material Design是Google最新发布的跨平台统一视觉设计语言.直接翻译是物质设计,但是我更倾向于使用"拟物设计"更为准确. 据谷歌介绍,Material Desig ...
- 【Android - MD】之Snackbar的使用
Snackbar 是 Android 5.0 新特性--Material Design 中的一个控件,用来代替 Toast ,Snackbar与Toast的主要区别是:Snackbar可以滑动退出,也 ...
随机推荐
- PostgreSQL order by 排序问题
默认的排序为order by 字段名, 如果该字段不允许为空的情况下可以这样操作, 但是当字段允许为null时,order by 字段名的方式会导致: 升序时(asc): 会从最小值开始升序,最后面接 ...
- php处理文件和操作系统
一.文件和目录 (1).解析目录路径:basename()返回路径的文件名部分 获取路径目录:dirname() 返回除了文件名的路径部分 了解关于路径的更多信息:pathinfo() 返回关联数 ...
- [办公软件][2]screenToGif
https://github.com/NickeManarin/ScreenToGif/wiki/help 下载: .Net Framework 4.6.1 https://www.microso ...
- POJ 2033 Alphacode
Alphacode Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 11666 Accepted: 3564 Descri ...
- angular2 通过指令限制输入
最近在写一个表单,有些输入框只能输入数字,单又不想每次写表单的时候,都要去验证输入的是不是数字, 那么就想到直接限制只能输入数字,通过指令实现 这里需要注意的是,不只更改DOM的值,如果input为数 ...
- layui.code代码装饰器
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
- mybatis的嵌套查询(嵌套查询nested select和嵌套结果nested results查询)区别
(转自:http://blog.csdn.net/canot/article/details/51485955) Mybatis表现关联关系比hibernate简单,没有分那么细致one-to-man ...
- iOS--app自定义相册--从自定义的相册中获取图片
一.获取单张图片 思路: 1.利用UIImagePickerController可以从系统自带的App(照片\相机)中获得图片 2.设置代理,遵守代理协议 注意这个UIImagePickerContr ...
- 【Luogu】P1419寻找段落(单调队列)
题目链接 不知为何状态突然奇差无比,按说这题本来应该是水题的,但不仅不会做,还比着题解爆零五次 二分平均值(想到了),单调队列维护最大区间和(想到了但是不会,???为什么我不会???) #includ ...
- java面试题之spring aop中jdk和cglib哪个动态代理的性能更好?
在jdk6和jdk7的时候,jdk比cglib要慢: 在jdk8的时候,jdk性能得到提升比cglib要快很多: 结论出自:https://www.cnblogs.com/xuliugen/p/104 ...