Art*_*iev 9 angularjs material-design angular-material
我想在页面顶部显示站点消息(如上次操作的成功或错误通知).
Angular材料文档说你可以在顶部放置一个toast:
position - {string =}:吐司的位置.可用:"底部","左侧","顶部","右侧"的任意组合.默认值:'左下角'.
顶部位置适用于宽度> = 960px的桌面浏览器,但是当宽度变小(然后吐司总是在底部)时会被忽略 - 为什么会这样？在移动设备上,它也始终处于底层.
显然,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斗争并且在底部吐司,但我在滚动页面时使用这种方法来保持其位置.
| 归档时间： |
|
| 查看次数： |
10068 次 |
| 最近记录： |