#GWC UI Library : ToolButton

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

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

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

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

.center > div {
    display: flex;
    gap: 1em;
}

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

window.onload = () => {
    toolbutton1.addEventListener("click", () => { 
        gwcMessage("안녕하세요! GWC 라이브러리입니다.");
    });

    toolbutton2.addEventListener("statechange", (event) => {
        const tb = event.target;
        label.content = `${tb.id}가 ${tb.pressed?"DOWN":"UP"}된 상태입니다.`;
    });

    toolbutton2.addEventListener("click", () => {
        toolbutton2.pressed = !toolbutton2.pressed;
    });

    toolbutton3.addEventListener("click", () => {
        toolbutton3.disabled = true;
    });
};

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

title 속성으로 간단한 툴팁을 표현할 수 있습니다.