src/app/collapsing-menu-color-widget/collapsing-menu-color-widget.component.ts
| selector | app-collapsing-menu-color-widget |
| styleUrls | collapsing-menu-color-widget.component.css |
| templateUrl | ./collapsing-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-collapsing-menu-color-widget',
templateUrl: './collapsing-menu-color-widget.component.html',
styleUrls: ['./collapsing-menu-color-widget.component.css']
})
export class CollapsingMenuColorWidgetComponent implements OnInit {
@Input() myColor = 'white';
constructor() { }
ngOnInit() {
}
setColor(newColor: string) {
this.myColor = newColor;
}
}
<h2>Collapsing Menu</h2>
<p>
Here an auto collapsing menu is used. When the width
of the component isn't large enough to display all the
items inside the menu it collapses the items that don't
fit and puts them inside a dropdown menu right justified
inside the menu bar. The toggle appears and controls
showing / hiding the items that did not fit.
</p>
<p>
Here the toggle is set to show on hover. When the hovering
over the menu or the dropdown the menu will stay open. It
will automatically close when the mouse leaves the toggle
and the dropdown menu area. This behavior can be controlled
with the showOnHover input flag.
</p>
<p>
If the toggle is clicked once it will pin the menu open.
If it is clicked again it will close the menu. This behavior
can be controlled with the toggleOnClick input flag.
</p>
<div class="color-picker">
<div uat-collapsing-menu
#menu="uatCollapsingMenu"
[showOnHover]="true">
<div uat-menu-toggle>
<span *ngIf="!menu.isOpen" style="padding:15px">More...</span>
<span *ngIf="menu.isOpen" style="padding:15px">Less...</span>
</div>
<a uat-menu-item class="nav-link" (click)="setColor('white')">White</a>
<a uat-menu-item class="nav-link" (click)="setColor('black')">Black</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>
<a uat-menu-item class="nav-link" (click)="setColor('yellow')">Yellow</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>
<a uat-menu-item class="nav-link" (click)="setColor('cyan')">Cyan</a>
<a uat-menu-item class="nav-link" (click)="setColor('magenta')">Magenta</a>
</div>
<app-color-viewer
[viewedColor]="myColor">
</app-color-viewer>
</div>