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
|
import { Component, OnInit } from '@angular/core';
export interface ISlide {
img?: string;
imgAlt?: string;
hText?: string;
hHtml?: string;
text?: string;
html?: string;
btn?: string;
btnHref?: string;
}
@Component({
selector: 'home',
moduleId: module.id,
template: `
<style>
.wide img {
width: 98%;
}
.carousel-item {
max-height: 90%;
}
h1, h2, h3, h4, p {
color: #330066;
}
.html-inner {
color: #330066;
}
h1 {
font-size: 4em;
}
p {
font-size: 2.5em;
}
</style>
<div class="wide">
<carousel [interval]="carInterval" [(activeSlide)]="activeSlideIndex">
<slide *ngFor="let sl of slides; let index=index">
<img [src]="sl.img" [alt]="sl.imgAlt">
<div class="carousel-caption">
<h1 *ngIf="sl.hText">{{ sl.hText }}</h1>
<h1 *ngIf="sl.hHtml" class="html-inner" [innerHtml]="sl.hHtml"></h1>
<p *ngIf="sl.text">{{ sl.text }}</p>
<div *ngIf="sl.html" class="html-inner" [innerHtml]="sl.html"></div>
</div>
</slide>
</carousel>
</div>
`
})
export class HomeComponent {
public carInterval: number = 4000;
// FIXME SEB - Add more slides and info
public slides: ISlide[] = [
{
img: 'assets/images/iot-graphx.jpg',
imgAlt: "iot graphx image",
hText: "Welcome to XDS Dashboard !",
text: "X(cross) Development System allows developers to easily cross-compile applications.",
},
{
img: 'assets/images/iot-graphx.jpg',
imgAlt: "iot graphx image",
hText: "Create, Build, Deploy, Enjoy !",
},
{
img: 'assets/images/iot-graphx.jpg',
imgAlt: "iot graphx image",
hHtml: '<p>To Start: click on <i class="fa fa-cog" style="color:#9d9d9d;"></i> icon and add new folder</p>',
}
];
constructor() { }
}
|
