#GWC UI Library : TextInput

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

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

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

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

.center div {
    display: flex;
    align-items: center;
    gap: 0.2em;
}

gwc-textinput {
    width: 20em;
}

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

window.onload = () => {
    const onChange = (event) => {
        label.content = `${event.target.id}의 값: ${event.target.value}`;
    };

    textinput1.addEventListener("change", onChange);
    textinput2.addEventListener("change", onChange);
    textinput3.addEventListener("change", onChange);
    textinput4.addEventListener("change", onChange);

    button.addEventListener("click", () => {
        const v1 = textinput1.value;
        const v2 = textinput2.value;
        const v3 = textinput3.value;
        const v4 = textinput4.value;

        gwcMessage(`
            textinput1: ${v1}
textinput2: ${v2}
textinput3: ${v3}
textinput4: ${v4} `); }); };

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

답글 남기기

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