File
Metadata
| selector |
cmn-dropdown |
| styleUrls |
./dropdown.component.scss |
| templateUrl |
./dropdown.component.html |
import { Component, Input } from '@angular/core';
@Component({
selector: 'cmn-dropdown',
templateUrl: './dropdown.component.html',
styleUrls: [ './dropdown.component.scss' ],
})
export class DropdownComponent {
@Input() public readonly label: string;
@Input() public readonly hasBorder: boolean;
public hasHover: boolean;
}
<div class="dropdown"
[class.is-active]="hasHover"
(mouseout)="hasHover = false"
(mouseover)="hasHover = true">
<div class="dropdown-trigger">
<button class="button"
aria-haspopup="true"
aria-controls="dropdown-menu">
<span>{{ label }}</span>
<span class="icon is-small">
<i class="fas fa-caret-down"></i>
</span>
</button>
</div>
<div class="dropdown-menu is-borderless"
id="dropdown-menu"
role="menu">
<div class="dropdown-content">
<ng-content></ng-content>
</div>
</div>
</div>
@import "../../../../assets/styles/settings/_colors";
:host {
a {
.dropdown-item,
button.dropdown-item {
&:hover {
background-color: $turquoise;
}
}
}
}
Legend
Html element with directive