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

前端之家收集整理的这篇文章主要介绍了css – 如何用背景颜色显示md-toast前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试使用角质材料制作一些背景颜色的烤面包.我使用这个 SO question的答案,我创建了这个 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)
    );
  };
})

解决方法

定位吐司

而不是给所有的东西(这使你的烤面包切割)的位置,你只能将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.

原文链接:https://www.f2er.com/css/214531.html

猜你在找的CSS相关文章