Сервис 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) | number | 5000 / 2500 | timeOut — длительность в мс до автоматического скрытия (0 = постоянный toast); extendedTimeOut — дополнительное время, предоставляемое после того, как пользователь уводит курсор с toast. |
closeButton / progressBar (config) | boolean | true / false | closeButton показывает кнопку закрытия на toast; progressBar показывает полосу обратного отсчёта до автоматического скрытия. |
closeButtonAriaLabel (config) | string | 'Close' | Доступное имя, объявляемое для кнопки закрытия. Символ × декоративный, поэтому это единственное имя, доступное скринридеру; переведите его в приложениях не на английском языке. |
tapToDismiss (config) | boolean | true | Закрывает toast, когда пользователь кликает в любом его месте. |
disableTimeOut (config) | boolean | 'timeOut' | 'extendedTimeOut' | false | Отключает автоматическое скрытие: true или 'timeOut' отключает начальный таймер; 'extendedTimeOut' отключает только продление после наведения. |
newestOnTop (config) | boolean | true | Если true, самый новый toast вставляется сверху стека, а не снизу. |
positionClass (config) | HubToastPosition | string | 'toast-top-right' | Угол, в котором показывается этот тост: один из шести встроенных классов toast-top/bottom-left/center/right либо собственный класс. У каждой позиции свой контейнер. |
maxOpened (config) | number | 0 | Максимальное число одновременно видимых тостов, считается по всем позициям сразу, а не по каждому углу; 0 — без ограничения. |
autoDismiss (config) | boolean | false | При достижении maxOpened автоматически убирает самый старый тост на экране, чтобы освободить место; предел общий, поэтому это может быть тост в другом углу. Когда он выключен, вызов отбрасывается, а его HubToastRef сообщает dropped: true. |
preventDuplicates (config) | boolean | false | Игнорирует новый toast, чьи сообщение и тип совпадают с уже видимым, возвращая вместо этого дескриптор существующего toast. |
События
Реагируйте на то, что делает toast, — 1 событий, к которым можно подключить вашу логику.
| Имя | Тип | Описание |
|---|---|---|
closed (hub-toast) | OutputEmitterRef<number> | Испускает id toast, когда toast должен быть скрыт — по таймеру автоматического скрытия, по клику при tapToDismiss или по кнопке закрытия. |
Методы
Управляйте toast из кода — 7 методов его программного интерфейса.
| Имя | Сигнатура | Возвращает | Описание |
|---|---|---|---|
HubToastService.success | success(message: string, title?: string, config?: Partial<HubToastConfig>): HubToastRef | HubToastRef handle for the toast, or a handle with dropped: true when the stack was full | Показывает toast успеха с указанным сообщением, необязательным заголовком и переопределениями конфигурации для конкретного вызова. |
HubToastService.error | error(message: string, title?: string, config?: Partial<HubToastConfig>): HubToastRef | HubToastRef handle for the toast, or a handle with dropped: true when the stack was full | Показывает toast ошибки с указанным сообщением, необязательным заголовком и переопределениями конфигурации для конкретного вызова. |
HubToastService.warning | warning(message: string, title?: string, config?: Partial<HubToastConfig>): HubToastRef | HubToastRef handle for the toast, or a handle with dropped: true when the stack was full | Показывает toast предупреждения с указанным сообщением, необязательным заголовком и переопределениями конфигурации для конкретного вызова. |
HubToastService.info | info(message: string, title?: string, config?: Partial<HubToastConfig>): HubToastRef | HubToastRef handle for the toast, or a handle with dropped: true when the stack was full | Показывает информационный toast с указанным сообщением, необязательным заголовком и переопределениями конфигурации для конкретного вызова. |
HubToastService.show | show(message: string, title?: string, config?: Partial<HubToastConfig>, type?: HubToastType | string): HubToastRef | HubToastRef handle for the toast, or a handle with dropped: true when the stack was full | Показывает toast со встроенной или пользовательской строкой типа; тип применяется как data-type на хосте toast и определяет акцентную стилизацию. |
HubToastService.remove | remove(toastId: number): void | void | Удаляет конкретный toast по id, возвращённому методами показа. |
HubToastService.clear | clear(): void | void | Немедленно удаляет все активные toast, завершая Observable onHidden каждого toast. |
Шаблоны
Шаблоны пока не задокументированы.