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

时间:2016-03-07 23:46:44

标签: polymer

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

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

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

我该怎么做?

1 个答案:

答案 0 :(得分:5)

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,除其他外,让你从任何角落出现吐司。