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>
  )
}

Props компонента Popconfirm

Проп	Описание	Тип	Допустимые значения	По умолчанию
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'