File
|
disabled
|
Type : boolean
|
Default value : false
|
|
|
|
label
|
Type : string
|
Default value : ''
|
|
|
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-nav-item',
templateUrl: './nav-item.component.html',
styleUrls: ['./nav-item.component.scss'],
})
export class NavItemComponent {
@Input() label = '';
@Input() disabled = false;
}
<div class="d-flex justify-content-center align-items-center flex-column nav-item px-2">
<ng-content></ng-content>
<span class="label m-0">{{ label }}</span>
</div>
.label {
padding-top: 10px;
font-size: 0.5625rem;
}
.nav-item {
// margin-top: 10px;
padding-top: 0.625rem;
cursor: pointer;
color: rgb(89, 89, 89);
transition: 0.2s all;
}
.nav-item:hover {
// background-color: #efefef;
color: black;
}
.nav-item:active {
// background-color: #d8d8d8;
}
Legend
Html element with directive