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Тип / вариантыНазначениеПо умолчанию
headlinestringЗаголовок уведомления.
childrenstringТекст уведомления.
iconSvgTypenone · check · search · userИконка уведомления.
iconClassNamestringКласс иконки уведомления.
openbooleanУправляемая видимость уведомления.
defaultOpenbooleanНачальная видимость без внешнего управления.false
topnumberОтступ уведомления сверху в пикселях.0
delaynumberВремя до автоматического закрытия в миллисекундах.5000
disableTimerbooleanОтключает автоматическое закрытие.false
disableProgressBarbooleanСкрывает индикатор времени.false
disableTimerPauseOnHoverbooleanТаймер не останавливается при наведении.false
disableCloseByClickInsideAnywherebooleanЗапрещает закрывать нажатием внутри уведомления.false
animationDurationnumberДлительность анимации в миллисекундах.200
isMouseInsidebooleanВнешнее управление состоянием наведения.
closeButtonAriaLabelstringДоступное имя кнопки закрытия.Close notification
onClick() => voidОбработчик нажатия внутри уведомления.
onOpenChange(open, id?) => voidВызывается при изменении видимости.
onClose(open: boolean, id?: string) => voidВызывается после закрытия.
idstringИдентификатор уведомления.
classNamestringКласс корневого элемента.

Нативные HTML-атрибуты поддерживаются там, где компонент рендерит соответствующий элемент. Параметры className управляют только оформлением.