mirror of
https://github.com/KevinMidboe/linguist.git
synced 2025-10-29 09:40:21 +00:00
committed by
Colin Seymour
parent
053b8bca97
commit
3bbfc907f3
36
samples/Marko/rgb-sliders.marko
Normal file
36
samples/Marko/rgb-sliders.marko
Normal file
@@ -0,0 +1,36 @@
|
||||
static const colors = ['red', 'green', 'blue'];
|
||||
static const defaultColor = [255, 0, 0];
|
||||
|
||||
class {
|
||||
onInput(input) {
|
||||
this.state = { color: input.color || defaultColor };
|
||||
}
|
||||
|
||||
updateColor() {
|
||||
this.state.color = colors.map((color) => {
|
||||
return parseInt(this.getEl(color + 'Input').value, 10);
|
||||
});
|
||||
}
|
||||
|
||||
getStyleColor() {
|
||||
return 'rgb(' + this.state.color.join(',') + ')';
|
||||
}
|
||||
}
|
||||
|
||||
<div.rgb-sliders>
|
||||
<div.inputs>
|
||||
<for(i, color in colors)>
|
||||
<div>
|
||||
<label for-key=color+"Input">
|
||||
${color}:
|
||||
</label>
|
||||
<input type="range" max="255"
|
||||
key=color+"Input"
|
||||
on-input('updateColor')
|
||||
value=state.color[i] >
|
||||
</div>
|
||||
</for>
|
||||
</div>
|
||||
<div.color style={backgroundColor: component.getStyleColor()}>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user