Справочник API

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

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

Входные свойства пока не задокументированы.

События

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

Шаблоны

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

CSS-переменные

Тематизируйте каждый пиксель с помощью 15 CSS-переменных. Переопределите их в :root или ограничьте их областью обёртки.

Макет и отступы

Токены, управляющие размером toast, радиусом скругления, отступами и тенью.

Переменная	По умолчанию	Тип	Описание
`--hub-toast-width`	`22rem`	length	Максимальная ширина каждой карточки toast. `18rem26rem`
`--hub-toast-border-radius`	`0.375rem`	length	Радиус скругления углов карточки toast. `00.75rem`
`--hub-toast-padding-x`	`1rem`	length	Горизонтальные отступы внутри тела toast. `0.75rem1.25rem`
`--hub-toast-padding-y`	`0.75rem`	length	Вертикальные отступы внутри тела toast. `0.5rem1rem`
`--hub-toast-gap`	`0.5rem`	length	Промежуток между сложенными в стек toast в контейнере. `0.25rem0.75rem`
`--hub-toast-shadow`	`0 2px 8px rgba(0,0,0,.25)`	shadow	Тень, отбрасываемая карточкой toast. `none0 4px 20px rgba(0,0,0,.18)`

Цвета

Токены фона, текста и акцента. Встроенные типы переопределяют акцент из --hub-sys-color-<type>-*.

Переменная	По умолчанию	Тип	Описание
`--hub-toast-bg`	`#323232`	color	Цвет фона карточки toast. `#fffvar(--bs-dark)`
`--hub-toast-color`	`#ffffff`	color	Цвет текста тела toast. `#212529var(--bs-body-color)`
`--hub-toast-title-color`	`inherit`	color	Цвет текста заголовка toast. `#fffvar(--bs-emphasis-color)`
`--hub-toast-accent`	`transparent`	color	Цвет левой границы или подсветки; устанавливается автоматически из семейства токенов DS для встроенных типов. `var(--hub-sys-color-primary)#0d6efd`

Индикатор прогресса

Токены для полосы обратного отсчёта, отображаемой в нижней части toast.

Переменная	По умолчанию	Тип	Описание
`--hub-toast-progress-height`	`4px`	length	Высота полосы индикатора прогресса. `2px6px`
`--hub-toast-progress-bg`	`rgba(255,255,255,.4)`	color	Цвет заполнения индикатора прогресса. `rgba(0,0,0,.2)var(--bs-primary)`

Контейнер

Токены для фиксированного контейнера-наложения, который содержит все видимые toast.

Переменная	По умолчанию	Тип	Описание
`--hub-toast-container-gap`	`0.5rem`	length	Вертикальный промежуток между соседними toast в контейнере. `0.25rem1rem`
`--hub-toast-container-offset`	`1rem`	length	Расстояние от края экрана до контейнера. `0.5rem2rem`
`--hub-toast-zindex`	`1090`	number	Порядок наложения контейнера toast относительно других оверлеев. `10509999`

Стилизация и тематизация

Примеры стилизации пока не задокументированы. В этом разделе будут рецепты кастомизации и примеры тематизации.