基于父页面的自定义元素 Polymer 对话框 size/position
Custom element Polymer dialog size/position based on parent page
我刚开始玩 Polymer 对话框。我尝试创建一个自定义元素聚合物对话框并在纸质卡片中使用它。但是,我遇到了问题,因为对话框是根据纸卡的 size/position 而不是整页显示的。
我可以知道如何设计它的样式以便对话框 size/position 将基于主页而不是卡片吗?谢谢。
Main page, paper-card is a 100x100px card:
<paper-card>
Text
<my-custom-dialog></my-custom-dialog>
</paper-card>
My-custom-dialog:
<dom-module id="my-custom-dialog">
<style is="custom-style">
paper-dialog {
position: absolute;
top: 3%;
left: 0px;
margin-top: 0px;
width: 100%;
height: 100%;
overflow: auto;
z-index: 1;
}
.fa-times {
cursor: pointer
}
</style>
<template>
<i class="fa fa-object-group" aria-hidden="true" on-tap="toggleDialog"></i>
<paper-dialog id="dialog" always-ontop entry-animation="scale-up-animation" exit-animation="fade-out-animation">
<div class="buttons">
<i class="fa fa-times" aria-hidden="true" dialog-confirm></i>
</div>
<strong>Text here</strong>
</paper-dialog>
</template>
</dom-module>
<script>
Polymer({
is: "my-custom-dialog",
toggleDialog: function () {
this.$.dialog.toggle();
},
})
</script>
BartKoppelmans 是正确的。纸质对话需要在纸质卡片之外。您仍然可以将按钮保留在卡片内。
<template>
<paper-card style="width: 50%;">
<i class="fa fa-object-group" aria-hidden="true" on-tap="toggleDialog">?</i>
</paper-card>
<paper-dialog id="dialog" always-ontop auto-fit-on-attach entry-animation="scale-up-animation" exit-animation="fade-out-animation">
<div class="buttons">
<i class="fa fa-times" aria-hidden="true" dialog-confirm></i>
</div>
<strong>Text here</strong>
</paper-dialog>
</template>
我刚开始玩 Polymer 对话框。我尝试创建一个自定义元素聚合物对话框并在纸质卡片中使用它。但是,我遇到了问题,因为对话框是根据纸卡的 size/position 而不是整页显示的。
我可以知道如何设计它的样式以便对话框 size/position 将基于主页而不是卡片吗?谢谢。
Main page, paper-card is a 100x100px card:
<paper-card>
Text
<my-custom-dialog></my-custom-dialog>
</paper-card>
My-custom-dialog:
<dom-module id="my-custom-dialog">
<style is="custom-style">
paper-dialog {
position: absolute;
top: 3%;
left: 0px;
margin-top: 0px;
width: 100%;
height: 100%;
overflow: auto;
z-index: 1;
}
.fa-times {
cursor: pointer
}
</style>
<template>
<i class="fa fa-object-group" aria-hidden="true" on-tap="toggleDialog"></i>
<paper-dialog id="dialog" always-ontop entry-animation="scale-up-animation" exit-animation="fade-out-animation">
<div class="buttons">
<i class="fa fa-times" aria-hidden="true" dialog-confirm></i>
</div>
<strong>Text here</strong>
</paper-dialog>
</template>
</dom-module>
<script>
Polymer({
is: "my-custom-dialog",
toggleDialog: function () {
this.$.dialog.toggle();
},
})
</script>
BartKoppelmans 是正确的。纸质对话需要在纸质卡片之外。您仍然可以将按钮保留在卡片内。
<template>
<paper-card style="width: 50%;">
<i class="fa fa-object-group" aria-hidden="true" on-tap="toggleDialog">?</i>
</paper-card>
<paper-dialog id="dialog" always-ontop auto-fit-on-attach entry-animation="scale-up-animation" exit-animation="fade-out-animation">
<div class="buttons">
<i class="fa fa-times" aria-hidden="true" dialog-confirm></i>
</div>
<strong>Text here</strong>
</paper-dialog>
</template>