Notification
Всплывающее сообщение с таймером и прогрессом.
headline обязателен. delay задаёт задержку закрытия; disableTimer и disableProgressBar меняют поведение.
Живой пример
Настройки примера
Использование
'use client';
import { Button, Notification } from '@prosazhin/pbcomponents';
import { useState } from 'react';
function Example() {
const [open, setOpen] = useState(false);
return (
<>
<Button onClick={() => setOpen(true)}>Show notification</Button>
<Notification
headline='Saved'
open={open}
onOpenChange={setOpen}
>
Changes saved.
</Notification>
</>
);
}API компонента
| Prop | Тип / варианты | Назначение | По умолчанию |
|---|---|---|---|
headline | string | Заголовок уведомления. | — |
children | string | Текст уведомления. | — |
icon | SvgTypenone · check · search · user | Иконка уведомления. | — |
iconClassName | string | Класс иконки уведомления. | — |
open | boolean | Управляемая видимость уведомления. | — |
defaultOpen | boolean | Начальная видимость без внешнего управления. | false |
top | number | Отступ уведомления сверху в пикселях. | 0 |
delay | number | Время до автоматического закрытия в миллисекундах. | 5000 |
disableTimer | boolean | Отключает автоматическое закрытие. | false |
disableProgressBar | boolean | Скрывает индикатор времени. | false |
disableTimerPauseOnHover | boolean | Таймер не останавливается при наведении. | false |
disableCloseByClickInsideAnywhere | boolean | Запрещает закрывать нажатием внутри уведомления. | false |
animationDuration | number | Длительность анимации в миллисекундах. | 200 |
isMouseInside | boolean | Внешнее управление состоянием наведения. | — |
closeButtonAriaLabel | string | Доступное имя кнопки закрытия. | Close notification |
onClick | () => void | Обработчик нажатия внутри уведомления. | — |
onOpenChange | (open, id?) => void | Вызывается при изменении видимости. | — |
onClose | (open: boolean, id?: string) => void | Вызывается после закрытия. | — |
id | string | Идентификатор уведомления. | — |
className | string | Класс корневого элемента. | — |
Нативные HTML-атрибуты поддерживаются там, где компонент рендерит соответствующий элемент. Параметры className управляют только оформлением.