색상입력

InputColor 개요

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

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

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을 사용자 지정할 수 있습니다. 자세한 구현은 샘플을 참조하시길 바랍니다.