GWC UI Library – 페이지 10

2022-01-082022-01-12

#GWC UI Library : RadioGroup

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

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


    
    
        
        
            
                인간은
                말이 아닌
                행위로
                정의된다.
            
        
    
    
        
        
            
                HUMAN
                IS DEFINED
                BY NOT WORD
                BUT ACT.

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

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

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

window.onload = () => {
    const onChange = (event) => {
        const radioGroup = event.target;
        label.content = `
             ${radioGroup.id}의 선택은 
             "${radioGroup.selectedTitle}"입니다.
        `;
     };

    radiogroup1.addEventListener("change", onChange);
    radiogroup2.addEventListener("change", onChange);

    button.addEventListener("click", () => {
        const txtRadioGroup1 = `${radiogroup1.selectedTitle}(${radiogroup1.selectedIndex})`;
        const txtRadioGroup2 = `${radiogroup2.selectedTitle}(${radiogroup2.selectedIndex})`;

        gwcMessage(`
            radiogroup1: ${txtRadioGroup1}

            radiogroup2: ${txtRadioGroup2}
        `);
    });
};

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

2022-01-082022-09-05

#GWC UI Library : CheckBox

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

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

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

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

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

window.onload = () => {
    const onChange = (event) => {
        const checkbox = event.target;
        label.content = `
            ${checkbox.id} 상태가 
            ${checkbox.checked}로 변경되었습니다.`;
    };

    checkbox1.addEventListener("change", onChange);
    checkbox2.addEventListener("change", onChange);
    checkbox3.addEventListener("change", onChange);
    checkbox4.addEventListener("change", onChange);

    button.addEventListener("click", () => {
        const bChecked1 = checkbox1.checked;
        const bChecked2 = checkbox2.checked;
        const bChecked3 = checkbox3.checked;
        const bChecked4 = checkbox4.checked;

        const txtChecked = "CHECK";
        const txtNotChecked = "NOT CHECK";

        gwcMessage(`
            checkbox1: ${bChecked1?txtChecked:txtNotChecked}

            checkbox2: ${bChecked2?txtChecked:txtNotChecked}

            checkbox3: ${bChecked3?txtChecked:txtNotChecked}

            checkbox4: ${bChecked4?txtChecked:txtNotChecked}
        `);
    });
};

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

2022-01-072022-01-12

#GWC UI Library : Switch

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

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

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

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

#switch1 {
    margin-right: 5em;
}

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

window.onload = () => {
    const switch1 = document.querySelector("#switch1");
    switch1.addEventListener("change", (event) => {
        if(event.target.on) {
            switch1.label = "맑은 날~";
        } else {
            switch1.label = "비가 오나요?";
        }
    });

    const switch2 = document.querySelector("#switch2");

    document.querySelector("#button1").addEventListener("click", () => {
        alert(`switch1: ${switch1.on} / switch2: ${switch2.on}`);
    });

    document.querySelector("#button2").addEventListener("click", () => {
        switch1.on = !switch1.on;
    });

    document.querySelector("#button3").addEventListener("click", () => {
        switch2.disabled =  !switch2.disabled;
    });
};

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

2022-01-072022-01-12

#GWC UI Library : Button

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

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

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

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

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

window.onload = () => {
    const button1 = document.querySelector("#button1");
    button1.addEventListener("click", () => { 
        alert("안녕하세요~! GWC 라이브러리입니다.") 
    });

    const button2 = document.querySelector("#button2");
    button2.addEventListener("click", () => {
        if(button2.title === "버튼2") button2.title = "Button2";
        else button2.title = "버튼2";
    });

    const button4 = document.querySelector("#button4");
    button4.addEventListener("click", () => {
        alert("버튼4를 클릭했습니다.");
    });

    const button3 = document.querySelector("#button3");
    button3.addEventListener("click", () => {
        button4.disabled = !button4.disabled;
    });
};

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