Popover

Popover (팝오버)

호버 시 표시할 내용을 content 속성으로 설정하는 컴포넌트예요.

출처: 문서

본문

위치 (Placement)

Popover는 9가지 위치를 가져요. 호버 시 표시 내용을 설정하려면 content 속성을 사용해요. placement 속성이 Popover의 위치를 결정해요. 그 값은 [orientation]-[alignment] 형식으로, 네 가지 방향 top, left, right, bottom과 세 가지 정렬 start, end, null이 있고, 기본 정렬은 null이에요. 예를 들어 placement="left-end"를 보면, Popover는 마우스를 올린 요소의 왼쪽에 표시되고 Popover의 아래쪽이 요소의 아래쪽과 정렬돼요.

.popover-base-box {
  width: 600px;
}

.popover-base-box .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.popover-base-box .center {
  justify-content: center;
}

기본 사용법 (Basic usage)

Popover는 ElTooltip 기반으로 만들어졌어요. 그래서 일부 중복 속성은 Tooltip의 문서를 참조하세요. trigger 속성은 popover가 어떻게 트리거되는지 정의해요: hover, click, focus, contextmenu. 수동으로 제어하고 싶다면 :visible을 설정하면 돼요.

가상 트리거 (Virtual triggering)

Tooltip처럼 Popover는 가상 요소로 트리거될 수 있어요. 트리거 요소와 내용 요소를 분리해야 하는 사용 사례라면 이 메커니즘을 사용해야 해요. 보통 #reference로 트리거 요소를 배치하는데, virtual-ref API로 트리거 요소를 원하는 곳 어디에나 배치할 수 있어요. 다만 트리거 요소는 마우스와 키보드 이벤트를 받는 요소여야 한다는 점에 주의하세요.

WARNING v-popover는 곧 deprecated될 예정이에요. 대신 virtual-ref를 사용하세요.

풍부한 내용 (Rich content)

팝오버 안에 다른 컴포넌트/요소를 중첩할 수 있어요. 다음은 중첩 테이블의 예제예요. content 속성을 default 슬롯으로 대체해요.

const gridData = [
  {
    date: '2016-05-02',
    name: 'Jack',
    address: 'New York City',
  },
  {
    date: '2016-05-04',
    name: 'Jack',
    address: 'New York City',
  },
  {
    date: '2016-05-01',
    name: 'Jack',
    address: 'New York City',
  },
  {
    date: '2016-05-03',
    name: 'Jack',
    address: 'New York City',
  },
]

중첩 작업 (Nested operation)

물론 다른 작업을 중첩할 수도 있어요. dialog를 사용하는 것보다 가볍죠.

import { ref } from 'vue'

const visible = ref(false)

디렉티브 (Directive)

popover를 디렉티브 방식으로도 사용할 수 있지만, 이것은 애플리케이션을 복잡하게 만들기 때문에 더 이상 권장하지 않아요. 자세한 내용은 가상 트리거를 참조하세요.

API

Attributes

Slots

Events

Exposes

더 알아보기 (Learn more)

• Popconfirm 컴포넌트 — 팝컨펌
• Tooltip 컴포넌트 — 툴팁
• Element Plus 시작하기 — 프로젝트 설정