src/app/dropdown-menu-color-widget/dropdown-menu-color-widget.component.ts
| selector | app-dropdown-menu-color-widget |
| styleUrls | dropdown-menu-color-widget.component.css |
| templateUrl | ./dropdown-menu-color-widget.component.html |
Methods |
Inputs |
constructor()
|
myColor
|
Default value: |
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| setColor | ||||||||
setColor(newColor: string)
|
||||||||
|
Parameters :
Returns :
void
|
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-dropdown-menu-color-widget',
templateUrl: './dropdown-menu-color-widget.component.html',
styleUrls: ['./dropdown-menu-color-widget.component.css']
})
export class DropdownMenuColorWidgetComponent implements OnInit {
@Input() myColor = 'white';
constructor() { }
ngOnInit() {
}
setColor(newColor: string) {
this.myColor = newColor;
}
}
<h2>Dropdown Menus</h2>
<p>
Simple dropdown menus that project arbitrary content
the same as the hamburger menu and the collapsing menu.
</p>
<p>
These can also be controlled with the showOnHover and
toggleOnClick input flags. Here both are set to true.
</p>
<div class="color-picker">
<div class="quick-menu">
<div uat-dropdown-menu
#ddmenu1="uatDropdownMenu"
[showOnHover]="true">
<a uat-menu-toggle class="nav-link">Primary</a>
<a uat-menu-item class="nav-link" (click)="setColor('red')">Red</a>
<a uat-menu-item class="nav-link" (click)="setColor('green')">Green</a>
<a uat-menu-item class="nav-link" (click)="setColor('blue')">Blue</a>
</div>
<div uat-dropdown-menu
#ddmenu2="uatDropdownMenu"
[showOnHover]="true">
<a uat-menu-toggle class="nav-link">CMYK</a>
<a uat-menu-item class="nav-link" (click)="setColor('cyan')">Cyan</a>
<a uat-menu-item class="nav-link" (click)="setColor('magenta')">Magenta</a>
<a uat-menu-item class="nav-link" (click)="setColor('yellow')">Yellow</a>
<a uat-menu-item class="nav-link" (click)="setColor('black')">Black</a>
</div>
<div uat-dropdown-menu
#ddmenu3="uatDropdownMenu"
[showOnHover]="true">
<a uat-menu-toggle class="nav-link">Other</a>
<a uat-menu-item class="nav-link" (click)="setColor('white')">White</a>
<a uat-menu-item class="nav-link" (click)="setColor('orange')">Orange</a>
<a uat-menu-item class="nav-link" (click)="setColor('purple')">Purple</a>
<a uat-menu-item class="nav-link" (click)="setColor('pink')">Pink</a>
</div>
</div>
<app-color-viewer
[viewedColor]="myColor">
</app-color-viewer>
</div>