InputColor 개요

InputColor 컨트롤을 사용하면 HTML-지원 색상 문자열을 입력하여 색상을 선택하거나, ColorPicker 컨트롤을 표시하는 드롭다운에서 색상을 선택할 수 있습니다. value 속성을 사용하여 현재 선택된 색상을 가져오거나 설정할 수 있습니다.

HTML

<h1>InputColor</h1>
<div id="output">
  Select a background for me!
</div>
<div id="theInputColor"></div>

Javascript

import * as input from '@grapecity/wijmo.input';

function init() {
    // InputColor
    let theInputColor = new input.InputColor('#theInputColor', {
        placeholder: 'Select the color',
        valueChanged: (sender) => setBackground(sender.value)
    });
    // show the color that was selected
    function setBackground(color) {
        document.getElementById('output').style.background = color;
    }
}

또한 색상 선택 드롭다운을 표시하는 colorPicker 속성을 사용하여 __InputColor__를 사용자 정의할 수 있습니다. 자세한 구현에 대해서는 LearnWijmo 샘플을 참고하시길 바랍니다.