Polymer 向vaadin拆分布局元素内的元素添加熨斗调整大小

我正在使用

vaadin分割布局

元素垂直分割屏幕

我有以下作为我的应用程序样式的一部分

        .flex-horizontal {
          @apply(--layout-horizontal);
        }
        .flex-vertical {
          @apply(--layout-vertical);
        }
        .flexchild {
          @apply(--layout-flex);
        }

以下是

vaadin拆分布局图

。easymetahub-d3-graph支持

IronResizeableBehavior

。我需要id为

thetop

和

d3graphcontainer

的元素响应熨斗调整大小行为，以便

easymetahub-d3-graph

响应

vaadin拆分布局中的熨斗调整大小

          <vaadin-split-layout orientation="vertical">
          <div id="thetop" class="card flexchild">
            <vaadin-horizontal-layout>
              <div class="flex-vertical" style="margin-top: 20px; margin-bottom: 70px;">
                <paper-icon-button class="command" id="changeButton" title="Save changes" icon="save" disabled$="[[!changelog.length]]" on-tap="openSaveChanges"></paper-icon-button>
                <paper-icon-button class="command" title="Harvest Data" src="images/app-icon-32.png" on-tap="openHarvestData"></paper-icon-button>
                <paper-icon-button class="command" title="Monitor Harvests" icon="watch-later" on-tap="openMonitorHarvest"></paper-icon-button>
                <div class="flexchild"></div>
                <div class="rootnode">Root</div>
                <div class="dependentnode">Dependent</div>
                <div class="referencenode">Reference</div>
                <div class="unassignednode">Unassigned</div>
              </div>
              <div id="d3graphcontainer" style="width: 100%; height: 50vh; min-height: 300px;">
                <easymetahub-d3-graph graph="[[result]]" selected-node="{{entitydetail}}" selected-link="{{selectedLink}}" changelog="{{changelog}}" class="flex-vertical"></easymetahub-d3-graph>
              </div>
            </vaadin-horizontal-layout>
          </div>
          <iron-pages id="ip" selected="0">
            <no-detail></no-detail>
            <entity-display entitydetail="{{entitydetail}}" changelog="{{changelog}}"></entity-display>
            <link-detail linkdetail="{{selectedLink}}"></link-detail>
          </iron-pages>
          </vaadin-split-layout>


根
依赖的
参考文献
未分配

我遗漏了什么？
我找到了解决办法。我在分割的顶部放置了一个瓦丁分割布局

    <vaadin-split-layout orientation="vertical" style="height: 100%;">
      <vaadin-split-layout orientation="horizontal" style="height: 50%; min-height: 100px;">
        <iron-resize-div id="sidebar" class="flex-vertical"v style="min-width: 85px; max-width: 85px;">
          <paper-icon-button style="width: 85px;" class="command" id="changeButton" title="Save changes" icon="save" disabled$="[[!changelog.length]]" on-tap="openSaveChanges"></paper-icon-button>
          <paper-icon-button style="width: 85px;" class="command" title="Harvest Data" src="images/app-icon-32.png" on-tap="openHarvestData"></paper-icon-button>
          <paper-icon-button style="width: 85px;" class="command" title="Monitor Harvests" icon="watch-later" on-tap="openMonitorHarvest"></paper-icon-button>
          <div style="width: 85px;" class="flexchild"></div>
          <div class="rootnode" style="width: 85px;">Root</div>
          <div class="dependentnode" style="width: 85px;">Dependent</div>
          <div class="referencenode" style="width: 85px;">Reference</div>
          <div class="unassignednode" style="width: 85px;">Unassigned</div>
        </iron-resize-div>
        <easymetahub-d3-graph graph="[[result]]" selected-node="{{entitydetail}}" selected-link="{{selectedLink}}" changelog="{{changelog}}" class="flex-vertical"></easymetahub-d3-graph>
      </vaadin-split-layout>


根
依赖的
参考文献
未分配

将以下内容作为iron resize div

  "use strict";
  import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
  import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
  import {IronResizableBehavior} from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';

  /**
   * @customElement
   * @polymer
   */
  class IronResizeDiv extends mixinBehaviors([IronResizableBehavior], PolymerElement) {

    static get template() {
      return html`
      <style>
        :host {
          display: block;
          height: 100%;
          width: 100%;
        }
        .general {
          width: 98%;
          height: 98%;
        }
      </style>
      <div class="general">
        <slot></slot>
      </div>
      `;
    }

    static get properties() {
      return {
      };
    }

    connectedCallback() {
      super.connectedCallback();
      this.addEventListener('iron-resize', this.onIronResize.bind(this));
    }

    onIronResize() {
      this.width = this.offsetWidth;
      this.height = this.offsetHeight;
      this.notifyResize();
    }



  }

  window.customElements.define('iron-resize-div', IronResizeDiv);

“严格使用”；
从“@polymer/polymer/polymer element.js”导入{html，polymerement}；
从“@polymer/polymer/lib/legacy/class.js”导入{mixinbehaviers}；
从“@polymer/iron resizeble behavior/iron resizeble behavior.js”导入{iron resizeblebhavior}；
/**
*@customElement
*@聚合物
*/
IronResizeDiv类扩展了MixinBehavior（[IronResizeableBehavior]，polymerement）{
静态获取模板（）{
返回html`
：主持人{
显示：块；
身高：100%；
宽度：100%；
}
将军{
宽度：98%；
身高：98%；
}
`;
}
静态获取属性（）{
返回{
};
}
connectedCallback（）{
super.connectedCallback（）；
this.addEventListener（'iron-resize'，this.onIronResize.bind（this））；
}
onIronResize（）{
this.width=this.offsetWidth；
this.height=this.offsetHeight；
this.notifyResize（）；
}
}
window.customElements.define（'iron-resize-div'，IronResizeDiv）；

垂直拆分顶部的内容现在可以正常工作。
我找到了解决方案。我在分割的顶部放置了一个瓦丁分割布局

    <vaadin-split-layout orientation="vertical" style="height: 100%;">
      <vaadin-split-layout orientation="horizontal" style="height: 50%; min-height: 100px;">
        <iron-resize-div id="sidebar" class="flex-vertical"v style="min-width: 85px; max-width: 85px;">
          <paper-icon-button style="width: 85px;" class="command" id="changeButton" title="Save changes" icon="save" disabled$="[[!changelog.length]]" on-tap="openSaveChanges"></paper-icon-button>
          <paper-icon-button style="width: 85px;" class="command" title="Harvest Data" src="images/app-icon-32.png" on-tap="openHarvestData"></paper-icon-button>
          <paper-icon-button style="width: 85px;" class="command" title="Monitor Harvests" icon="watch-later" on-tap="openMonitorHarvest"></paper-icon-button>
          <div style="width: 85px;" class="flexchild"></div>
          <div class="rootnode" style="width: 85px;">Root</div>
          <div class="dependentnode" style="width: 85px;">Dependent</div>
          <div class="referencenode" style="width: 85px;">Reference</div>
          <div class="unassignednode" style="width: 85px;">Unassigned</div>
        </iron-resize-div>
        <easymetahub-d3-graph graph="[[result]]" selected-node="{{entitydetail}}" selected-link="{{selectedLink}}" changelog="{{changelog}}" class="flex-vertical"></easymetahub-d3-graph>
      </vaadin-split-layout>


根
依赖的
参考文献
未分配

将以下内容作为iron resize div

  "use strict";
  import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
  import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
  import {IronResizableBehavior} from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';

  /**
   * @customElement
   * @polymer
   */
  class IronResizeDiv extends mixinBehaviors([IronResizableBehavior], PolymerElement) {

    static get template() {
      return html`
      <style>
        :host {
          display: block;
          height: 100%;
          width: 100%;
        }
        .general {
          width: 98%;
          height: 98%;
        }
      </style>
      <div class="general">
        <slot></slot>
      </div>
      `;
    }

    static get properties() {
      return {
      };
    }

    connectedCallback() {
      super.connectedCallback();
      this.addEventListener('iron-resize', this.onIronResize.bind(this));
    }

    onIronResize() {
      this.width = this.offsetWidth;
      this.height = this.offsetHeight;
      this.notifyResize();
    }



  }

  window.customElements.define('iron-resize-div', IronResizeDiv);

“严格使用”；
从“@polymer/polymer/polymer element.js”导入{html，polymerement}；
从“@polymer/polymer/lib/legacy/class.js”导入{mixinbehaviers}；
从“@polymer/iron resizeble behavior/iron resizeble behavior.js”导入{iron resizeblebhavior}；
/**
*@customElement
*@聚合物
*/
IronResizeDiv类扩展了MixinBehavior（[IronResizeableBehavior]，polymerement）{
静态获取模板（）{
返回html`
：主持人{
显示：块；
身高：100%；
宽度：100%；
}
将军{
宽度：98%；
身高：98%；
}
`;
}
静态获取属性（）{
返回{
};
}
connectedCallback（）{
super.connectedCallback（）；
this.addEventListener（'iron-resize'，this.onIronResize.bind（this））；
}
onIronResize（）{
this.width=this.offsetWidth；
this.height=this.offsetHeight；
this.notifyResize（）；
}
}
window.customElements.define（'iron-resize-div'，IronResizeDiv）；

垂直拆分顶部的内容现在可以像我所希望的那样工作。
您是否检查了此问题：？是否检查了此问题：？