Я использую следующий учебник: https://vaadin.com/components/vaadin-tabs/html-examples/tabs-advanced-demos
Вот мой пользовательский элемент:
<dom-module id="bps-devices-tabs-container">
<template>
<style>
.flex {
width: 100%;
height : 100%;
}
.device-container {
display: flex;
flex-direction: column;
}
.ip {
height : 70vh;
overflow: auto;
}
</style>
<div>
<vaadin-tabs id="tabs" selected={{deviceType}} attr-for-selected="name" role="navigation"></vaadin-tabs>
<div class="flex">
<iron-pages class="ip"
id="pages"
selected="[[deviceType]]"
attr-for-selected="name"
role="main">
</iron-pages>
</div>
</div>
</template>
<script>
class BpsDevicesTabsContainer extends Polymer.Element {
static get is() { return 'bps-devices-tabs-container'; }
static get properties() {
return {
deviceTitles : {
type : Array
},
deviceData : {
type : Array
},
deviceType: {
type: String
}
}
}
connectedCallback(){
super.connectedCallback();
this._renderTabs();
}
_renderTabs(){
console.log("render device tabs");
var tabs = this.$.tabs;
var pages = this.$.pages;
var i;
for(i = 0;i < this.deviceTitles.length;i++){
var name = this.deviceTitles[i].toUpperCase();
var tab = document.createElement('vaadin-tab');
Polymer.dom(tab).setAttribute('name', name);
Polymer.dom(tab).innerHTML = name;
var page = document.createElement('bps-device-container');
page.data = this.deviceData[i];
Polymer.dom(page).setAttribute('id', name + 'tab');
Polymer.dom(page).setAttribute('name',name);
Polymer.dom(page).setAttribute('class','device-container');
tabs.appendChild(tab);
pages.appendChild(page);
}
}
}
customElements.define(BpsDevicesTabsContainer.is, BpsDevicesTabsContainer);
</script>
</dom-module>
Я динамически добавляю вкладки vaadin и последующие железные страницы в свой пользовательский интерфейс.Я могу успешно визуализировать вкладки, но не могу отобразить мой пользовательский элемент bps-device-container.Вот мой элемент bps-device-container:
<dom-module id="bps-device-container">
<template>
<style></style>
<h1>Testing Device Container</h1>
</template>
<script>
class BpsDeviceContainer extends Polymer.Element {
static get is() { return 'bps-device-container'; }
static get properties() {
return {
data : {
type : Object
}
}
}
connectedCallback(){
super.connectedCallback();
console.log(this.data);
}
}
customElements.define(BpsDeviceContainer.is, BpsDeviceContainer);
</script>
</dom-module>
Используя инструменты разработчика Chrome, я получил следующее:
Почему высота по-прежнему равна 0, хотя я пытался изменить размеры в своих тегах стиля?Я пробовал разные вещи, но не могу показать страницы.