#GWC UI Library : RadioGroup

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

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

<gwc-label id="label" content="RadioGroup 상태 이벤트 정보" outline-type="concave"></gwc-label>

<div>

<gwc-label content="라디오 그룹1"></gwc-label>

<gwc-radiogroup id="radiogroup1" selected-index="2">

<items>

</items>

</gwc-radiogroup>

</div>

<div>

<gwc-label content="라디오 그룹2"></gwc-label>

<gwc-radiogroup id="radiogroup2" selected-index="3">

<items>

<item>HUMAN</item>

<item>IS DEFINED</item>

</items>

</gwc-radiogroup>

</div>

<gwc-button id="button" title="상태 확인">

</gwc-button></div>

<div class="center"> <gwc-label id="label" content="RadioGroup 상태 이벤트 정보" outline-type="concave"></gwc-label> <div> <gwc-label content="라디오 그룹1"></gwc-label> <gwc-radiogroup id="radiogroup1" selected-index="2"> <items> <item>인간은</item> <item>말이 아닌</item> <item>행위로</item> <item>정의된다.</item> </items> </gwc-radiogroup> </div> <div> <gwc-label content="라디오 그룹2"></gwc-label> <gwc-radiogroup id="radiogroup2" selected-index="3"> <items> <item>HUMAN</item> <item>IS DEFINED</item> <item>BY NOT WORD</item> <item>BUT ACT.</item> </items> </gwc-radiogroup> </div> <gwc-button id="button" title="상태 확인"> </gwc-button></div>


    
    
        
        
            
                인간은
                말이 아닌
                행위로
                정의된다.
            
        
    
    
        
        
            
                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;

}

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

.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 = `

<span style="color:yellow">${radioGroup.id}</span>의 선택은

"<span style="color:yellow">${radioGroup.selectedTitle}</span>"입니다.

};

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}<br>

radiogroup2: ${txtRadioGroup2}

`);

});

};

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}
        `);
    });
};

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

답글 남기기 응답 취소