Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-17 16:00:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add "material theme link" component

Browse source
This commit is contained in:
eugene-sinitsyn 2020-03-12 13:31:36 +03:00
parent 9aa4b9c53f
commit ea600e94c7
18 changed files with 135 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

15
docs/app/shared/components/material-theme-link/material-theme-link.component.html Normal file
View file

@ -0,0 +1,15 @@
<a
routerLink="/material"
class="eva-parent-hover"
[nbPopover]="popoverContent"
nbPopoverPlacement="bottom"
nbPopoverTrigger="noop"
>
<i [innerHTML]="'color-palette-outline' | eva: { width: 24, height: 24, fill: '#ff4d6b', animationType: 'shake' }"
></i>
Material Theme
</a>
<ng-template #popoverContent>
<p class="material-theme-popover" (mouseover)="hidePopover()">New theme is available!</p>
</ng-template>

22
docs/app/shared/components/material-theme-link/material-theme-link.component.scss Normal file
View file

@ -0,0 +1,22 @@
:host {
display: flex;
align-items: center;
padding-right: 32px;
}
a {
display: flex;
align-items: center;
}
i {
margin-right: 8px;
}
.material-theme-popover {
margin: 0;
padding: 1rem 2rem;
color: #ff4d6b;
font-weight: 600;
font-size: 1.1rem;
}

26
docs/app/shared/components/material-theme-link/material-theme-link.component.ts Normal file
View file

@ -0,0 +1,26 @@
import { Component, ViewChild, AfterViewInit, Input } from '@angular/core';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { NbPopoverDirective } from '@nebular/theme';
@Component({
selector: 'ngx-material-theme-link',
templateUrl: './material-theme-link.component.html',
styleUrls: ['./material-theme-link.component.scss'],
})
export class MaterialThemeLinkComponent implements AfterViewInit {
public showPopover: boolean = false;
@Input() public set withPopover(value: any) {
this.showPopover = coerceBooleanProperty(value);
}
@ViewChild(NbPopoverDirective, { static: true }) public popover: NbPopoverDirective;
public ngAfterViewInit(): void {
this.showPopover && this.popover && this.popover.show();
}
public hidePopover(): void {
this.popover && this.popover.hide();
}
}