如何用背景颜色显示md-toast [英] How to show md-toast with background color

问题描述

我尝试使用角度材料创建带有一些背景颜色的烤面包。我使用这个 SO问题，我创建了此代码，但它显示一些不必要的背景烤面包。

HTML：

 < div ng-controller = AppCtrllayout-fill =layout =columnclass =inset toastdemoBasicUsageng-cloak =ng-app =MyApp> 
< p> 
 Toast不能正常使用CSS中定义的主题。 
< br> 
< / p> 
 
< div layout =rowlayout-sm =columnlayout-align =space-around> 
< md-button ng-click =showSimpleToast（）> 
 Toast 
< / md-button> 
< / div> 
< / div> 
  

CSS：

 code> 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）
）; 
}; 
}）
  pre> 
 
解决方案
 
定位烤面包
 
 
 
一切（切割你的烤面包片），你只能将 md-toast 定位到正确的位置。
 
 
 
按照文档，您可以在四个位置正式放置烤面包：左上，右上，左下，右下。因此，首先，我们将烤面包放在左上角（这对于动画变化很重要，此外，我们还可以在底部中心上显示烤面包片） 
  $ mdToast.show（
 $ mdToast.simple（）
 .textContent Toast！'）
 .position（'top'）
  
只需放置您的烤面包：
  md-toast {
 left：calc（50vw  -  150px）; 
 } 
  
这会将toast放置在视口 
 
 
 
您还可以通过单独的javascript在底部中心显示烤面包：
  $ mdToast.show（
 $ mdToast.simple（）
 .textContent（'Simple lala Toast！'）
 .position（'bottom'）
  
，烤面包片将位于底部，使用右侧动画显示。
 
 
 
着色烤面包
 
 
 
您为烤面包的容器着色，而不是烤面包的实际内容。要对toast进行着色，您可以添加以下css样式：
  md-toast.md-success-toast-theme .md -toast-content {
 background-color：green; 
} 
  
您可以更改toast的主题以不覆盖默认的toast样式。此外，更改特定主题的位置可以帮助同时使用两个位置（默认和手动）（通过更改主题）。
  md-toast.md-thatkookooguy-toast-theme {
 left：calc（50vw  -  150px）; 
} 
  
这里有一个工作 FORK  of you codepen。
 
I am trying to create md-toast with having some background color to toast using angular-material. I using answers from this SO question, I created this codepen, but it is showing some unwanted background to toast as well.

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)
    );
  };
})

解决方案
Positioning the toast

Instead of giving a position to everything (which makes the cutting of your toast), you can position only the md-toast to the right position.

By the documentation, there are four location where you can officially put the toast: top left, top right, bottom left, bottom right. So, first, lets position the toast to top left (this is important for the change in animation. Also, this will allow us to show toasts on bottom center as well).
$mdToast.show(
  $mdToast.simple()
    .textContent('Simple lala Toast!')
    .position('top')
now, in the css, just position your toast:
md-toast {
  left: calc(50vw - 150px);
}
This will position the toast at the center of the viewport, minus half of the toast.

you can also show toasts on the bottom center by javascript alone:
$mdToast.show(
  $mdToast.simple()
    .textContent('Simple lala Toast!')
    .position('bottom')
and the toast will center at the bottom and use the right animation to show it.

Coloring the toast

You colored the toast's container instead of the actual content of the toast. To color the toast, you can add the following css styling:
md-toast.md-success-toast-theme .md-toast-content {
  background-color: green;
}
You can change the toast's theme to not override the default toast styling. Also, changing the position for a specific theme can help use both positions (default and manual) at the same time (by changing theme).
md-toast.md-thatkookooguy-toast-theme {
  left: calc(50vw - 150px);
}
Here's a working FORK of you codepen.

                        
这篇关于如何用背景颜色显示md-toast的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！