-
Notifications
You must be signed in to change notification settings - Fork 248
/
app-index.ts
92 lines (76 loc) · 1.78 KB
/
app-index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import { LitElement, css, html } from 'lit';
import { customElement } from 'lit/decorators';
import './app-home';
import { Router } from '@vaadin/router';
import '../components/header';
@customElement('app-index')
export class AppIndex extends LitElement {
static get styles() {
return css`
main {
padding: 16px;
}
#routerOutlet > * {
width: 100% !important;
}
#routerOutlet > .leaving {
animation: 160ms fadeOut ease-in-out;
}
#routerOutlet > .entering {
animation: 160ms fadeIn linear;
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes fadeIn {
from {
opacity: 0.2;
}
to {
opacity: 1;
}
}
`;
}
constructor() {
super();
}
firstUpdated() {
// this method is a lifecycle even in lit
// for more info check out the lit docs https://lit.dev/docs/components/lifecycle/
// For more info on using the @vaadin/router check here https://vaadin.com/router
const router = new Router(this.shadowRoot?.querySelector('#routerOutlet'));
router.setRoutes([
// temporarily cast to any because of a Type bug with the router
{
path: '',
animate: true,
children: [
{ path: '/', component: 'app-home' },
{
path: '/about',
component: 'app-about',
action: async () => {
await import('./app-about.js');
},
},
],
} as any,
]);
}
render() {
return html`
<div>
<app-header></app-header>
<main>
<div id="routerOutlet"></div>
</main>
</div>
`;
}
}