20170531 作業實做參考
.main { | |
width: 100%; | |
height: 200px; | |
border: 1px solid gray; | |
margin-bottom: 20px; | |
} |
<div [style.background-color]="defaultColor" class="main"></div> | |
<div> | |
<app-color-plate | |
*ngFor="let color of colors" | |
[default]="color" (picked)="defaultColor=$event"></app-color-plate> | |
</div> |
import { Component } from '@angular/core'; | |
@Component({ | |
selector: 'app-root', | |
templateUrl: './app.component.html', | |
styleUrls: ['./app.component.css'], | |
}) | |
export class AppComponent { | |
defaultColor = 'rgb(0, 0, 255)'; | |
colors = [ | |
[255, 255, 255], // 白 | |
[0, 0, 0], // 黑 | |
[255, 0, 0], // 紅 | |
[0, 255, 0], // 綠 | |
[0, 0, 255] // 藍 | |
]; | |
} |
:host { | |
display: inline-block; | |
margin-right: 10px; | |
vertical-align: top; | |
} | |
.color { | |
width: 100px; | |
height: 100px; | |
border: 1px solid gray; | |
margin-bottom: 10px; | |
} | |
.tweak { | |
width: 102px; | |
} | |
.tweak > input { | |
width: 60%; | |
} |
<div class="color" | |
[ngStyle]="{'background-color': myStyle}" | |
(click)="picked.emit(myStyle)"></div> | |
<div *ngIf="show; else edit" class="tweak"> | |
<input type="range" min="0" max="255" [(ngModel)]="r"> | |
<span style="color: red">{{ r }}</span><br /> | |
<input type="range" min="0" max="255" [(ngModel)]="g"> | |
<span style="color: green">{{ g }}</span><br /> | |
<input type="range" min="0" max="255" [(ngModel)]="b"> | |
<span style="color: blue">{{ b }}</span><br /> | |
<button (click)="show = false">Close</button> | |
</div> | |
<ng-template #edit> | |
<button (click)="show = true">Edit</button> | |
</ng-template> |
import { Component, EventEmitter, Input, Output } from '@angular/core'; | |
@Component({ | |
selector: 'app-color-plate', | |
templateUrl: './color-plate.component.html', | |
styleUrls: ['./color-plate.component.css'] | |
}) | |
export class ColorPlateComponent { | |
show = false; // 是否顯示顏色調整拉桿 | |
r = 100; | |
g = 100; | |
b = 100; | |
// Input and setter | |
@Input() set default(color: number[]) { | |
this.r = color[0]; | |
this.g = color[1]; | |
this.b = color[2]; | |
} | |
@Output() picked = new EventEmitter<string>(); | |
// This is getter | |
get myStyle(): string { | |
// 回傳字串,如 rgb(100, 200, 250) | |
return `rgb(${this.r}, ${this.g}, ${this.b})`; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment