是否可以将 $mdToast 放置在页面顶部以实现窄视口？

Question

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

Angular material docs say 你可以在顶部放置一个吐司：

position - {string=}: Where to place the toast. Available: any combination of 'bottom', 'left', 'top', 'right'. Default: 'bottom left'.

顶部位置对于宽度 >= 960px 的桌面浏览器来说效果很好，但当宽度变小时会被忽略（然后 toast 总是在底部）——这是为什么？在移动设备上，它也始终位于底部。

Answer 1

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

Snackbars provide lightweight feedback about an operation by showing a brief message at the bottom of the screen. Snackbars can contain an action.

如果要查看 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 的团队刚刚实现了规范不要定义这种可能性。

尝试 extend/overwrite css 以实现这一目标。

Answer 2

显然 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

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

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 放置在页面顶部以实现窄视口？

Is it possible to position an $mdToast at the top of the page for narrow viewport?

angularjs

material-design

angular-material