웹 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;
});
};
실행 결과는 다음과 같습니다.