ConfirmPopover
Подтверждение действия в попапе рядом с кнопкой.
Оберните кнопку действия в ConfirmPopover — по нажатию рядом откроется попап с вопросом и кнопками подтверждения и отмены. onConfirm вызывается при подтверждении, после чего попап закрывается. color='danger' подходит для необратимых действий. Подходит для лёгких подтверждений; если нужно больше внимания — используйте ConfirmDialog.
Живой пример
Настройки примера
Использование
import { Button, ConfirmPopover } from '@prosazhin/pbcomponents';
<ConfirmPopover
title='Delete the file?'
description='This action cannot be undone.'
color='danger'
confirmText='Delete'
cancelText='Cancel'
onConfirm={() => deleteFile()}
>
<Button
color='danger'
theme='border'
>
Delete
</Button>
</ConfirmPopover>;API компонента
| Prop | Тип / варианты | Назначение | По умолчанию |
|---|---|---|---|
children | ReactElement | Элемент-триггер, обычно Button. | — |
title | ReactNode | Вопрос или заголовок подтверждения. | — |
description | ReactNode | Пояснение под заголовком. | — |
color | 'primary' | 'danger'primary · danger | Цвет кнопки подтверждения. | primary |
confirmText | string | Текст кнопки подтверждения. | Confirm |
cancelText | string | Текст кнопки отмены. | Cancel |
onConfirm | () => void | Вызывается при подтверждении; после него окно закрывается. | — |
onCancel | () => void | Вызывается при отмене. | — |
open | boolean | Управляемое состояние открытия. | — |
defaultOpen | boolean | Начальное состояние без внешнего управления. | false |
onOpenChange | (open: boolean) => void | Вызывается при открытии и закрытии. | — |
placement | PopoverPlacementtop · top-start · top-end · bottom · bottom-start · bottom-end · left · left-start · left-end · right · right-start · right-end | Сторона и выравнивание относительно триггера: top, bottom-start, right-end и т. д. При нехватке места попап переворачивается и сдвигается. | bottom-start |
portal | boolean | Рендерит попап в портал в конце body. | false |
className | string | Класс корневого элемента. | — |
Нативные HTML-атрибуты поддерживаются там, где компонент рендерит соответствующий элемент. Параметры className управляют только оформлением.