웹 UI 라이브러리인 GWC에서 제공하는 Accordion 컴포넌트에 대한 예제 코드입니다.
먼저 DOM 구성은 다음과 같습니다.
<div class="center"> <gwc-label id="label" content="Accordion 이벤트"></gwc-label> <gwc-accordion id="accordion"> <parts> <part title="툴버튼" count=32 icon="./images/icon1.png" open=true> <div class="part1"> <gwc-toolbutton icon="images/icon2.png"></gwc-toolbutton> <gwc-toolbutton icon="images/icon3.png"></gwc-toolbutton> <gwc-toolbutton icon="images/icon1.png"></gwc-toolbutton> </div> </part> <part title="메세지" count=0> <div class="part2"> <div class="part2-sub"> <gwc-checkbox title="사과"></gwc-checkbox> <gwc-checkbox title="토마토"></gwc-checkbox> <gwc-checkbox title="귤"></gwc-checkbox> <gwc-checkbox title="당근"></gwc-checkbox> <gwc-checkbox title="바나나"></gwc-checkbox> </div> <gwc-slider label="볼륨" unit="dB" to-fixed=1 min=0 max=100 value=45></gwc-slider> </div> </part> <part title="설정" icon="./images/icon2.png"> <div class="part3"> <gwc-radiogroup> <items> <item>CSS</item> <item>JS</item> <item>HTML</item> </items> </gwc-radiogroup> <div> <gwc-label content="진행율" outline-type="concave"></gwc-label> <gwc-progress auto="true"></gwc-progress> </div> </div> </part> </parts> </gwc-accordion> <gwc-button id="button" title="2번째 열기/닫기"></gwc-button> </div>
그리고 CSS 구성은 다음과 같구요.
.center { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; flex-direction: column; gap: 1em; } .part1 { display: flex; width: 100%; height: 8em; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1em; } .part2 { display: flex; width: 100%; height: 13em; justify-content: center; align-items: center; flex-wrap: wrap; flex-direction: column; gap: 1em; } .part2-sub { display: flex; width: 100%; height: 7em; justify-content: center; align-items: center; flex-wrap: wrap; _gap: 1em; } .part3 { display: flex; width: 100%; height: 8em; justify-content: center; align-items: center; flex-wrap: wrap; _gap: 1em; } .vcenter { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; flex-direction: column; gap: 1em; } #accordion { width: 20em; } gwc-vscrollview { width: 90%; height: 90%; } p:nth-child(2n) { color: greenyellow; font-size: 0.9em; } p:nth-child(2n+1) { color: yellow; } gwc-progress { width: 9em }
js 코드는 다음과 같습니다.
window.onload = () => { setInterval(() => { const count = accordion.getCount(2); accordion.setCount(2, count+1); }, 100); button.onclick = () => { if(accordion.isClosed(2)) accordion.open(2); else accordion.close(2); } accordion.addEventListener("change", (event) => { label.content = `${event.detail.partIndex}번째가 ${event.detail.state === "opened" ? "열렸습니다." : "닫혔습니다."}`; }); GeoServiceWebComponentManager.instance.update(); };
실행 결과는 다음과 같습니다.