File
Implements
Metadata
selector |
app-ide-compile |
styleUrls |
./ide-compile.component.scss |
templateUrl |
./ide-compile.component.html |
Index
Properties
|
|
Methods
|
|
Inputs
|
|
Accessors
|
|
isActive
|
Default value : false
|
|
Accessors
status
|
setstatus(value: string)
|
|
Parameters :
Name |
Type |
Optional |
value |
string
|
No
|
|
import {Component, Input, OnInit} from '@angular/core';
@Component({
selector: 'app-ide-compile',
templateUrl: './ide-compile.component.html',
styleUrls: ['./ide-compile.component.scss']
})
export class IdeCompileComponent implements OnInit {
@Input() statusVal: string;
isActive = false;
constructor() {
}
set status(value: string) {
this.statusVal = value;
}
ngOnInit(): void {
}
setState(inp: boolean): void {
this.isActive = inp;
}
}
<div [class.open]="isActive" id="compile-cover"></div>
<div [class.open]="isActive" id="compile-popup">
<p [innerHTML]="statusVal" id="compile-status"></p>
<button (click)="setState(false)" id="compile-done">Done
</button>
</div>
#compile-popup {
position: fixed;
top: 50%;
width: 30vw;
left: calc(35vw - 20px);
border-bottom: 1px solid #ddf;
padding: 20px;
background: #224;
transform: translateY(-50%) scale(0);
opacity: 0;
transition: all 0.25s;
z-index: 1000;
p {
max-height: 70vh;
overflow: auto;
}
&.open {
transform: translateY(-50%) scale(1);
opacity: 1;
}
}
#compile-done {
float: right;
}
#compile-cover {
z-index: 999;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: none;
&.open {
display: block;
}
}
Legend
Html element with directive