Skip to content

Instantly share code, notes, and snippets.

@t301000 t301000/app.component.css
Last active Jun 4, 2017

Embed
What would you like to do?
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
You can’t perform that action at this time.