gpt4 book ai didi

angularjs - 是否可以在页面顶部放置一个 $mdToast 以实现窄视口(viewport)?

转载 作者:行者123 更新时间:2023-12-03 15:32:07 25 4
gpt4 key购买 nike

我想在页面顶部显示站点消息(如上次操作的成功或错误通知)。

Angular Material 文档 say您可以在顶部放置 toast :

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



顶部位置适用于宽度 >= 960px 的桌面浏览器,但当宽度变小时会被忽略(然后 toast 总是在底部) - 为什么会这样?在移动设备上,它也始终位于底部。

最佳答案

显然,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 作斗争,也没有在底部 toast ,但我使用这种方法在滚动页面时保持其位置。

关于angularjs - 是否可以在页面顶部放置一个 $mdToast 以实现窄视口(viewport)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35955756/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com