VRIX

한국어

English

한국어

English

Appearance

Popup ​

개요 ​

Popup 컴포넌트는 화면의 지정된 위치에 콘텐츠를 동적으로 표시하는 컴포넌트입니다. 지정된 타겟 위치에 모달, 툴팁, 드롭다운 메뉴 등의 다양한 팝업 형태로 콘텐츠를 생성하고 표시하는 데 사용됩니다.

주요 기능 ​

1. 지정 엘리먼트에서 팝업 표시 ​

특정 DOM 요소를 기준으로 팝업을 표시할 수 있습니다. 앵커 요소의 위치와 크기를 활용하여 팝업의 위치를 결정할 수 있습니다.

관련 항목 보기

2. 모달 ​

배경을 흐리게 처리하여 팝업을 강조하고, 사용자 인터렉션을 제한하는 모달 형태로 팝업을 표시할 수 있습니다. 모달은 중요한 정보를 전달하거나 사용자 입력을 받아야 하는 경우에 유용합니다.

관련 항목 보기

3. 이벤트 기반 팝업 표시 ​

특정 DOM 요소에 마우스 오버, 클릭등의 이벤트가 발생했을 때 팝업을 표시할 수 있습니다. 이벤트 종류와 팝업 표시 여부를 설정하여 툴팁등 다양한 상황에 대응할 수 있습니다.

관련 항목 보기

4. 팝업 정렬 ​

팝업 컴포넌트는 9가지 콘텐츠 정렬 옵션(Content Align)과 9가지 앵커 정렬 옵션(Anchor Align)을 제공합니다. 이 두 가지 정렬 옵션을 조합하여 사용자는 원하는 대로 팝업의 위치를 세밀하게 조정할 수 있습니다.

  • 앵커 정렬(Anchor Align)

    팝업이 화면의 특정 요소를 기준으로 어느 위치에 나타날지를 결정합니다. 예를 들어, 기준 요소의 좌상단, 중앙, 우하단 등 9가지 위치에 팝업을 배치할 수 있습니다. 이는 팝업의 '외부' 위치를 설정하는 것으로, 팝업 전체가 기준 요소에 대해 어떻게 정렬될지를 정의합니다.

  • 콘텐츠 정렬(Content Align)

    팝업 내부의 콘텐츠가 팝업 영역 내에서 어느 위치에 정렬될지를 결정합니다. 예를 들어, 콘텐츠를 팝업 영역의 좌상단, 중앙, 우하단 등 9가지 위치에 정렬할 수 있습니다. 이는 팝업의 '내부' 레이아웃을 설정하는 것으로, 팝업 창 안에서 콘텐츠가 어떻게 배치될지를 정의합니다.

관련 항목 보기
Anchor Align
center center
Content Align
center center

5. 팝업 배치 지정 방식 ​

팝업 컴포넌트는 팝업 기준점 배치를 유연하게 설정하여 다양한 종류와 목적에 맞춰 최적의 위치에 팝업을 표시할 수 있습니다. 팝업 위치 설정 방식은 크게 두 가지로 나뉩니다.

  • 앵커 요소 기준 배치(relative)

    팝업이 앵커 요소와 같은 부모 컨테이너 내에 추가되며 부모 요소의 스크롤이나 CSS 스타일 영향을 받습니다. 툴팁, 드롭다운, 말풍선 같은 컴포넌트에 적합합니다.

  • 전체 화면 기준 배치(global)

    팝업이 애플리케이션의 최상위(root) 요소에 추가됩니다. 모달, 알림창, 전체 화면 팝업 등에 주로 사용됩니다.

6. 우선 순위 ​

여러 개의 팝업이 동시에 표시될 경우, 팝업의 우선 순위를 설정하여 어떤 팝업이 맨 위에 표시될지 결정할 수 있습니다. 우선 순위 설정은 사용자에게 더 중요한 팝업을 시각적으로 강조하거나, 팝업 간의 상호작용을 관리할 수 있습니다.

  • priority

    숫자로 우선 순위를 설정할 수 있습니다. 값이 클수록 우선순위가 높은 팝업으로 간주되며, 값이 작은 팝업은 뒤에 표시됩니다. 예를 들어, priority=100은 priority=50보다 우선순위가 높습니다.

  • alwaysOnTop

    이 속성이 true로 설정된 팝업은 항상 화면의 최상위에 표시됩니다. 이 설정이 활성화된 팝업은 다른 팝업에 관계없이 맨 위에 고정됩니다.

관련 항목 보기

7. 라이프사이클 ​

팝업이 열리고 닫히는 과정에서 각 상태 변화에 따라 opening, opened, closing, closed 콜백이 호출됩니다. 이를 활용하면 팝업이 생성되고 사라지는 과정에서 원하는 동작을 수행할 수 있습니다.

  • opening

    팝업이 열리는 과정이 시작될 때 호출됩니다. 팝업 요소가 아직 DOM에 추가되기 전 상태이며, 팝업의 초기 설정을 하거나, 비동기 데이터를 불러오는 등의 작업을 수행할 수 있습니다.
    이 콜백에서 false 또는 Promise<false>를 반환하면 팝업 열기가 취소됩니다. 이를 활용하면 특정 조건에서 팝업이 열리지 않도록 제한할 수 있습니다.

  • opened

    팝업이 완전히 열린 후 호출됩니다. 팝업 요소가 DOM에 추가된 후 상태이며, 열기 애니메이션을 실행하거나, 팝업 내부 요소에 대한 추가적인 조작을 수행할 수 있습니다.

  • closing

    팝업이 닫히기 직전에 호출됩니다. 팝업 요소가 제거되기 전이며, 닫기 애니메이션을 실행하거나, 이벤트 리스너 해제 등의 정리 작업을 수행할 수 있습니다.
    이 콜백에서 false 또는 Promise<false>를 반환하면 팝업 닫기가 취소됩니다. 이를 활용하면 특정 조건에서 팝업이 닫히는 것을 방지할 수 있습니다.

  • closed

    팝업이 완전히 닫힌 후 호출됩니다. 팝업 요소가 DOM에서 완전히 제거된 상태입니다. 리소스 해제, 메모리 정리 등의 작업을 수행할 수 있습니다.

8. Auto Focus ​

팝업이 열릴 때 팝업 내부의 특정 요소에 자동으로 포커스를 설정하는 기능입니다. 사용자가 팝업을 열자마자 특정 작업을 시작해야 하는 경우 유용합니다.

  • focusTarget

    팝업 속성으로 설정하며, 팝업이 열릴 때 특정 요소에 포커스를 설정합니다. 우선순위가 autofocus 보다 높아, focusTarget이 설정되면 해당 요소에 먼저 포커스가 이동합니다

  • autofocus

    HTML 요소 속성으로 설정되며, 팝업이 열릴 때 가장 첫 번째로 설정된 autofocus 요소에 포커스를 이동시킵니다. focusTarget 설정되면, autofocus는 무시됩니다.

관련 항목 보기

9. 중첩 팝업 ​

중첩 팝업(Nested Popup)은 팝업 내부에서 또 다른 팝업을 띄울 수 있는 기능을 제공하며, 내부적으로 계층 구조를 가집니다. 이를 통해 팝업 간의 부모-자식 관계를 유지하며, 화면 상에서의 우선순위를 관리할 수 있습니다.

10. 외부 영역 클릭 시 닫기 ​

팝업 외부 영역을 클릭하면 팝업이 자동으로 닫히는 기능을 제공하여 사용자 편의성을 높입니다.

11. 뷰포트 바깥 영역으로 나감 방지 ​

팝업이 화면 바깥으로 벗어나지 않도록 위치를 조정하여 가독성을 유지합니다.

12. ESC 키로 닫기 ​

ESC 키 입력 시 팝업이 닫히도록 하여 키보드 접근성을 향상시키고 빠른 조작이 가능하게 합니다.