聚合物纸 - 对话框位置 [英] Polymer paper-dialog position
问题描述
在我的应用程序中，我使用的是聚合物的纸张对话框元素。对话框的样式总是位于中心，但我希望它在对话框和窗口右侧之间设置一个最小距离，因此当窗口缩小时，纸张对话框不会更接近右侧，比设定距离。有什么办法，我可以用CSS做，或者我应该使用一些其他技术？
In my application I am using polymer's paper-dialog element. The dialog's styles always position it in the center, but I want it to have a minimum distance set between the dialog and the right side of the window, so when the window shrinks, the paper-dialog won't get closer to the right side, than the set distance. Is there any way that I can do it with CSS, or shall I use some other technic?
推荐答案
如果你想指定对话框和右侧之间的距离可能会影响您的纸对话框的属性，如下所示：
if you want to specified a distance between the dialog and the right side you might want to affect the property right of your paper-dialog with a fixed position like following :
html /deep/ .dialog-right-position {
position: fixed;
top: 10px;
right: 10px;
}
那么你只需用相同的css类名声明你的元素。 / p>
then you just declare your element with the same css class name of course.
<paper-dialog heading="Custom Dialog Positioning" class="dialog-right-position">
<p>well right positioned paper dialog :) ! </p>
</paper-dialog>
如果你需要一个工作示例，这里是：
and if you need a working example, here it is :
<!doctype html>
<html>
<head>
<title>paper-dialog-alignment </title>
<script src="webcomponentsjs/webcomponents.js"></script>
<link href="paper-button/paper-button.html" rel="import">
<link href="paper-dialog/paper-dialog.html" rel="import">
<style shim-shadowdom>
html /deep/ .dialog-right-position {
position: fixed;
top: 10px;
right: 10px;
}
html /deep/ .dialog-right-position::shadow #scroller {
width: 500px;
height: 350px;
}
</style>
</head>
<body unresolved>
<template is="auto-binding">
<section on-tap="{{toggleRightDialog}}">
<button>
Display dialog
</button>
<paper-dialog heading="Custom Dialog Positioning" class="dialog-right-position">
<p>well right positioned paper dialog :) ! </p>
</paper-dialog>
</section>
</template>
<script>
var scope = document.querySelector('template[is=auto-binding]');
scope.toggleRightDialog = function(e) {
if (e.target.localName == 'button') {
var d = e.target.nextElementSibling;
if (d) {
d.toggle();
}
}
};
</script>
</body>
</html>
这篇关于聚合物纸 - 对话框位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
