Angularjs 是否可以将$mdToast放置在页面顶部以进行窄视口？
我希望在页面顶部显示站点消息（如上一次操作的成功或错误通知）以敬酒 角度材质文档您可以将烤面包放在顶部： 位置-{string=}：放置吐司的位置。可用：底部、左侧、顶部、右侧的任意组合。默认值：“左下角” 顶部位置对于宽度>=960px的桌面浏览器很好，但是当宽度变小时会被忽略（那么toast总是在底部）-为什么？在移动设备上，它也总是位于底部。根据文档（我的亮点）： snackbar通过在屏幕底部显示一条简短消息来提供有关操作的轻量级反馈。snackbar可以包含操作 如果要查看Angularjs 是否可以将$mdToast放置在页面顶部以进行窄视口？,angularjs,material-design,angular-material,Angularjs,Material Design,Angular Material,我希望在页面顶部显示站点消息（如上一次操作的成功或错误通知）以敬酒 角度材质文档您可以将烤面包放在顶部： 位置-{string=}：放置吐司的位置。可用：底部、左侧、顶部、右侧的任意组合。默认值：“左下角” 顶部位置对于宽度>=960px的桌面浏览器很好，但是当宽度变小时会被忽略（那么toast总是在底部）-为什么？在移动设备上，它也总是位于底部。根据文档（我的亮点）： snackbar通过在屏幕底部显示一条简短消息来提供有关操作的轻量级反馈。snackbar可以包含操作 如果要查看angula
angular material.css底部：0Angle material尝试扩展/覆盖css以实现这一点。显然，对于宽度小于960px的屏幕，角度材质（根据v1.1.0.rc1）不支持这一点，但我们可以有如下解决方法：
<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>
当页面滚动时，这也将使烤面包保持在其位置。但使用此解决方案，动画隐藏将继续将消息移动到底部，而不是顶部。在我真正的项目中，我最终没有与MD抗争，也没有在底部吃吐司，但我使用这种方法在滚动页面时保持其位置。以下是CSS解决方案：
@media (max-width:959px) {
md-toast {
bottom: unset !important;
}
}
您可能需要扩展/覆盖烘焙CSSThank You@iulian！是的，我看到那个MD文档，只是想知道为什么Angular Material团队并没有明确说明$mdToast的位置选项只适用于更大的屏幕尺寸。听起来他们可能在下一个版本中支持更小的尺寸（或者更正文档：）
#toaster {
position: fixed;
top: 56px;
height: 48px;
left: 0;
width: 100%;
z-index: 10000;
}
$mdToast.show($mdToast.simple()
.textContent('hello!')
.parent(document.querySelectorAll('#toaster'))
.position('top left')
.hideDelay(false)
.action('x'));
@media (max-width:959px) {
md-toast {
bottom: unset !important;
}
}
<body layout="column">
<!-- body --->
</body>
body {
overflow-y: hidden !important;
}