Wie um zu zeigen, md-toast mit Hintergrundfarbe

Ich versuche zu erstellen md-toast mit ein paar hintergrund-Farbe toast mit eckig-material. Ich mit Antworten aus diesem ALSO Frage, habe ich diese codepen, aber es zeigt einige unerwünschte hintergrund toast sowie.

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

InformationsquelleAutor Saurabh | 2016-01-05

13

Positionierung der toast

Anstatt einer position, um alles (das macht das schneiden von Ihrem toast), können Sie nur die position der md-toast in die richtige position.

Durch die Dokumentation gibt es vier Ort, an dem Sie offiziell legte den toast: oben Links, oben rechts, unten Links, unten rechts. Also, Erstens können die position der toast zu oben Links (dies ist wichtig für die Veränderung in der animation. Auch dies wird es uns ermöglichen, zu zeigen, stößt auf unten in der Mitte).
```
$mdToast.show(
  $mdToast.simple()
    .textContent('Simple lala Toast!')
    .position('top')
```
nun in der css nur die position des Popups:
```
md-toast {
  left: calc(50vw - 150px);
}
```
Dieser position wird der toast in der Mitte des viewport, minus die Hälfte der toast.

können Sie auch zeigen, toasts, auf der unteren Mitte von javascript allein:
```
$mdToast.show(
  $mdToast.simple()
    .textContent('Simple lala Toast!')
    .position('bottom')
```
und die toast-Zentrum an der Unterseite und verwenden Sie die richtige animation zu zeigen.

Färbung der toast

Du hast die toast - container anstelle des eigentlichen Inhalt der toast. Farbe der toast, können Sie fügen Sie den folgenden css-styling:
```
md-toast.md-success-toast-theme .md-toast-content {
  background-color: green;
}
```
Können Sie ändern Sie die toast ' s theme, um nicht zu überschreiben die Standard-toast-styling. Auch das ändern der position für ein bestimmtes Thema kann helfen, verwenden Sie die beiden Positionen (Standard und manuell) zur gleichen Zeit (Wechsel-Thema).
```
md-toast.md-thatkookooguy-toast-theme {
  left: calc(50vw - 150px);
}
```
Hier ist eine funktionierende GABEL Sie codepen.

Dies wird auch ermöglichen es Ihnen, um mit .position('top left') und .position('bottom left'). Wenn Sie möchten, halten Sie die Rechte Stile statt, Sie können ändern Sie die css-Positionierung right: calc(50vw - 150px);
wenn ich Sie benutze .Thema(..) eine Warnung immer angezeigt wird in der Javascript-Konsole

InformationsquelleAutor Thatkookooguy

Bei der Verwendung

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

Einer Warnung in der Konsole, dass das angegebene Thema wurde nicht definiert. Besser ist die Verwendung der toastClass Attribut.

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

Beispiel arbeiten Codepen

Downvoter, Pflege zu kommentieren? Das sieht aus wie eine tragfähige Lösung für mich für diejenigen, die lieber nicht in die Welt der Thematisierung.
Dies scheint die "offizielle" Art und Weise, wie diskutiert in diesem thread: github.com/angular/material/issues/2878

InformationsquelleAutor user1809033

.toastClass(string) Legt Klasse auf die toast-element

Definieren css:

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

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

Definieren und toast:

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

InformationsquelleAutor hurricane

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Positionierung der toast

Färbung der toast