大佬教程收集整理的这篇文章主要介绍了css – 如何用背景颜色显示md-toast，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
HTML：
<div ng-controller="AppCtrl" layout-fill="" layout="column" class="inset toastdemoBasicUsage" ng-cloak="" ng-app="MyApp">
<p>
Toast is not properly working with theme defined in CSS.
<br>
</p>
<div layout="row" layout-sm="column" layout-align="space-around">
<md-button ng-click="showSimpleToast()">
Toast
</md-button>
</div>
</div>
CSS：
md-toast.md-success-toast-theme {
background-color: green;
}
md-toast.md-error-toast-theme {
background-color: maroon;
position: 'top right'
}
md-toast {
height: 40px;
width: 50px;
margin-left: auto;
margin-right: auto;
left: 0; right: 0;
top:10px;
}
JS：
angular.module('MyApp',['ngMaterial','ngMessages'])
.controller('AppCtrl',function($scope,$mdToast,$document) {
$scope.showSimpleToast = function() {
$mdToast.show(
$mdToast.simple()
.textContent('Simple lala Toast!')
.theme('success-toast')
.hideDelay(3000)
);
};
})
而不是给所有的东西(这使你的烤面包切割)的位置,你只能将md-toast放在正确的位置.
通过文档,您可以正确放置烤面包的四个位置：左上角,右上角,左下角,右下角.所以,首先,将烤面包放在左上角(这对于动画的变化很重要,同时也允许我们在底部中心显示烤面包).
$mdToast.show(
$mdToast.simple()
.textContent('Simple lala Toast!')
.position('top')
现在,在css中,只要放置你的烤面包片：
md-toast {
left: calc(50vw - 150px);
}
这将把烤面包放在视口的中心,减去烤面包的一半.
您也可以通过javascript单独显示底部中心的烤面包片：
$mdToast.show(
$mdToast.simple()
.textContent('Simple lala Toast!')
.position('bottom')
并且烤面包机将以底部为中心,并使用正确的动画来显示.
着色烤面包
你烤了烤面包的容器,而不是烤面包的实际内容.为了着色烤面包,您可以添加以下css样式：
md-toast.md-success-toast-theme .md-toast-content {
background-color: green;
}
您可以更改烤面包的主题,以不覆盖默认的烤面包造型.此外,更改特定主题的位置可以同时使用两个位置(默认和手动)(通过更改主题).
md-toast.md-thatkookooguy-toast-theme {
left: calc(50vw - 150px);
}
这是一个工作的FORK你的codepen.
以上是大佬教程为你收集整理的css – 如何用背景颜色显示md-toast全部内容，希望文章能够帮你解决css – 如何用背景颜色显示md-toast所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。