resizeable_dialog.html
<link rel="import" href="../../packages/polymer/polymer.html">
<link rel="import" href="../../packages/paper_elements/paper_dialog.html">
<link rel="import" href="../../packages/paper_elements/paper_button.html">
<link rel="import" href="../../packages/paper_elements/paper_tabs.html">
<link rel="import" href="../../packages/paper_elements/paper_tab.html">
<link rel="import" href="../../packages/paper_elements/paper_icon_button.html">
<link rel="import" href="../../packages/core_elements/core_toolbar.html">
<link rel="import" href="../../packages/core_elements/core_pages.html">
<polymer-element name="resizeable-dialog">
<template>
<style>
:host {
display: block;
}
</style>
<paper-button on-click="{{open}}">Open Dialog</paper-button>
<paper-dialog id="dialog" transition="core-transition-bottom" backdrop>
<paper-tabs selected="{{selected}}">
<paper-tab>Page 1</paper-tab>
<paper-tab>Page 2</paper-tab>
</paper-tabs>
<section>
<core-pages selected="{{selected}}">
<div style="width: 100px; height: 100px;">
<div>Page 1: 100x100</div>
<paper-button on-click="{{notifyResize}}">Call 'notifyResize'</paper-button>
</div>
<div style="width: 400px; height: 400px;">
<div>Page 2: 400x400</div>
<paper-button on-click="{{notifyResize}}">Call 'notifyResize'</paper-button>
</div>
</core-pages>
</section>
</paper-dialog>
</template>
<script type="application/dart" src="resizeable_dialog.dart"></script>
</polymer-element>
resizeable_dialog.dart
library resizable_dialog;
import 'package:polymer/polymer.dart';
import 'package:paper_elements/paper_dialog.dart';
@CustomTag('resizeable-dialog')
class ResizeableDialog extends PolymerElement {
ResizeableDialog.created() : super.created();
@observable int selected = 0;
notifyResize() {
$['dialog'] as PaperDialog..notifyResize();
print('"notifyResize" called.');
}
open() {
$['dialog'] as PaperDialog..open();
}
}
这是我的对话框,我想你通过标签栏明白了。我的问题是
<paper-dialog>
在显示之前的某个时间点计算其尺寸。然而,自从我的 <core-pages>
可以有不同的宽度和高度,每当用户选择一个选项卡以确保当前所选页面的全部内容可见时,我都必须调整对话框的大小。方法
<paper-dialog>.notifyResize()
由于某些原因,在 Dart 中不存在。指定 here ,在 paper-elements
文档,但我无法调用它,因为它在 Dart 中不存在。我怎样才能做到这一点?如何让对话框重新测量其尺寸?
最佳答案
你应该能够像
import 'dart:js' as js;
...
new js.JsObject.fromBrowserObject($['dialog'])
.callMethod('notifyResize', []);
或者
import 'package:paper_elements/paper_dialog.dart';
...
($['dialog'] as PaperDialog).jsElement
.callMethod('notifyResize', []);
请在 github.com/dart-lang/paper-elements repo(或 core-elements,因为我认为这个功能应该从 core-overlay 继承)中创建一个错误报告
关于dart - 在对话框中选择 <paper-tab> 时调整 <paper-dialog> 的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30009091/