SwGuide
Компонент SwGuide создаёт затемнение вокруг блока по селектору и показывает SwDropdown с шагами из steps. z-index гида динамический: выше контента страницы (в т.ч. тултипов слайдера), ниже алертов.
Свойства / Properties
| Имя | Тип | По умолчанию | Значения/Описание |
|---|---|---|---|
steps | Array | () => [] | Массив шагов: [{ header, text, tag, placement, img }]. |
after | String | `` | Иконка закрытия: имя из спрайта или URL. См. SwIcon. |
iconClose | String | `` | Deprecated (удалить в major) — используйте after. |
maxWidth | Number | 250 | Ширина всплывающего окна в px (без картинки). |
Слоты / Slots
#header - заголовок окна Default - текст сообщения с картинкой #arrow - слот для стрелок
Модель / Model
model - массив обьектов шагов обучения
Пример использования / Example Usage
<script setup>
import { ref } from 'vue'
const guideOn = ref(false)
const guideStep = ref(0)
const close = 'https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/x.svg'
const guideSteps = [
{ header: 'Dropdown', text: 'Клик открывает список пунктов.', tag: '#guide-demo', placement: 'bottom' },
{ header: 'Календарь', text: 'Ниже на странице — SwDatePicker.', tag: '#sw-datepicker', placement: 'bottom' }
]
</script>
<sw-button type="primary" size="small" @click="guideStep = 0; guideOn = true">Запустить гид</sw-button>
<sw-guide
v-if="guideOn"
v-model="guideStep"
:steps="guideSteps"
:after="close"
@close="guideOn = false"
/>