调整大小< paper-dialog>当选择<纸 - tab>在对话框内 [英] Resize <paper-dialog> when selecting <paper-tab> inside the dialog

问题描述

resizeable_dialog.html

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

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> 可以具有不同的宽度&高度，我必须调整对话框的大小，每当用户选择一个选项卡，以确保当前选定页面的整个内容可见。

This is my dialog, I think you get the idea with the tabbar. My problem is that the <paper-dialog> calculates its dimensions at some point before it gets shown. However, since my <core-pages> can have different width & height, I have to resize the dialog whenever the user selects a tab to ensure, that the whole content of the current selected page is visible.

方法< paper-dialog> .notifyResize（）由于某些原因不存在于Dart中。已指定此处 ，在 paper-elements 文档中，但是我不能调用它，因为它在Dart中不存在。

The method <paper-dialog>.notifyResize() does not exist in Dart for some reasons. It's specified here, in the paper-elements documentation but I cannot invoke it, since it does not exist in 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库中创建一个错误报告核心元素，因为我认为这个函数应该继承自core-overlay）

Please create a bug report in the github.com/dart-lang/paper-elements repo (or core-elements, because I think this function should be inherited from core-overlay)

这篇关于调整大小< paper-dialog>当选择<纸 - tab>在对话框内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！