SwAlert
Функция Alert() — система всплывающих сообщений. Несколько сообщений групируются; позиция и порядок задаются параметрами placement / align.
The Alert() function shows toast messages. Multiple alerts stack; position and order are controlled by placement / align.
Свойства / Properties
| Имя | Тип | по умолчанию | Значения/Описание |
|---|---|---|---|
class | String | `` | Добавляет пользовательский CSS-класс к компоненту. |
size | String | `` | Размер сообщения: 'large', 'small'. |
type | String | info | 'primary', 'success', 'info', 'warning', 'danger' (алиас 'error' → danger). |
message | String | Default message | Текст сообщения. |
duration | Number | 6000 | Время отображения в миллисекундах. |
placement | String | top | Вертикаль: 'top' — старые сверху в верху экрана; 'bottom' — новые сверху у низа экрана. |
align | String | center | Горизонталь: 'left', 'center', 'right'. |
before | String | `` | Иконка в начале: имя из SVG-спрайта или URL. См. SwIcon. |
after | String | `` | Иконка в конце (закрыть): имя из спрайта или URL. См. SwIcon. |
onClose | Function | — | Колбэк после закрытия. |
Слоты / Slots
Default - Текст описания или модуль / модули
#prefix - Вставка перед текстом (если не передан before)
#suffix - Вставка после текста (если не передан after)
#footer - Нижний блок (рендерится только если слот передан)
Пример использования / Example Usage
<script setup>
import { Alert } from '@studio-west/component-sw'
const TABLER = 'https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline'
const icons = {
star: `${TABLER}/star.svg`,
close: `${TABLER}/x.svg`
}
let alertSeq = 0
function showAlert(type, placement = 'top', align = 'center') {
alertSeq += 1
Alert({
message: `#${alertSeq} ${type} (${placement}/${align})`,
type,
placement,
align,
duration: 8000,
before: icons.star,
after: icons.close
})
}
</script>
<sw-button type="info" label="info" @click="showAlert('info')" />
<sw-button type="success" label="success" @click="showAlert('success')" />
<sw-button type="warning" label="warning" @click="showAlert('warning')" />
<sw-button type="danger" label="error" @click="showAlert('error')" />
<!-- позиция: повторный клик — стек -->
<sw-button
v-for="pos in [
{ placement: 'top', align: 'left' },
{ placement: 'top', align: 'center' },
{ placement: 'bottom', align: 'right' }
]"
:key="`${pos.placement}-${pos.align}`"
type="primary"
:label="`${pos.placement}/${pos.align}`"
@click="showAlert('info', pos.placement, pos.align)"
/>