Cách hiển thị md-bánh mì nướng với màu nền

Question

Tôi đang cố gắng tạo md-bánh mì nướng với một số màu nền để bánh mì nướng bằng cách sử dụng vật liệu góc. Tôi sử dụng câu trả lời từ số SO question này, tôi đã tạo ra codepen này, nhưng nó cũng đang hiển thị một số nền không mong muốn cho bánh mì nướng.

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

vị bánh mì nướng

Thay vì đưa ra một vị trí để tất cả mọi thứ (mà làm cho cắt của bạn ast), bạn có thể chỉ định vị trí md-toast đến đúng vị trí.

Bằng tài liệu, có bốn vị trí nơi bạn có thể chính thức đặt bánh mì nướng: trên cùng bên trái, trên cùng bên phải, dưới cùng bên trái, dưới cùng bên phải. Vì vậy, trước tiên, hãy đặt vị trí bánh mì nướng cho trên cùng bên trái (điều này rất quan trọng đối với thay đổi trong hoạt ảnh. Ngoài ra, điều này cũng cho phép chúng tôi hiển thị biểu tượng trên dưới cùng chính giữa).

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

bây giờ, trong css, chỉ cần vị trí của bánh mì nướng của bạn:

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

này sẽ xác định vị trí các bánh mì nướng tại trung tâm của viewport, trừ một nửa số bánh mì nướng.

bạn cũng có thể hiển thị nâng cốc chúc mừng trên trung tâm đáy bởi alone javascript:

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

và bánh mì nướng sẽ tập trung ở phía dưới và sử dụng các hình ảnh động ngay để hiển thị nó.

Tô màu bánh mì nướng

Bạn tô màu hộp chứa bánh mì nướng thay vì nội dung thực tế của bánh mì nướng. Để tô màu cho bánh mì nướng, bạn có thể thêm các phong cách css sau:

md-toast.md-success-toast-theme .md-toast-content { 
    background-color: green; 
} 

Bạn có thể thay đổi chủ đề của bánh mì nướng để không ghi đè lên phong cách bánh mì nướng mặc định. Ngoài ra, việc thay đổi vị trí cho một chủ đề cụ thể có thể giúp sử dụng cả hai vị trí (mặc định và thủ công) cùng một lúc (bằng cách thay đổi chủ đề).

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

Đây là số đang hoạt động FORK của bạn codepen.

Answer 2

Khi sử dụng

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

Phạt cảnh cáo xảy ra trong giao diện điều khiển mà các chủ đề cụ thể chưa được xác định. Tốt hơn là sử dụng thuộc tính 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; 
    } 
    } 
} 

dụ làm việc Codepen

Answer 3

.toastClass(string) Thiết lập một lớp học về các yếu tố bánh mì nướng

Xác định css:

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

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

Và xác định bánh mì nướng:

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