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

Question

如果我没有记错，最近这种情况已经改变了。 看看这里的例子：

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

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

我该怎么做？

Answer 1

paper-toast是在material design spec for snackbars & toasts之后创建的，它指定了：

  

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

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

但是，您可以使用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，除其他外，让你从任何角落出现吐司。