Wie man md-toast mit Hintergrundfarbe zeigt

Question

Ich versuche, md-toast mit etwas Hintergrundfarbe zu erstellen, um mit eckigem Material zu rösten. Ich verwende Antworten von diesem SO Frage, ich habe diesen Codepen erstellt, aber er zeigt einige unerwünschter Hintergrund zum Anstoßen.

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

css angularjs angular-material

13

Saurabh 5 Jän. 2016 im 18:01

Answer 1

Toast positionieren

Anstatt alles zu positionieren (was das Schneiden Ihres Toasts bewirkt), können Sie nur das md-toast an der richtigen Position positionieren.

In der Dokumentation finden Sie vier Stellen, an denen Sie den Toast offiziell platzieren können: oben links, oben rechts, unten links, unten rechts . Positionieren Sie den Toast zunächst auf oben links (dies ist wichtig für die Änderung der Animation. Auf diese Weise können wir auch Toasts in der unteren Mitte anzeigen.) .

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

Jetzt positionieren Sie in der CSS einfach Ihren Toast:

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

Dadurch wird der Toast in der Mitte des Ansichtsfensters abzüglich der Hälfte des Toasts positioniert.

Sie können Toasts in der unteren Mitte auch nur mit Javascript anzeigen:

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

Und der Toast wird unten zentriert und verwendet die richtige Animation, um ihn anzuzeigen.

Den Toast färben

Sie haben den Behälter des Toasts anstelle des tatsächlichen Inhalts des Toasts gefärbt. Um den Toast zu färben, können Sie das folgende CSS-Styling hinzufügen:

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

Sie können das Thema des Toasts ändern, um das Standard-Toast-Styling nicht zu überschreiben. Das Ändern der Position für ein bestimmtes Thema kann auch dazu beitragen, beide Positionen (Standard und manuell) gleichzeitig zu verwenden (durch Ändern des Themas).

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

Hier ist eine funktionierende GABEL Ihres Codepens.

16

Thatkookooguy 8 Dez. 2016 im 10:28

Answer 2

Beim Benutzen

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

In der Konsole wird eine Warnung angezeigt, dass das angegebene Thema nicht definiert wurde. Besser ist es, das toastClass-Attribut zu verwenden.

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

Arbeitsbeispiel Codepen

5

user1809033 29 Aug. 2016 im 17:06

Answer 3

.toastClass(string) Legt eine Klasse für das Toastelement fest

CSS definieren:

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

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

Und definieren Sie Toast:

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

5

hurricane 22 Nov. 2016 im 13:58

Wie man md-toast mit Hintergrundfarbe zeigt

3 Antworten

Toast positionieren

Den Toast färben

Verwandte Fragen

Neue Fragen

css