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

问题描述

我正在尝试使用 angular-material 来创建具有一些背景颜色的 md-toast.我使用这个 SO question，我创建了这个 codepen，但它显示了一些不需要的背景也可以敬酒.

HTML:

<div ng-controller="AppCtrl" layout-fill="" layout="column" class="inset toastdemoBasicUsage" ng-cloak="" ng-app="MyApp"><p>Toast 不能正确处理 CSS 中定义的主题.<br></p><div layout="row" layout-sm="column" layout-align="space-around"><md-button ng-click="showSimpleToast()">吐司</md-button>

CSS:

md-toast.md-success-toast-theme {背景颜色:绿色；}md-toast.md-error-toast-theme {背景颜色:栗色；位置:'右上角'}MD-吐司{高度:40px；宽度:50px；左边距:自动；右边距:自动；左:0；右:0；顶部:10px；}

JS:

angular.module('MyApp',['ngMaterial', 'ngMessages']).controller('AppCtrl', function($scope, $mdToast, $document) {$scope.showSimpleToast = function() {$mdToast.show($mdToast.simple().textContent('简单的拉拉吐司！').theme('成功祝酒').hideDelay(3000));};})

解决方案

定位 Toast

您可以只将 md-toast 定位到正确的位置，而不是给所有东西一个位置(这会导致你切吐司).

根据文档，有四个位置可以正式放置 Toast:左上、右上、左下、右下.因此，首先，让我们将 Toast 定位到左上(这对于动画的变化很重要.此外，这也将允许我们在 底部中心 显示 Toast).

$mdToast.show($mdToast.simple().textContent('简单的拉拉吐司！').position('顶部')

现在，在 css 中，放置你的 toast:

md-toast {左:计算(50vw - 150px)；}

这会将 Toast 定位在 视口 的中心，减去 Toast 的一半.

您还可以单独使用 javascript 在底部中心显示吐司:

$mdToast.show($mdToast.simple().textContent('简单的拉拉吐司！').position('底部')

并且 toast 将在底部居中并使用正确的动画来显示它.

给吐司涂色

您为吐司的容器而不是吐司的实际内容着色.要给 Toast 着色，您可以添加以下 css 样式:

md-toast.md-success-toast-theme .md-toast-content {背景颜色:绿色；}

您可以更改 toast 的主题以不覆盖默认的 toast 样式.此外，更改特定主题的位置有助于同时使用两个位置(默认和手动)(通过更改主题).

md-toast.md-thatkookooguy-toast-theme {左:计算(50vw - 150px)；}

这是你的代码笔的FORK.

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屋！