在聚合物中如何在右上方对齐纸张烤面包

Question

如果我没有弄错,最近这种情况已经改变了.看看这里的例子:

http://jsbin.com/fujasojilu/edit?html,output

我想要的行为与左下角相同,但是从右上角开始.

我怎么做？

Answer 1

paper-toast是按照零食栏和吐司的材料设计规范创建的,它规定:

入口处,小吃店从屏幕的底部边缘向上动画.当它们出现时,它们不会阻止输入.

所以他们并没有真正为我们提供改变动画方向的方法.

但是,您可以使用该fitInto属性使吐司出现在某个容器中,如果您将该容器设置为在窗口顶部具有固定位置,则可以获得与您想要的行为有些类似的行为.

这是一个如何做到这一点的例子:

<div id="container" style='position: fixed; top:60px; right:10px; width: 100%;'></div>
<paper-button raised onclick="toast0.open()">Default toast</paper-button>
<paper-toast class="fit-bottom" id="toast0" text="This toast auto-closes after 3 seconds"></paper-toast>

<script>
  toast0.fitInto = container;
</script>

这是一个显示其外观的bin.

如果你真的需要来自屏幕右上角的吐司,动画有意义,那么我建议你为此制作自己的元素.

编辑:在customelements.io中快速搜索显示有人已经在处理这种元素.有一个叫做toast-er,除其他外,让你从任何角落出现吐司.