Question

我希望在页面顶部显示网站消息（如上次操作的成功或错误通知）。

Angular material docs say你可以在顶部放置一个祝酒词：

position - {string =}：放置吐司的位置。可用：＆＃39; bottom＆＃39;，＆＃39; left＆＃39;，＆＃39; top＆＃39;，＆＃39; right＆＃39;的任意组合。默认值：＆＃39;左下角＆＃39;。

顶部位置适用于宽度为＆gt; = 960px的桌面浏览器，但在宽度变小时会被忽略（然后吐司总是在底部） - 为什么会这样？在移动设备上，它也始终处于底层。

Answer 1

显然Angular Material（根据v1.1.0.rc1）不支持宽度小于960px的屏幕，但是我们可以有这样的解决方法：

<body ng-app="myApp">
  <div layout-fill>
    <md-toolbar ng-cloak>
      <div class="md-toolbar-tools">
        <md-button>My app</md-button>
      </div>
    </md-toolbar>
    <div id="toaster"></div>
    <md-content id="content" ng-cloak>
      ...
    </md-content>
  </div>
</body>

CSS：

#toaster {
  position: fixed;
  top: 56px;
  height: 48px;
  left: 0;
  width: 100%;
  z-index: 10000;
}

JS：

$mdToast.show($mdToast.simple()
  .textContent('hello!')
  .parent(document.querySelectorAll('#toaster'))
  .position('top left')
  .hideDelay(false)
  .action('x'));

结果：http://screencast.com/t/B1U8aXaFcd

当页面滚动时，这也会使吐司保持在其位置。但是使用这个解决方案，动画隐藏将继续将消息移动到底部，而不是顶部。在我的真实项目中，我最终没有与MD斗争并且在底部吐司，但是在滚动页面时我使用这种方法来保持其位置。

Answer 2

根据Google Material Design文档（我的要点）：

Snackbars通过在屏幕底部显示简短消息来提供有关操作的轻量级反馈。 Snackbars可以包含操作。

如果要查看angular-material.css（按照v.1.0.5）：

@media (max-width: 959px) {
  md-toast {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border-radius: 0;
    bottom: 0; 
  }
  ...
}

您不能在宽度小于960px的屏幕上放置祝酒词（因为bottom: 0页边距），因为angular-material的团队刚刚实施了规范不要定义这种可能性。

尝试扩展/覆盖css以实现这一目标。

Answer 3

这是一个CSS解决方案：

@media (max-width:959px) {
  md-toast {
    bottom: unset !important;
  }
}

希望这有帮助。

Answer 4

试试这个：

HTML：

<body layout="column">
<!-- body ---> 
</body>

CSS：

body {
   overflow-y: hidden !important;
}

是否可以在页面顶部放置$ mdToast用于窄视口？

4 个答案: