I am fairly new to Polymer and working within the app-drawer-template as part of the App Toolbox tutorial.
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<app-drawer-layout fullbleed>
<my-shared shared-data="{{sharedData}}"></my-shared>
<!-- Drawer content -->
<app-drawer>
<app-toolbar>Menu</app-toolbar>
<iron-selector selected="[[routeData.page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="view1" href="/view1">View One</a>
<a name="view2" href="/view2">View Two</a>
<a name="view3" href="/view3">View Three</a>
<a name="new-view" href="/new-view">Another View</a>
<a name="order" href="/order">Order view</a>
</iron-selector>
</app-drawer>
<!-- Main content -->
<app-header-layout has-scrolling-region>
<app-header condenses reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div title>Sam's App</div>
</app-toolbar>
</app-header>
<iron-pages role="main" selected="[[routeData.page]]" attr-for-selected="name">
<my-view1 name="view1" shared-data="{{sharedData}}"></my-view1>
<my-view2 name="view2" shared-data="{{sharedData}}"></my-view2>
<my-view3 name="view3"></my-view3>
<my-new-view name="new-view"></my-new-view>
<my-order name="order" shared-data="{{sharedData}}"></my-order>
</iron-pages>
</app-header-layout>
</app-drawer-layout>
In one of the pages I created a paper-dialog element
<paper-button on-tap="toggleTestDialog">Toggle Test Dialog</paper-button>
<paper-dialog id="idTestDialog" style="width: 100%; background-color: blue;">
<h2>Dialog Title</h2>
<div>Content to dialog</div>
</paper-dialog>
When the drawer is closed the dialog box is centered to the main content section.但是当抽屉打开时,对话框不适合主要内容部分,但{ {3}}我曾尝试使用positionTarget属性来定位纸质对话框,但无法将对话框置于app-header-layout标签内的主要内容部分。我也只添加了宽度:100%清楚地表明这个问题。我不确定我是否正确使用了positionTarget,或者我是否还有其他问题。
toggleTestDialog: function () {
this.$.idTestDialog.positionTarget = this.$.idContainingDiv;
console.log(this.$.idTestDialog.positionTarget);
this.$.idTestDialog.open();
}