Dialog
Модальное окно с триггером, секциями и закрытием.
Нужен уникальный id. Доступны Dialog.Trigger, Content, Header, Body, Footer, Close. На мобильных диалог открывается шторкой снизу, её можно смахнуть вниз. Затемнение тёмное в обеих темах. Для подтверждения действия есть готовый ConfirmDialog.
Живой пример
Настройки примера
Использование
import { Dialog } from '@prosazhin/pbcomponents';
<Dialog id='example'>
<Dialog.Trigger>Open</Dialog.Trigger>
<Dialog.Content>
<Dialog.Header>Title</Dialog.Header>
<Dialog.Body>Content</Dialog.Body>
<Dialog.Footer>
<Dialog.Close>Close</Dialog.Close>
</Dialog.Footer>
</Dialog.Content>
</Dialog>;API компонента
Составные части: Dialog.Trigger, Dialog.Content, Dialog.Header, Dialog.Body, Dialog.Footer, Dialog.Close.
| Prop | Тип / варианты | Назначение | По умолчанию |
|---|---|---|---|
id | string | Уникальный идентификатор диалога. | — |
open | boolean | Управляемая видимость диалога. | — |
backdrop | boolean | Затемнение за диалогом. | true |
animationDuration | number | Длительность анимации в миллисекундах. | 400 |
defaultOpen | boolean | Начальная видимость без внешнего управления. | false |
onOpenChange | (open: boolean, id?: string) => void | Вызывается при изменении видимости. | — |
onClose | (open: boolean, id?: string) => void | Вызывается после закрытия. | — |
children | ReactNode | Содержимое компонента. | — |
className | string | Класс корневого элемента. | — |
Нативные HTML-атрибуты поддерживаются там, где компонент рендерит соответствующий элемент. Параметры className управляют только оформлением.