Popconfirm 확인 풍선

요소를 클릭하면 확인 풍선이 팝업되어, 위험하거나 중요한 작업 전의 이중 확인에 사용됩니다. 의미는 role="alertdialog"이며, 열리면 포커스를 가두고 확인 / 취소 또는 Esc 뒤에 닫힙니다.

기본 사용법

확인 / 취소 / 어조 타입

0회 확인됨

import { LhButton, LhPopconfirm } from '@lh-ui/react'

export default function Demo() {
  return (
    <LhPopconfirm title="이 작업을 실행하시겠습니까?" onConfirm={() => console.log('confirmed')}>
      <LhButton>확인</LhButton>
    </LhPopconfirm>
  )
}

Popconfirm Props

프로퍼티	설명	타입	선택 가능한 값	기본값
children	트리거 노드	`ReactNode`	—	—
title	확인의 제목 / 질문	`ReactNode`	—	—
confirmText	확인 버튼 문구	`string`	—	언어 팩 `popconfirm.confirm` (确定)
cancelText	취소 버튼 문구	`string`	—	언어 팩 `popconfirm.cancel` (取消)
type	어조 타입	`'info' \| 'warning' \| 'danger'`	—	`'warning'`
placement	표시 위치	`LhPopconfirmPlacement`	`top` / `bottom` / `left` / `right` (`-start` / `-end` 포함)	`'top'`
trigger	트리거 방식	`LhPopconfirmTrigger`	`'hover' \| 'click' \| 'focus' \| 'manual'`	`'click'`
disabled	비활성화	`boolean`	—	`false`
showIcon	아이콘 표시 여부	`boolean`	—	`true`
hideCancel	취소 버튼 숨김 여부	`boolean`	—	`false`
visible	제어 표시/숨김	`boolean`	—	—
defaultVisible	비제어 기본 표시/숨김	`boolean`	—	`false`
popperClass	팝업 사용자 지정 클래스명	`string`	—	—
themeVars	컴포넌트 수준 테마 변수	`Record<string, string>`	—	—
sx	빠른 레이아웃 프로퍼티 (트리거에 적용)	`SxProps`	—	—

Popconfirm 이벤트

이벤트	설명	콜백 시그니처	Vue 대응
onConfirm	확인 버튼 클릭	`() => void`	`confirm`
onCancel	취소 버튼 클릭 또는 Esc 누름	`() => void`	`cancel`
onVisibleChange	표시/숨김 변화	`(visible: boolean) => void`	`update:visible`

포커스 트랩과 Esc

팝업 레이어는 항상 alertdialog로 포커스를 가둡니다. Esc 누름은 취소 버튼 클릭과 동일하게 취급합니다 (onCancel을 발생시키고 닫습니다).

확인 후 자동 닫기

plus와 동일합니다. 확인 또는 취소를 클릭하면 먼저 콜백을 발생시킨 뒤 닫으며, 외부에서 직접 거둘 필요가 없습니다.

스타일

import '@lh-ui/react/style/popconfirm'

기본 사용법​

Popconfirm Props​

Popconfirm 이벤트​

스타일​

기본 사용법

Popconfirm Props

Popconfirm 이벤트

스타일