Как показать md-тост с цветом фона

Я пытаюсь создать md-toast с цветом фона для тоста, используя angular -материал. Я использую ответы из этого вопроса qaru.site/info/117607/..., я создал этот 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)
    );
  };
})

Ответы

Ответ 1

Размещение тоста

Вместо того, чтобы задавать все (что делает резку вашего тоста), вы можете поместить только 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 из вашего кода.

Ответ 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

Ответ 3

.toastClass(string) Устанавливает класс на тосте

Определить 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)
    );