Teddy7
(Teddy Nyambe)
July 19, 2019, 12:55pm
1
I am trying to implement the AppLayout in html and implement and connect it to the Java companion file. I have started
Home
Cargo
Process
The problem I have is the is not available in my pallete and also if i type it in in the code view its not being rendered in the view port.
Any ideas?
Teddy L.
Teddy7
(Teddy Nyambe)
July 19, 2019, 1:53pm
2
Teddy Nyambe:
I am trying to implement the AppLayout in html and implement and connect it to the Java companion file. I have started
Home
Cargo
Process
The problem I have is the is not available in my pallete and also if i type it in in the code view its not being rendered in the view port.
Any ideas?
Teddy L.
Resolved, was using the old version of AppLayout 1.0.1 that comes by defualt with Vaadin Flow 13. I added a separate dependency in my pom for newer version 2.0.1 as follows:
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-app-layout-flow</artifactId>
<version>2.0.1</version>
</dependency>
Thanks
Teddy7
(Teddy Nyambe)
July 19, 2019, 1:55pm
3
Another problem. I have the following declaration for my appLayout:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/vaadin-app-layout/src/vaadin-app-layout.html">
<link rel="import" href="../bower_components/vaadin-tabs/src/vaadin-tabs.html">
<link rel="import" href="../bower_components/vaadin-tabs/src/vaadin-tab.html">
<link rel="import" href="../bower_components/vaadin-app-layout/src/vaadin-drawer-toggle.html">
<dom-module id="main-layout">
<template>
<style include="lumo-typography lumo-color">
:host {
display: block;
}
</style>
<vaadin-app-layout>
<vaadin-drawer-toggle slot="navbar"></vaadin-drawer-toggle>
<img src="../img/GPpnszs.png" alt="Vaadin Logo" width="100" height="31" slot="navbar" referrerpolicy="no-referrer">
<vaadin-tabs orientation="vertical" style="margin: 0 auto; flex:1;" theme="minimal" slot="drawer">
<vaadin-tab>
Home
</vaadin-tab>
<vaadin-tab>
Cargo
</vaadin-tab>
<vaadin-tab>
Process
</vaadin-tab>
</vaadin-tabs>
</vaadin-app-layout>
<div class="content" style="width: 100%; height: 100%;">
<h3>Page Title</h3>
<p>Page Content</p>
</div>
</template>
<script>
class MainLayout extends Polymer.Element {
static get is() {
return 'main-layout';
}
static get properties() {
return {
// Declare your properties here.
};
}
}
customElements.define(MainLayout.is, MainLayout);
</script>
</dom-module>
My drawer comes by default hidden, how do I make it open when page loads and be side by side with my content DIV? Do i need to stype it or what?