#GWC UI Library : ColorPicker

웹 UI 라이브러리인 GWC에서 제공하는 ColorPicker에 대한 예제 코드입니다.

먼저 DOM 구성은 다음과 같습니다.

그리고 CSS 구성은 다음과 같구요.

.center {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 3em;
}

.vcenter {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

#rect {
    border: 1px solid black;
    width: 10em;
    height: 10em;
}

js 코드는 다음과 같습니다.

window.onload = () => {
    rect.style.backgroundColor = colorpicker.value;

    colorpicker.addEventListener("change", (event) => {
        rect.style.backgroundColor = event.target.value;
    });

    button1.addEventListener("click", () => {
        gwcMessage(`${colorpicker.value} or ${colorpicker.toRGB()}`);
    });

    button2.addEventListener("click", () => {
        colorpicker.fromRGB(255,255,0); // or colorpicker.value = "#ffff00";
    });
};

실행 결과는 다음과 같습니다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 항목은 *(으)로 표시합니다