如何用背景颜色显示 md-toast

Question

我正在尝试使用 angular-material 创建具有一些背景颜色的 md-toast。我使用了这个 , I created this codepen 的答案，但它也显示了一些不需要的背景。

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

Answer 1

定位吐司

您可以只将 md-toast 定位到正确的位置，而不是给所有东西都定位（这会让您的吐司切开）。

根据文档，可以正式放置toast的位置有四个：左上、右上、左下、右下。因此，首先，让我们将祝酒词定位到 左上角（这对于动画的变化很重要。此外，这将使我们能够在底部中心。

$mdToast.show(
  $mdToast.simple()
    .textContent('Simple lala Toast!')
    .position('top')

现在，在 css 中，只需放置您的吐司：

md-toast {
  left: calc(50vw - 150px);
}

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

你也可以单独javascript在底部中央显示祝酒词:

$mdToast.show(
  $mdToast.simple()
    .textContent('Simple lala Toast!')
    .position('bottom')

吐司会在底部居中，用右边的动画显示。

给吐司上色

您为吐司的容器着色，而不是为吐司的实际内容着色。要为吐司着色，您可以添加以下 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 代码笔。

Answer 2

使用时

$mdToast.simple().theme('sometheme');

控制台提示未定义指定主题。更好的方法是使用 toastClass 属性。

var message = "An error occured!";
$mdToast.show($mdToast.simple({
  hideDelay: 126000,
  position: 'top right',
  content: message,
  toastClass: 'error'
}));

SCSS:

$red: rgb(244, 67, 54);
$green: rgb(76, 175, 80);

md-toast {
  &.error {
    .md-toast-content {
      background: $red;
      color: white;
    }
  }
  &.success {
    .md-toast-content {
      background: $green;
      color: white;
    }
  }
}

工作示例Codepen

Answer 3

.toastClass(string) Sets a class on the toast element

定义css:

.md-toast-done .md-toast-content{
    background: #004f75 !important;
}

.md-toast-error .md-toast-content{
    background: rgb(193, 30, 23) !important;
}

并定义吐司：

    $mdToast.show(
        $mdToast.simple()
            .toastClass('md-toast-error')
            .textContent(stringValue)
            .position('bottom right')
            .hideDelay(3000)
    );

如何用背景颜色显示 md-toast

How to show md-toast with background color

css

angularjs

angular-material

定位吐司

给吐司上色