src/app/admin/brand/brand.component.ts
| selector | stbui-brand |
| styleUrls | ./brand.component.scss |
| templateUrl | ./brand.component.html |
Methods |
Inputs |
constructor()
|
|
Defined in src/app/admin/brand/brand.component.ts:10
|
| brand | |
Type : string
|
|
Default value : 'Stbui'
|
|
|
Defined in src/app/admin/brand/brand.component.ts:9
|
|
| link | |
Type : any
|
|
Default value : ['/']
|
|
|
Defined in src/app/admin/brand/brand.component.ts:10
|
|
| ngOnInit |
ngOnInit()
|
|
Defined in src/app/admin/brand/brand.component.ts:14
|
|
Returns :
void
|
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'stbui-brand',
templateUrl: './brand.component.html',
styleUrls: ['./brand.component.scss']
})
export class BrandComponent implements OnInit {
@Input() brand: string = 'Stbui';
@Input() link: any = ['/'];
constructor() {}
ngOnInit() {}
}
<div class="brand">
<mat-icon>view_compact</mat-icon>
<a class="brand-logo" [routerLink]="link">{{ brand }}</a>
</div>
./brand.component.scss
:host {
display: block;
}
.brand {
position: relative;
width: 250px;
height: 64px;
padding: 0 16px;
display: flex;
align-items: center;
box-sizing: border-box;
&::before {
content: 'STBUI';
position: absolute;
right: 0;
bottom: 0;
color: rgba(255, 255, 255, 0.12);
font-size: 32px;
}
&-logo {
font-size: 24px;
font-weight: 500;
text-decoration: none;
margin-left: 24px;
color: #fff;
}
}