File
Implements
Metadata
| selector |
cmn-avatar |
| styleUrls |
./avatar.component.scss |
| templateUrl |
./avatar.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
|
isCircle
|
Type : boolean
|
Default value : true
|
|
|
|
size
|
Type : Sizes
|
Default value : sizeEnum.medium
|
|
|
Methods
|
Public
ngOnInit
|
ngOnInit()
|
|
|
|
|
|
Private
getInitialUpperCase
|
Default value : () => {...}
|
|
|
|
Private
getTwoFirstLetters
|
Default value : () => {...}
|
|
|
import {Component, Input, OnInit} from '@angular/core';
import { IBadge } from '../../badge/interfaces';
import {sizeEnum, Sizes} from '../../../shared/enums';
@Component ({
selector: 'cmn-avatar',
templateUrl: './avatar.component.html',
styleUrls: [ './avatar.component.scss' ],
})
export class AvatarComponent implements OnInit {
@Input() public text: string;
@Input() public badge: IBadge;
@Input() public readonly image: string;
@Input() public readonly isCircle: boolean = true;
@Input() public readonly size: Sizes = sizeEnum.medium;
public ngOnInit(): void {
if (!this.image && this.text) {
const textArray: string[] = this.text.split(' ');
this.text = textArray.length > 1 ?
this.getInitialUpperCase(textArray) :
this.getTwoFirstLetters(this.text);
}
}
private getInitialUpperCase = (textArray: string[]): string => {
return textArray[0][0].toUpperCase() +
textArray[1][0].toUpperCase();
}
private getTwoFirstLetters = (text: string): string => {
return text[0].toUpperCase() +
text[1].toLowerCase();
}
}
<div class="avatar has-background-grey-light has-text-centered {{ size }}"
[cmnBadge]="badge?.label"
[color]="badge?.color"
[class.is-circle]="isCircle"
[class.has-image]="image">
<ng-container
*ngIf="image; then showImage; else showText">
</ng-container>
<ng-template #showImage>
<img [src]="image">
</ng-template>
<ng-template #showText>
{{ text }}
</ng-template>
</div>
$small: 40px;
$medium: 64px;
$large: 80px;
:host {
.avatar, img {
color: azure;
border-radius: 8px;
&[data-badge] {
&::after {
transform: translate(0%, 0%);
}
}
&:not(.has-image) {
&.is-small {
padding: 12px 0;
font-size: 10px;
}
&.is-medium {
padding: 15.5px 0;
font-size: 20px;
}
&.is-large {
padding: 17px 0;
font-size: 30px;
}
}
&.is-small, &.is-small>img {
width: $small;
height: $small;
}
&.is-medium,
&.is-medium>img {
width: $medium;
height: $medium;
}
&.is-large,
&.is-large>img {
width: $large;
height: $large;
}
&.is-circle,
&.is-circle>img {
border-radius: 50px;
}
}
}
Legend
Html element with directive