SwGide
Компонент SwGide Создает затенение вокруг блока по заданному тегу, и выводит SwDropdown с управляющими кнопками, переключающими по массиву из параметров steps
Свойства / Properties
| Имя | Тип | По умолчанию | Значения/Описание |
|---|---|---|---|
steps | Array | () => [] | Массив шагов обучения. [{header: 'заголовок',text: 'текст сообщения',tag: 'тег,якорь или класс', placement: 'место всплытия', img: 'src картинки' }], |
after | String | `` | Иконка закрытия: имя из спрайта или URL. См. SwIcon. |
iconClose | String | `` | Deprecated (удалить в major) — используйте after. |
maxWidth | Number | 250 | Ширина всплывающего окна в px (без картинки). по умолчанию 250 |
Слоты / Slots
#header - заголовок окна Default - текст сообщения с картинкой #arrow - слот для стрелок
Модель / Model
model - массив обьектов шагов обучения
Пример использования / Example Usage
<script setup>
import { ref } from 'vue'
const settings = ref({ gide: true })
const step = ref(0)
const steps = ref([
{header: 'заголовок',
text: 'текст сообщения',
tag: 'nav',
placement: 'bottom',
img: 'assets/teme_sw/images/sw.png'
}
])
</script>
<sw-gide v-if="settings.gide" :steps="steps" v-model="step" @close="settings.gide=false" after="https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/x.svg">
<template #header>
Блок {{ steps[step].header }}
<sw-button type="primary" link @click="settings.gide=false"><sw-icon icon-class="https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/x.svg" /></sw-button>
</template>
<template #arrow><sw-icon icon-class="https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/chevron-left.svg" /></template>
</sw-gide>