ColorPicker 개요
ColorPicker 컨트롤을 통해, 패널을 클릭하여 색상, 채도, 밝기 및 알파와 같은 채널을 조정할 수 있습니다. 이 컨트롤은 InputColor 컨트롤의 드롭다운으로 사용할 수 있습니다. value 속성을 사용하여 현재 선택한 색상을 가져오거나 설정할 수 있습니다.
HTML
<h1>ColorPicker</h1>
<div id="output">
Select a background for me!
</div>
<div id="theColorPicker"></div> CSS
h1{
margin: 10px;
}
.wj-colorpicker {
margin: 10px;
}
#output {
margin: 10px;
float: left;
font-size: 12px;
border: 1px solid grey;
padding: 12px;
}Javascript
import * as input from '@mescius/wijmo.input';
function init() {
// ColorPicker
let theColorPicker = new input.ColorPicker('#theColorPicker', {
showAlphaChannel: true,
showColorString: true,
valueChanged: (sender) => setBackground(sender.value)
});
// show the color that was selected
function setBackground(color) {
document.getElementById('output').style.background = color;
theColorPicker.value = color;
}
}또한 showAlphaChannel, showColorString 및 palette 속성 값을 변경하여 ColorPicker를 사용자 정의할 수 있습니다. 자세한 구현은 ColorPicker 데모를 참고하시길 바랍니다.