gwc-resizable-panel + gwc-vscrollview 를 이용해 사이드 패널 구성

크기 조절이 가능한 gwc-resizable-panel 태그를 이용한 사이드 패널을 구성하면 이 패널 안에 내용이 많아 수직으로 스크롤해야 할 경우 gwc-vscrollview 태그를 자식으로 두는 경우에 대한 코드를 정리합니다.

위의 화면 중 노란색 영역이 gwc-resizable-panel이고 초록 영역이 자식인 gwc-vscrollview 입니다.

사이드 패널에 대한 JS 코드는 다음과 같습니다.

class SearchResultUI {
    constructor() {
        const domLayout = document.createElement("div");
        domLayout.classList.add("search-result-ui");

        domLayout.innerHTML = `
            
                
0
0
0
`; document.body.appendChild(domLayout); GeoServiceWebComponentManager.instance.update(); } }

7번의 gwc-resizable-panel의 resizable-left와 min-width는 각각 패널의 왼쪽 모서리를 이용해 크기를 조절할 수 있고, 패널의 가로 크기는 최소 200px를 유지해야 한다는 것입니다. min-width 값의 단위는 px이며 값을 지정할 때는 단위를 지정하지 않습니다./p>

해당되는 CSS는 다음과 같습니다.


.search-result-ui > gwc-resizable-panel {
    box-shadow:  0 0 2px rgb(0 0 0 / 50%), 0 0 10px rgb(0 0 0 / 50%);;
    left: calc(100% - 20em); /* width 값만큼 빼줘야 함 */
    right: 0;
    top: 3em;
    width: 20em;
    height: calc(100vh - 3em); /* 패널 위에 공간이 3em 임 */
    _opacity: 0.8;
}

.search-result-ui > gwc-resizable-panel > .search-result-header {
    height: 2.6em;
    ...
}

...

.search-result-ui > gwc-resizable-panel gwc-vscrollview {
    width: 100%;
    background: rgba(20,20,20,1);
    height: calc(100% - 2.6em); /* 스크롤 영역 위의 공간이 2.6em 임 */
}

.search-result-ui > gwc-resizable-panel .search-result-content {
    padding: 0.4em;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.2em;
}

아래의 영상은 위의 UI가 반영된 실제 구동 영상입니다. 패널에 대한 크기 조절 등의 사용자 인터렉션을 파악할 수 있습니다.

답글 남기기

이메일 주소는 공개되지 않습니다.