我正在使用vaadin-split-layout
元素垂直拆分屏幕。
我将以下内容作为应用程序样式的一部分。
.flex-horizontal {
@apply(--layout-horizontal);
}
.flex-vertical {
@apply(--layout-vertical);
}
.flexchild {
@apply(--layout-flex);
}
以下是vaadin-split-layout
。 easymetahub-d3-graph支持IronResizeableBehavior
。我需要ID为thetop
和d3graphcontainer
的元素来响应铁调整大小行为,以便easymetahub-d3-graph
响应vaadin-split-layout
中的铁调整大小。
<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>
我想念什么?
答案 0 :(得分:0)
我找到了解决方案。我在拆分的顶部放置了vaadin-split-layout。
<div class="col-md-4">
<ng-container *ngFor="let item of assetFormatOptions | wfsort">
<ng-container *ngIf="!item['isHidden']">
<div class="form-group form-group--inline">
<label class="radio">
<!--Created variable called assetFormat for validation purposes-->
<input type="radio" #assetFormat="ngModel" name="DE:Asset Format" value="{{item.value}}" ngModel required>
<span class="radio__input"></span>
<span class="radio__label hidden-xs">{{item.label}}</span>
</label>
</div>
</ng-container>
</ng-container>
<!--trying to access variable above-->
<div *ngIf="submitted && assetFormat.errors && (assetFormat.touched || submitted && !assetFormat.valid)" class="alert alert--danger">
<span class="error">This field is required.
<span class="icon-chevron-up"></span>
</span>
</div>
</div>
以下内容为iron-resize-div
<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>
垂直拆分顶部的内容现在可以像我想要的那样工作。