Сервис Toast-уведомлений для Angular | ng-hub-ui-toast

Standalone-сервис toast-уведомлений для Angular с Signals, observable жизненного цикла, индикатором прогресса, шестью позициями и полной темизацией через CSS-переменные.

Справочник API

Вот полный контракт toast: всё, что можно привязать, прослушать, спроецировать и тематизировать, собрано в одном месте. Подключите то, что нужно, и оформите так, как хотите — это standalone и дружит с сигналами.

Входные свойства

Настройте toast с помощью 12 входных свойств. Привязывайте их, как любой @Input в Angular.

ИмяТипПо умолчаниюОписание
data (hub-toast)ОбязательноHubToastData—Toast для отрисовки: id, тип, сообщение, необязательный заголовок, итоговая конфигурация и объекты Subject жизненного цикла. Предоставляется внутренне компонентом ToastContainerComponent — обычно вы никогда не привязываете его сами.
position (hub-toast-container)HubToastPosition | string'toast-top-right'Угол экрана, за который отвечает этот контейнер. Он отрисовывает только тосты с совпадающим positionClass — именно это не даёт новому уведомлению сдвинуть те, что уже на экране. ToastService задаёт значение при монтировании контейнера.
timeOut / extendedTimeOut (config)number5000 / 2500timeOut — длительность в мс до автоматического скрытия (0 = постоянный toast); extendedTimeOut — дополнительное время, предоставляемое после того, как пользователь уводит курсор с toast.
closeButton / progressBar (config)booleantrue / falsecloseButton показывает кнопку закрытия на toast; progressBar показывает полосу обратного отсчёта до автоматического скрытия.
closeButtonAriaLabel (config)string'Close'Доступное имя, объявляемое для кнопки закрытия. Символ × декоративный, поэтому это единственное имя, доступное скринридеру; переведите его в приложениях не на английском языке.
tapToDismiss (config)booleantrueЗакрывает toast, когда пользователь кликает в любом его месте.
disableTimeOut (config)boolean | 'timeOut' | 'extendedTimeOut'falseОтключает автоматическое скрытие: true или 'timeOut' отключает начальный таймер; 'extendedTimeOut' отключает только продление после наведения.
newestOnTop (config)booleantrueЕсли true, самый новый toast вставляется сверху стека, а не снизу.
positionClass (config)HubToastPosition | string'toast-top-right'Угол, в котором показывается этот тост: один из шести встроенных классов toast-top/bottom-left/center/right либо собственный класс. У каждой позиции свой контейнер.
maxOpened (config)number0Максимальное число одновременно видимых тостов, считается по всем позициям сразу, а не по каждому углу; 0 — без ограничения.
autoDismiss (config)booleanfalseПри достижении maxOpened автоматически убирает самый старый тост на экране, чтобы освободить место; предел общий, поэтому это может быть тост в другом углу. Когда он выключен, вызов отбрасывается, а его HubToastRef сообщает dropped: true.
preventDuplicates (config)booleanfalseИгнорирует новый toast, чьи сообщение и тип совпадают с уже видимым, возвращая вместо этого дескриптор существующего toast.

События

Реагируйте на то, что делает toast, — 1 событий, к которым можно подключить вашу логику.

ИмяТипОписание
closed (hub-toast)OutputEmitterRef<number>Испускает id toast, когда toast должен быть скрыт — по таймеру автоматического скрытия, по клику при tapToDismiss или по кнопке закрытия.

Методы

Управляйте toast из кода — 7 методов его программного интерфейса.

ИмяСигнатураВозвращаетОписание
HubToastService.successsuccess(message: string, title?: string, config?: Partial<HubToastConfig>): HubToastRefHubToastRef handle for the toast, or a handle with dropped: true when the stack was fullПоказывает toast успеха с указанным сообщением, необязательным заголовком и переопределениями конфигурации для конкретного вызова.
HubToastService.errorerror(message: string, title?: string, config?: Partial<HubToastConfig>): HubToastRefHubToastRef handle for the toast, or a handle with dropped: true when the stack was fullПоказывает toast ошибки с указанным сообщением, необязательным заголовком и переопределениями конфигурации для конкретного вызова.
HubToastService.warningwarning(message: string, title?: string, config?: Partial<HubToastConfig>): HubToastRefHubToastRef handle for the toast, or a handle with dropped: true when the stack was fullПоказывает toast предупреждения с указанным сообщением, необязательным заголовком и переопределениями конфигурации для конкретного вызова.
HubToastService.infoinfo(message: string, title?: string, config?: Partial<HubToastConfig>): HubToastRefHubToastRef handle for the toast, or a handle with dropped: true when the stack was fullПоказывает информационный toast с указанным сообщением, необязательным заголовком и переопределениями конфигурации для конкретного вызова.
HubToastService.showshow(message: string, title?: string, config?: Partial<HubToastConfig>, type?: HubToastType | string): HubToastRefHubToastRef handle for the toast, or a handle with dropped: true when the stack was fullПоказывает toast со встроенной или пользовательской строкой типа; тип применяется как data-type на хосте toast и определяет акцентную стилизацию.
HubToastService.removeremove(toastId: number): voidvoidУдаляет конкретный toast по id, возвращённому методами показа.
HubToastService.clearclear(): voidvoidНемедленно удаляет все активные toast, завершая Observable onHidden каждого toast.

Шаблоны

Шаблоны пока не задокументированы.