Ich möchte gerne auf Site-Nachrichten (wie Erfolgs- oder Fehlerbenachrichtigung bei letzter Aktion), die oben auf der Seite angezeigt werden, anstoßen.
Angular material docs sagen Sie können einen Toast an der Spitze positionieren:
position - {string =}: Wo wird der Toast platziert? Verfügbar: jede Kombination von "unten", "links", "oben", "rechts". Standard: 'unten links'.
Die obere Position funktioniert gut für Desktop-Browser mit der Breite & gt; = 960px, wird aber ignoriert, wenn die Breite geringer wird (dann ist der Toast immer unten) - warum ist das so? Und auf Mobilgeräten ist es auch immer unten.
Offenbar wird das von Angular Material (gemäß v1.1.0.rc1) nicht unterstützt, wenn die Bildschirme eine Breite von weniger als 960 Pixel haben, aber wir können eine Workaround wie folgt haben:
%Vor%CSS:
%Vor%JS:
%Vor%Ergebnis: Ссылка
Dies hält auch den Toast an seiner Position, wenn die Seite gescrollt wird. Aber mit dieser Lösung wird die animierte Haut die Nachricht weiter nach unten, nicht nach oben bewegen. In meinem realen Projekt habe ich nicht gegen MD gekämpft und den Toast ganz unten gehabt, aber ich benutze diesen Ansatz, um beim Scrollen der Seite seine Position zu halten.
Gemäß den Google Material Design -Dokumenten (meine Highlights):
Snackbars bieten leichtgewichtiges Feedback zu einer Operation, indem sie eine kurze Meldung unten auf dem Bildschirm anzeigen. Snackbars können eine Aktion enthalten.
Wenn Sie in angular-material.css (wie in v.1.0.5) nachsehen:
Sie können kein Toast auf Bildschirme mit einer Breite von weniger als 960px out-of-the-box (wegen der% Co_de% Marge), weil das Team bei bottom: 0 nur die Spezifikationen implementiert, die diese Möglichkeit nicht definieren.
Versuchen Sie, die CSS zu erweitern / zu überschreiben, um das zu erreichen.
Tags und Links angularjs angular-material material-design