gpt4 book ai didi

html - polymer 纸-对话位置

转载 作者:搜寻专家 更新时间:2023-10-31 22:42:53 28 4
gpt4 key购买 nike

在我的应用程序中,我使用了 polymer 的 paper-dialog 元素。对话框的样式总是将它定位在中心,但我希望它在对话框和窗口右侧之间设置一个最小距离,所以当窗口缩小时,纸质对话框不会靠近右侧, 比设定的距离。有什么方法可以使用 CSS 来实现,还是应该使用其他技术?

最佳答案

如果你想指定对话框和右侧之间的距离,你可能想用固定位置影响纸质对话框的属性权限,如下所示:

html /deep/ .dialog-right-position {
position: fixed;
top: 10px;
right: 10px;
}

然后您当然只需使用相同的 css 类名称声明您的元素。

<paper-dialog heading="Custom Dialog Positioning" class="dialog-right-position">
<p>well right positioned paper dialog :) ! </p>
</paper-dialog>

如果你需要一个工作示例,这里是:

<!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>

关于html - polymer 纸-对话位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29622789/

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